/* when div1 is hovered make div2 blue */
body:has(.nav:hover) .navText {
  display: block;
}
body:has(.nav:hover) .navText::after {
  content: "Click Something";
}
body:has(.fa-house:hover) .navText::after {
  content: "Back Home";
}
body:has(.fa-tree:hover) .navText::after {
  content: "To Linktree";
}
body:has(.fa-skyatlas:hover) .navText::after {
  content: "To Bluesky";
}
body:has(.fa-hippo:hover) .navText::after {
  content: "To Mastodon";
}
body:has(.fa-bandcamp:hover) .navText::after {
  content: "To Bandcamp";
}
body:has(.fa-computer:hover) .navText::after {
  content: "To Windows 98 / XP";
}
body:has(.fa-rocket:hover) .navText::after {
  content: "To Temporus";
}
body:has(.fa-gamepad:hover) .navText::after {
  content: "To Itch.IO";
}
body:has(.fa-discord:hover) .navText::after {
  content: "To Discord";
}
body:has(.fa-utensils:hover) .navText::after {
  content: "Try Some Lasagna";
}
body:has(.fa-envelope:hover) .navText::after {
  content: "Write Me An Email";
}

.home {
  margin: 0px;
  background-color: black;
}

html {
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
  color: #dfeac8;
}
a:active {
  text-decoration: none;
  color: orange;
}
a:visited {
  text-decoration: none;
  color: #dfeac8;
}
a:hover {
  text-decoration: none;
  color: orange;
}

.bighr {
  width: 60%;
  text-align: center;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0%);
}

.headerArea {
  text-align: left;
  color: #dfeac8;
  border-radius: 1em;
  font-size: 100px;
  font-family: "Amatic SC", cursive;
  margin: 12px;
}
.messageBox {
  text-align: justify;
  margin: 12px;
  color: #dfeac8;
  border-radius: 1em;
  font-size: 64px;
  font-family: "Amatic SC", cursive;
}

.continueButton {
  text-align: center;
  background-color: rgba(44, 56, 78, 0.9);
  float: right;
  top: 1em;
  margin-left: 2em;
  padding-left: 1em;
  padding-right: 1em;
  color: #dfeac8;
  border-radius: 1em;
  position: absolute;
  border-color: #dfeac8;
  border-style: solid;
  font-size: 32px;
  vertical-align: middle;
  font-family: "Amatic SC", cursive;
  visibility: visible;
}

.nav {
  position: fixed;
  text-align: left;
  background-color: rgba(44, 56, 78, 0.9);
  float: right;
  top: 1em;
  right: 0em;
  margin-right: 2em;
  padding-left: 1em;
  padding-right: 1em;
  color: #dfeac8;
  border-radius: 1em;
  border-color: #dfeac8;
  border-style: solid;
  font-size: 32px;
  font-family: "Amatic SC", cursive;
}

.navText {
  text-align: center;
  display: none;
}

.innerArea {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: lightgreen;
  margin: 16px;
}

footer {
  text-align: center;
  color: #dfeac8;
  font-size: 24px;
  font-family: "Amatic SC", cursive;
}

@media screen and (min-width: 1900px) {
  .continueButton {
    visibility: visible;
  }

  .headerArea {
    font-size: 100px;
  }

  .messageBox {
    font-size: 48px;
  }

  .nav {
    font-size: 32px;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1899px) {
  .continueButton {
    visibility: visible;
  }

  .headerArea {
    font-size: 80px;
  }

  .messageBox {
    font-size: 48px;
  }

  .nav {
    font-size: 32px;
  }
}

/* Styles for screens between 900px and 1199px */

@media screen and (min-width: 900px) and (max-width: 1199px) {
  .continueButton {
    visibility: hidden;
  }

  .headerArea {
    font-size: 48px;
  }

  .messageBox {
    font-size: 32px;
  }

  .nav {
    text-align: center;
    left: 0%;
    transform: inherit;
    font-size: 24px;
    float: inherit;
    top: unset;
    right: 0%;
    position: inherit;
    margin: 12px;
  }
}

@media screen and (min-width: 640px) and (max-width: 899px) {
  .continueButton {
    visibility: hidden;
  }

  .headerArea {
    font-size: 32px;
  }

  .messageBox {
    font-size: 32px;
  }

  .nav {
    text-align: center;
    left: 0%;
    transform: inherit;
    font-size: 24px;
    float: inherit;
    top: unset;
    right: 0%;
    position: inherit;
    margin: 12px;
  }
}

@media screen and (min-width: 480px) and (max-width: 639px) {
  .continueButton {
    visibility: hidden;
  }

  .headerArea {
    font-size: 24px;
  }

  .messageBox {
    font-size: 24px;
  }

  .nav {
    text-align: center;
    left: 0%;
    transform: inherit;
    font-size: 16px;
    float: inherit;
    top: unset;
    right: 0%;
    position: inherit;
    margin: 12px;
  }
}

@media screen and (max-width: 479px) {
  .continueButton {
    visibility: hidden;
  }

  .headerArea {
    font-size: 16px;
  }

  .messageBox {
    font-size: 16px;
  }

  .nav {
    text-align: center;
    left: 0%;
    transform: inherit;
    font-size: 16px;
    float: inherit;
    top: unset;
    right: 0%;
    position: inherit;
    margin: 12px;
  }
}