@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
}

h1, h2, h3 {
  font-family: 'Cormorant Garamond', serif;
}

* {
  box-sizing: border-box;
}

body {
   min-height: 100dvh;
   display: grid;
   grid-template-columns: 4rem 1fr;
   grid-template-rows: 4rem 1fr;
   grid-template-areas:
      "topnav topnav"
      "sidenav main";
   overflow-x: hidden;
   background:
      radial-gradient(circle at 50% 42%, rgba(127, 160, 90, 0.055) 0 10%, rgba(127, 160, 90, 0.04) 18%, transparent 40%),
      radial-gradient(circle at 50% 42%, rgba(95, 122, 67, 0.045) 0 18%, transparent 48%),
      radial-gradient(circle at 50% 42%, rgba(31, 58, 46, 0.06) 0 30%, transparent 60%),
      radial-gradient(circle at 20% 18%, rgba(47, 91, 59, 0.09) 0 8%, transparent 28%),
      radial-gradient(circle at 80% 22%, rgba(47, 91, 59, 0.08) 0 8%, transparent 30%),
      radial-gradient(circle at 18% 82%, rgba(47, 91, 59, 0.07) 0 10%, transparent 32%),
      radial-gradient(circle at 82% 78%, rgba(95, 122, 67, 0.07) 0 10%, transparent 32%),
      linear-gradient(145deg, #000000 0%, #030403 16%, #070d0a 34%, #14251d 50%, #0d1a14 66%, #050806 82%, #000000 100%);
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
}

.topnav {
   grid-area: topnav;
   position: sticky;
   top: 0;
   z-index: 10;
   display: flex;
   background: linear-gradient(90deg,
      rgba(8, 10, 9, 0.48) 0%,
      rgba(12, 16, 13, 0.40) 58%,
      rgba(19, 24, 20, 0.62) 100%
   );
   backdrop-filter: blur(10px) saturate(120%);
   border-bottom: 1px solid rgba(127, 160, 90, 0.14);
   list-style-type: none;
   height: 4rem;
}

.topnav ul {
   display: flex;
   width: 100%;
   justify-content: end;
   flex-direction: row-reverse;
   margin: 0.3rem;
   gap: 0.5rem;
}

.topnav li {
   width: 5rem;
}

.topnav a {
   display: block;
   background-color: rgb(7, 97, 22);
   color: white;
   border-radius: 0.2rem;
   text-align: center;
   text-decoration: none;
   padding: 0.8rem 0;
}

.topnav a:hover {
   background-color: white;
   color: black;
}

.logo img {
   width: 4rem;
   padding: 0.6rem;
   border-right: 1px solid rgba(127, 160, 90, 0.14);
}

.sidenav {
   grid-area: sidenav;
   position: sticky;
   top: 4rem;
   background: linear-gradient(180deg,
      rgba(8, 10, 9, 0.54) 0%,
      rgba(12, 16, 13, 0.40) 52%,
      rgba(19, 24, 20, 0.68) 100%
   );
   backdrop-filter: blur(10px) saturate(120%);
   border-right: 1px solid rgba(127, 160, 90, 0.14);
   list-style-type: none;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 4rem;
   height: calc(100dvh - 4rem);
   padding: 0.3rem;
}

.sidenav ul {
   display: flex;
   width: 100%;
   height: 100%;
   flex-direction: column;
   justify-content: start;
   gap: 1rem;
   align-items: center;
}

.sidenav li {
   width: 100%;
   aspect-ratio: 1 / 1;
}

.sidenav a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   background-color: rgb(7, 97, 22);
   color: white;
   border-radius: 0.2rem;
   text-align: center;
   text-decoration: none;
}

.sidenav a:hover {
   background-color: white;
   color: black;
}

main {
   grid-area: main;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 1.5rem;
   min-height: calc(100dvh - 4rem);
   text-align: center;
}

.coming-soon {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
   opacity: 1;
}

.coming-soon-logo {
   position: relative;
   width: min(78vw, 34rem);
   isolation: isolate;
}

.coming-soon-logo::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(
      115deg,
      transparent 0%,
      transparent 41%,
      rgba(214, 245, 170, 0.1) 45%,
      rgba(214, 245, 170, 1) 50%,
      rgba(214, 245, 170, 0.1) 55%,
      transparent 59%,
      transparent 100%
   );
   background-size: 180% 180%;
   animation: logoShine 3.8s linear infinite;
   opacity: 1;
   -webkit-mask-image: url("https://roatrate.sirv.com/The-Isle-Roar/LogoWide/WideWhiteout/RoarWideWhiteout1745.png");
   mask-image: url("https://roatrate.sirv.com/The-Isle-Roar/LogoWide/WideWhiteout/RoarWideWhiteout1745.png");
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
   mask-position: center;
   -webkit-mask-size: contain;
   mask-size: contain;
   z-index: 0;
   pointer-events: none;
   mix-blend-mode: screen;
}

.coming-soon-logo img {
   position: relative;
   z-index: 1;
   width: min(78vw, 34rem);
   height: auto;
   display: block;
   opacity: 0.72;
   filter: brightness(0.82) contrast(1.08) saturate(0.95)
      drop-shadow(0 0 0.5rem rgba(171, 214, 127, 0.45))
      drop-shadow(0 0 1.2rem rgba(127, 160, 90, 0.3));
}

.coming-soon-kicker {
   color: #eef5e8;
   letter-spacing: 0.12em;
   text-transform: uppercase;
}

@keyframes logoShine {
   0% {
      background-position: 0% 50%;
   }

   100% {
      background-position: 200% 50%;
   }
}