/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); */
body, html {
  height: 100%;
}
body {
  background-color: #52664F; /* Heather Green */
  color: #F4F1ED; /* Primary Text */
  font-family: 'Courier New', Courier, monospace;
  line-height: 1.6;
}

/* Secondary Text */
.secondary-text {
  color: #B8B8B0;
}

/* Error Text */
.error {
  color: #D65A5A;
}

/* Links */
a {
  color: #A3C9A8; /* Default Link */
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #DDEACB; /* Hover Link */
}

a:active {
  color: #F2C572; /* Active Link */
}

a:visited {
  color: #8AA89F; /* Visited Link */
}

/* Buttons */
button.primary {
  background-color: #F2C572;
  color: #52664F;
  border: none;
  padding: 0.6em 1.2em;
  border-radius: 4px;
  cursor: pointer;
}

button.primary:hover {
  background-color: #DDEACB;
}

button.secondary {
  background-color: #A3C9A8;
  color: #52664F;
  border: none;
  padding: 0.6em 1.2em;
  border-radius: 4px;
  cursor: pointer;
}

button.secondary:hover {
  background-color: #DDEACB;
}

/* UI Elements */
hr {
  border: 0;
  height: 1px;
  background-color: #6F7D6A; /* Divider */
}

.card {
  background-color: #3F4F3C; /* Panel/Card Background */
  padding: 1em;
  border-radius: 8px;
  color: #F4F1ED;
}

:focus {
  outline: 2px solid #DDEACB; /* Focus Ring */
}

/* Optional States */
.success {
  color: #A8D5BA;
}

.info {
  color: #C3DCE3;
}

.disabled {
  color: #7A7A72;
  pointer-events: none;
  opacity: 0.6;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

/* The hero image */
.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/IMG_7601.JPG);

  /* Set a specific height */
  height: 50%;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #F4F1ED;
}

footer {
  position: relative;
}

.center {
  width: 200px;
  margin: 20px auto;
  display: block;
}