/* variables */
:root {
    --primary-bg: lab(93.03% 12.19 -10.33 / 0.783);
    --secondary-bg: lab(85.1% 26.21 -22.29 / 0.783);
    --primary-text: lab(100% 0.01 -0.01);
    --secondary-text: lab(53.1% 36.27 -73.44);
    --content-bg: lab(95.85% 7.16 -6.13 / 0.6);
    --button-bg: lab(87.09% 23.79 -19.26);
    --shadow-dark: inset lab(53.1% 36.27 -73.44 / 0.6) -2px -2px 0px;
    --shadow-light: inset lab(100% 0.01 -0.01 / 0.6) 2px 2px 0px;
    --shadow-dark2: inset lab(53.1% 36.27 -73.44 / 0.6) 2px 2px 0px;
    --shadow-light2: inset lab(100% 0.01 -0.01 / 0.6) -2px -2px 0px;
    --box-shadow: var(--shadow-dark), var(--shadow-light);
    --box-shadow2: var(--shadow-dark2), var(--shadow-light2);
    --gradient: linear-gradient(to right, lab(85.51% -19.07 -22.33 / 0.7), lab(80.63% 41.68 -29.03 / 0.6));
    --texture: url('images/texture.png');
}

/* pee */
p {
   padding: 0;
   margin: 0 0 5px 0;
}

/* grid */
body {
   height: 100vh;
   display: grid;
   grid-template-columns: 3fr 9fr;
   grid-template-rows: 11fr 1fr;
   grid-column-gap: 10px;
   grid-row-gap: 10px;

   font-family: Georgia, 'Times New Roman', Times, serif
}

/* bg */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url('images/gradient_v.png');
    background-repeat: no-repeat;
    background-size: cover;
    filter: brightness(1);
    image-rendering: pixelated;
    pointer-events: none;
    z-index: -2;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url('images/clouds.png');
    background-repeat: repeat;
    background-size: 50%;
    animation: scrolling 900s linear infinite;
    image-rendering: pixelated;
    pointer-events: none;
    z-index: -1;
}

@keyframes scrolling {
    from { background-position: 0 0; }
    to { background-position: -10000px 0; }
}

/* nav */
.nav { 
   grid-area: 1 / 1 / 2 / 2;
   align-items: center;
   padding: 10px;
   box-sizing: border-box;
   height: fit-content;

   background-color: var(--primary-bg);
   background-image: var(--texture);
   background-repeat: repeat;
   box-shadow: var(--box-shadow);
   
   }

.nav h2 {
   margin: 0;
   width: 100%;
   padding: 10px;
   text-align: center;
   box-sizing: border-box;

   color: var(--primary-text);
   text-shadow: var(--secondary-text) 1px 1px 0px;

   background-image: var(--gradient);
   background-size: cover;
   box-shadow: var(--box-shadow);

   image-rendering: pixelated;
}

.nav .links {
   font-size: 130%;

   margin-top: 10px;
   width: 100%;
   height: auto;
   padding: 10px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: 10px;

   background-color: var(--primary-bg);
   box-shadow: var(--box-shadow2);

   image-rendering: pixelated;
}

.nav .links a {
   display: block;
   max-width: 100%;
   text-align:center;
   background-color: var(--button-bg);
   background-image: var(--texture);
   text-decoration: none;
   color: var(--primary-text);
   text-shadow: var(--secondary-text) 1px 1px 0px;
   box-shadow: var(--box-shadow);
   padding: 10px;
   image-rendering: crisp-edges;
}

.nav .links a:active {
   box-shadow: var(--box-shadow2);
   transform: translateY(1px);
}


/* window */

.window {
   grid-area: 1 / 2 / 2 / 2; 
   padding: 10px;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   
   background-color: var(--content-bg);
   background-image: var(--texture);
   background-repeat: repeat;
   box-shadow: var(--box-shadow);
   }

.window h2 {
   margin: 0;
   width: 100%;
   padding: 10px;
   text-align: center;
   box-sizing: border-box;
    
   color: var(--primary-text);
   text-shadow: var(--secondary-text) 1px 1px 0px;
    
   background-image: var(--gradient);
   background-size: cover;
   box-shadow: var(--box-shadow);
    
   image-rendering: pixelated;
}

.window .content {
   margin-top: 10px;
   box-sizing: border-box;
   display: inline-block;
   padding: 20px;
   width: 100%;
   height: calc(100% - 60px);
   
   color: var(--secondary-text);

   box-shadow: var(--box-shadow2);
    
   image-rendering: smooth;

   overflow: scroll;

   font-size: 110%;
}

.window .content img {
   display: block;
   margin: 10px auto;
   max-width: 100%;
}

.window .content a {
   color: var(--secondary-text);
   text-decoration: underline;
}

.window .content a:hover {
   color: var(--primary-text);
}

/* home */

.home .content {
   background-color: var(--primary-bg);
}

.eightyeight {
   display: flex;
   justify-content: center;
   margin:0;
   padding:0;
   flex-wrap: wrap;
   min-width: 5px;
}

.about .content {
   background-color: var(--primary-bg);
}

/* foot */
.footer { 
   grid-area: 2 / 2 / 3 / 3;
   text-align: center;
   padding: 0;
   margin: 10px 0;
   box-sizing: border-box;
}
.footer p {
  color: lab(25.7% 59.31 -85.61);
  font-size: 80%;
}

/* mobile */
@media (max-width: 768px) {
   body {
      display: flex;
      flex-direction: column;
      height: auto;
      overflow: auto;

   }
   .nav {
      width: 100%;
      box-sizing: border-box;
      margin: 0;
      border-bottom: 2px solid var(--secondary-text);
   }
   .nav .links {
      font-size: 125%;
      flex-direction: row;
      padding: 5px;
      flex-wrap: wrap;
      justify-content: center;
   }
   .nav .links a {
      flex: 1;
      min-width: 60px;
   }
}