.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 15px 15px;
    padding: 10px;
    max-height: 1300px;
    min-height: 1200px;
    min-width: 1024px;
    grid-auto-flow: row;
    grid-template-areas:
    "cover cover cover cover cover cover cover cover cover cover cover"
    "cover cover cover cover cover cover cover cover cover cover cover"
    "speaker speaker speaker arduino arduino arduino discord discord discord skateboard skateboard"
    "speaker speaker speaker arduino arduino arduino discord discord discord skateboard skateboard"
    "bujo2 bujo2 robot robot robot robot discord discord discord skateboard skateboard"
    "bujo2 bujo2 robot robot robot robot holder holder words skateboard skateboard"
    "opencv opencv robot robot robot robot holder holder words mushroom mushroom"
    "opencv opencv robot robot robot robot holder holder rings mushroom mushroom"
    "bujo bujo bujo bn bn bn holder holder rings mushroom mushroom"
    "bujo bujo bujo wordle wordle wordle holder holder cookies cookies cookies"
    "bujo bujo bujo wordle wordle wordle holder holder cookies cookies cookies"
    "boxes boxes boxes wordle wordle wordle bujo3 bujo3 bujo3 rps rps"
    "boxes boxes boxes wordle wordle wordle bujo3 bujo3 bujo3 rps rps"; 
}

@font-face {
  font-family: 'Subway';
  src: url('Subway-Black.ttf');
}

@font-face {
  font-family: 'Nunito';
  src: url('Nunito-VariableFont_wght.ttf');
}

h1 {
  margin-block-end: 0em;
  }

  .lightbox {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    height: 600px;
    width: 1000px;
    margin-top: -300px;
    margin-left: -500px;
    padding: 20px;
    background-color: white;
    z-index:2002;
    overflow: auto;
  }

  .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    height: 100%;
    align-items: center;
  }

  .textcolumn {
    text-align: left;
  }

.imgcolumn {
  text-align: center;
  max-height: 600px;
  max-width: 492.5px;
} 

.imgcolumn img {
  max-height: 600px;
  max-width: 100%;
}

  .blackout {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:2001;
    -moz-opacity: 0.8;
    opacity: 0.8;
    filter: alpha(opacity=80);
  }


  .robot { 
    grid-area: robot;
    background-image: url("images/robotvid.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    }
  
  .holder { 
    grid-area: holder; 
    background-image: url("images/holder.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    }
  
  .wordle { 
    grid-area: wordle;
    background-image: url("images/wordle.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    }
  
  .bujo { 
    grid-area: bujo; 
    background-image: url("images/bujo.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    }
  
  .discord { 
    grid-area: discord; 
    background-image: url("images/discord.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    }
  
  .boxes { 
    grid-area: boxes; 
    background-image: url("images/boxes.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    }
  
  .bn { 
    grid-area: bn; 
    background-image: url("images/bracelet.jpg");
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: top;
    background-size: cover;
    }
  
  .skateboard { 
    grid-area: skateboard; 
    background-image: url("images/skateboard.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    }
  
  .mushroom { 
    grid-area: mushroom;
    background-image: url("images/mushroom.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    }
  
  .bujo2 { 
    grid-area: bujo2;
    background-image: url("images/bujo2.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    }
  
  .bujo3 { 
    grid-area: bujo3;
    background-image: url("images/bujo3.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    }
  
  .cookies { 
    grid-area: cookies; 
    background-image: url("images/cookies.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    }
  
  .arduino { 
    grid-area: arduino; 
    background-image: url("images/arduino.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    }
  
  .rps { 
    grid-area: rps;
    background-image: url("images/rps.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    }
  
  .speaker { 
    grid-area: speaker; 
    background-image: url("images/speaker.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
  
  .opencv { 
    grid-area: opencv;
    background-image: url("images/opencv.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    }
  
  .words { 
    grid-area: words; 
    background-image: url("images/words.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    }
  
  .rings { 
    grid-area: rings; 
    background-image: url("images/rings.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    }

  .cover{
    grid-area: cover; 
    background-image: url("images/websitecover.jpg");
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
  }