@import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
html {
  font-size: 62.5%;
}

html, body {
  height: 100%;
}

body {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope", sans-serif;
  background: #FFF8E7;
  color: #16161d;
}

@keyframes appear {
  0% {
    top: 0;
    transform-origin: 5rem 0;
  }
  100% {
    top: -25rem;
    transform-origin: 5rem 25rem;
  }
}
@keyframes menu-rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
@keyframes scaling {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* centers horizontally */
  gap: 0rem; /* spacing between text and menu */
}

.text-container {
  margin-bottom: 15rem;
  margin-top: 0;
  padding-top: 0;
}

.subheading {
  font-size: 2rem;
  color: #383232;
  margin-top: 0rem;
}

.orbital-menu {
  position: relative;
  width: 18rem; /* same as .orbital-menu__center-pic width */
  height: 18rem; /* same as .orbital-menu__center-pic height */
  margin: auto; /* center horizontally if needed */
}

.orbital-menu__list {
  position: absolute;
  top: 50%;
  left: 50%;
  animation: menu-rotation linear 60s infinite;
  list-style: none;
}
.orbital-menu__list:hover {
  animation-play-state: paused;
}
.orbital-menu__list:hover .orbital-menu__link > * {
  animation-play-state: paused;
}
.orbital-menu__item {
  position: absolute;
  animation: appear 2s forwards;
  left: -5rem;
  top: 0;
  transform-origin: 5rem 0;
}
.orbital-menu__item:nth-child(2) {
  animation-delay: 0.1s;
  transform: rotate(60deg);
}
.orbital-menu__item:nth-child(2) .orbital-menu__link {
  transform: rotate(-60deg);
}
.orbital-menu__item:nth-child(2) .orbital-menu__link:before {
  background: hsl(45, 100%, 65%);
  animation-delay: 0.33s;
}
.orbital-menu__item:nth-child(3) {
  animation-delay: 0.2s;
  transform: rotate(120deg);
}
.orbital-menu__item:nth-child(3) .orbital-menu__link {
  transform: rotate(-120deg);
}
.orbital-menu__item:nth-child(3) .orbital-menu__link:before {
  background: hsl(239, 17%, 53%);
  animation-delay: 0.66s;
}
.orbital-menu__item:nth-child(4) {
  animation-delay: 0.3s;
  transform: rotate(180deg);
}
.orbital-menu__item:nth-child(4) .orbital-menu__link {
  transform: rotate(-180deg);
}
.orbital-menu__item:nth-child(4) .orbital-menu__link:before {
  background: hsl(33, 57%, 62%);
  animation-delay: 0.99s;
  background: 
    repeating-linear-gradient(
      45deg,
      #FFF8E7,
      #FFF8E7 4px,
      hsl(33, 57%, 62%)  4px,
      hsl(33, 57%, 62%) 8px
    ); /* striped fill */
  animation: scaling linear 3s infinite;
}
.orbital-menu__item:nth-child(5) {
  animation-delay: 0.4s;
  transform: rotate(240deg);
}
.orbital-menu__item:nth-child(5) .orbital-menu__link {
  transform: rotate(-240deg);
}
.orbital-menu__item:nth-child(5) .orbital-menu__link:before {
  animation-delay: 1.32s;
  background: 
    repeating-linear-gradient(
      45deg,
      #FFF8E7,
      #FFF8E7 4px,
      hsl(12, 53%, 47%) 4px,
      hsl(12, 53%, 47%) 8px
    ); /* striped fill */
  animation: scaling linear 3s infinite;
}
.orbital-menu__item:nth-child(6) {
  animation-delay: 0.5s;
  transform: rotate(300deg);
}
.orbital-menu__item:nth-child(6) .orbital-menu__link {
  transform: rotate(-300deg);
}
.orbital-menu__item:nth-child(6) .orbital-menu__link:before {
  animation-delay: 1.65s;
  background: hsl(23, 28%, 32%);
}
.orbital-menu__item:nth-child(7) {
  animation-delay: 0.6s;
  transform: rotate(270deg);
}
.orbital-menu__item:nth-child(7) .orbital-menu__link {
  transform: rotate(-270deg);
}
.orbital-menu__item:nth-child(7) .orbital-menu__link:before {
  background: hsl(270, 100%, 65%);
  animation-delay: 1.98s;
}
.orbital-menu__item:nth-child(8) {
  animation-delay: 0.7s;
  transform: rotate(315deg);
}
.orbital-menu__item:nth-child(8) .orbital-menu__link {
  transform: rotate(-315deg);
}
.orbital-menu__item:nth-child(8) .orbital-menu__link:before {
  background: hsl(315, 100%, 65%);
  animation-delay: 2.31s;
}
.orbital-menu__link {
  position: relative;
  display: block;
  height: 10rem;
  width: 10rem;
}
.orbital-menu__link:before {
  content: "";
  position: absolute;
  inset: 0;
  background: hsl(210, 40%, 96%);
  border-radius: 50%;
  animation: scaling linear 3s infinite;
}
.orbital-menu__link > * {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: menu-rotation linear 60s infinite;
  animation-direction: reverse;
  transition: 250ms ease all;
}
.orbital-menu__link-text {
  opacity: 0;
  text-align: center;
  color: #fff;
}
.orbital-menu__link-icon {
  color: rgba(0, 0, 0, 0.8);
}
.orbital-menu__link:hover:before {
  animation-play-state: paused;
  filter: brightness(0.7);
}
.orbital-menu__link:hover .orbital-menu__link-text {
  opacity: 1;
}
.orbital-menu__link:hover .orbital-menu__link-icon {
  opacity: 0;
}
.orbital-menu__center-pic {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18rem;
  height: 18rem;
  transform: translate(-50%, -50%);
  border-radius: 4rem;
  /* other styles */
  border-color: #FFF8E7;
  border-width: 1px;
  outline: 4px solid transparent;
  transition: outline-color 1s ease, outline-width 1s ease;

}
.orbital-menu__center-pic > img {
  position: absolute;
  inset: 0;
  max-width: 100%;
  transition: 0.5s ease all;
  border-radius: inherit; /* Keep rounding consistent */
}
.orbital-menu__center-pic:hover > img:last-child {
  opacity: 0;
}/*# sourceMappingURL=styles.css.map */


h1::before {  
  transform: scaleX(0);
  transform-origin: bottom right;
}

h1:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

h1::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background: hsl(239, 17%, 53%);
  z-index: -1;
  transition: transform .5s ease;
}

h1 {
  position: relative;
  font-size: 5rem;
  z-index: 50;
}

.subheading::before {  
  transform: scaleX(0);
  transform-origin: bottom left;
}

.subheading:hover::before {
  transform: scaleX(1);
  transform-origin: bottom right;
}

.subheading::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background: hsl(45, 100%, 65%);
  z-index: -1;
  transition: transform .5s ease;
}

.subheading {
  position: relative;
  font-size: 2rem;
}


html {
  block-size: 100%;
  inline-size: 100%;
}

body {
  min-block-size: 100%;
  min-inline-size: 100%;
  margin: 0;
  box-sizing: border-box;
  display: grid;
  place-content: center;
}

.tidel-link {
  color: #1e2a4b;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
  font-weight: bold;        /* make it bold (optional) */
}

.tidel-link:hover {
  color: #FFF8E7;
  font-weight: bolder;
  border-bottom: 2.5px solid #FFF8E7;
}


@media (orientation: landscape) {
  body {
    grid-auto-flow: column;
  }
}

#pageOverlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: blue;
  border-radius: 50%;
  z-index: 9999; /* must be on top */
  transform: translate(-50%, -50%);
  transition: width 2s ease, height 2s ease, top 2s ease, left 2s ease;
  pointer-events: none; /* optional: allows clicks to pass through if needed */
}
/* have it so when you hover over something
the background of my portrait changes
and when you click, that background
expands to cover the whole page
and fills in the portrait to have a "Go Back" button
maybe move the portait to the top or side to get it out of the way
 */