body {
   margin: 0;
   height: 100vh;
   width: 100vw;
   display: grid;
   place-items: center;
}

header,
footer {
   position: fixed;
   z-index: 10;
}

header {
   top: 0;
   left: 3rem;
   display: flex;

}

/* main/sections */

main {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   position: fixed;
   overflow: auto;
   scrollbar-width: none;

   scroll-behavior: auto !important;

   width: 100vw;
   height: 100vh;
}

section {
   display: grid;
   place-items: center;
   width: inherit;
   height: inherit;
   overflow: hidden;
   /* first div child should be the contents wrapper */

}

section>div:first-child {
   overflow: visible;
   width: 85%;
   height: 80%;
   margin-bottom: 2rem;
}

/* screen light theme */

section::before,
section::after {
   content: '';
   position: absolute;
   width: 20vw;
   height: 0;
   z-index: 15;
   opacity: var(--light);
   box-shadow: 0 0 15vw 1.5vw var(--sectionCol);
   transition: 2s;
}

section::before {
   top: 10vh;
}

section::after {
   bottom: 10vh;
}

section[data-color="m"] {
   --sectionCol: var(--yl);
}

section[data-color="pk"] {
   --sectionCol: var(--pk);
}

section[data-color="sc"] {
   --sectionCol: var(--sc);
}

/* top right */
.section-top {
   position: absolute;
   right: 0;
   top: -7.5vh;
   align-items: center;
   display: flex;
   gap: 2rem;
   z-index: 30;


}

:root {
   --night-glow: 1;
}

#night-glow {
   position: fixed;
   top: 5vh;
   width: 70vw;
   opacity: .5;
   box-shadow: 0 0 40vh 15vh var(--topLight);
   border-radius: 100%;
   will-change: box-shadow;
}

#main-bottom {
   position: fixed;
   bottom: .5rem;
   right: .5rem;
   display: flex !important;
   gap: 1em;

   a {
      font-size: 1.5rem;
      &::after {font-size: .75rem;}
   }

}


section[data-locked] {
   &::after {
      place-self: center;
      box-shadow: none;
      transition: none !important;
      position: relative;
      height: fit-content;
      border: var(--brd);
      font-size: 2rem;
      padding: 1em;
      width: fit-content;


      background: var(--greyHatch);
      box-shadow: var(--grShd),  0 0 2em 2em var(--bl);
      border-radius: 1em;

      content: 'Insufficient authorization level';
   }

   * {
      display: none !important;
   }
}