body {
    background-color: white;
    display: flex;
    justify-content: center; /* Horizontally centers the grid on the page */
    align-items: center;    /* Vertically centers the grid on the page */
    height: 100vh;          /* Uses 100% of the viewport height */
    margin: 0;
    overflow: hidden;

    padding: 0;
    box-sizing: border-box;
    overscroll-behavior: none;
}


 ::-webkit-scrollbar {
    width: 0px;
}

/* Track */
::-webkit-scrollbar-track {
    opacity: 0; 
} */

strong {
    color: #ff14c4;
}

#mainContent {
    display: flex;
    margin-top: 2vh;
    width: 88vw;
    height: 85vh;
}
#navContainer {
    width: 88vw;
    height: 4vh;
    display: grid;
    outline: 2px black solid;

  
    position: absolute;
    top: 4.2vh;
}
.grid-container {
    width: 88vw;
    height: auto;

    min-height: 0; /* Crucial: overrides flexbox defaults so it doesn't force growth */
    flex-grow: 1; /* Takes up only the remaining space */
    overflow-y: auto;

    display: grid;
    gap: 1px;

    outline: 2px black solid;

    grid-template-columns: repeat(11, 8vw);
    grid-template-rows: repeat(35, 8vw);
    
    overflow-y: scroll;
    overflow-x: hidden;
    
}

.grid-container > * {
  /* outline: 1.5px solid black; */
  gap: 1px;
  overflow: hidden;
}


.cell {
  height: 100%;
  min-height: 1fr;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-clip: padding-box;
  
  
}
.cell img {
  width: 100%;
  height: 100%;
  z-index: 9;
}

#backtoMain {
    margin-top: -1vh;
    margin-left: 1vw;
}

.nav {
    display: flex;
    grid-area: 1 / 1 / 2 / 2;
    /* justify-content: space-around; */
    gap: 5vw;
    align-items: center;
    padding: 5px;
    margin-left: 5vw;


}

.nav a {
    display: inline-block;
    text-decoration: none;
    font-family: 'Daydream';
    font-size: 14px;
    color: black;
    display: flex;
    list-style-type: none;
    padding: 0;
}

.nav a:hover {
  scale: 1.2;
  color: #ff14c4;
}

.aboutLink:hover .lips { 
  background-color: #ffbc00; 
}

.link {
    background-color: transparent;
    z-index: 5;
    transition-duration: .5s;
}
/* .link:hover {
    transform: scale(1.2);
    z-index: 9;
    transition-duration: .5s;
} */

.emp {
    z-index: -3;
    aspect-ratio: 1/1;
    outline: 1.5px solid black;
    gap: 1px;
    overflow: hidden;
}
.cblock {
    z-index: 3;
    outline: 1.5px solid black;
}

.pink {
    background-color: #ff72cb;
}

.yellow {
    background-color: #ffed80;
}

.blue {
    background-color: #05c7ff;
}

.purple {
    background-color: #7373f4;
}

.green {
    background-color: #00f2d5;
}


.sky {
    background-color: #6ac4ce;
}

.black {
    background-color: black;
}

#square1 {
    grid-area: 3/2/4/3;
}

#square2 {
    grid-area: 1/8/3/10;
}

#square3 {
    grid-area: 1/11/2/12;;
}

#square4 {
    grid-area: 6/1/8/3;
}
#square5 {
    grid-area: 4/7/5/8;
}
#square6 {
    grid-area: 3/11/4/12;
}
#square7 {
    grid-area: 6/5/8/7;
}
#square8 {
    grid-area: 5/9/8/12;
}
#square9 {
    grid-area: 9/3/10/4;
}

/* HaND Imgs */

.introText {
    grid-area: 1/4/2/7;
    font-family: 'Courier New', Courier, monospace;
    outline: 1.5px solid black;
    
   
}
.introText p {
     color: black;
    padding: 25px;
    font-size: medium;
    
}

.headerText {
    grid-area: 1/3/2/4; 
    transform: .8; 
    
}
.headerText h1 {
    font-size: medium;
    color:#ffed80;
    -webkit-text-stroke: 4px black; 
    paint-order: stroke fill;
    text-shadow: 5px 5px 0px black;
}
.HaNDbeanie1Img {
    grid-area: 1/1/3/3;
    scale: 0.9;
    transform: rotate(-15deg);
}

.HaNDbeanie2Img {
    grid-area: 2/2/4/4;
    scale: 0.9;
    transform: rotate(15deg);
    z-index: 6;
}

.HaNDhatBImg {
    grid-area: 2/10/4/12;
    rotate: 10deg;
    transform: translate(0px, 15px);

}
.HaNDhatBgImg {
    grid-area: 2/5/4/7;
    background-image: url('subpages/merch/page/boltBg.svg');
    outline: 1.5px solid black;
    
}


.HaNDcropKImg {
    grid-area: 1/8/3/10;
    scale: 1.4;
    rotate: 15deg; 
    transform: translate(0px, 20px);

}

.HaNDText {
    grid-area: 4/7/5/8;
    font-family: 'Courier New', Courier, monospace;   
}
.HaNDText p {
    color: black;
    padding: 25px;
    font-size: medium;
    
    z-index: 7;
}

.HaNDImg {
    grid-area: 4/3/8/6;
    width: 3.5fr;
    scale: 1.1;
    transform: translate(23px, 5px);
    pointer-events: none;
}

.HaNDshirtModelImg {
    grid-area: 5/1/10/4;
    scale: 1.6;
    transform: translate(-5px, 10px);
    margin-bottom: 0;
}

.HaNDhoodieImg {
    grid-area: 5/6/9/9;
    transform: rotate(10deg);
    scale: .9;
    translate: 0px 20px;
}

.HaNDshirtWImg {
    grid-area: 5/9/8/12;
    scale: 1.2;
    rotate: -20deg;
    translate: 0px -75px;
}

/* Clowns */
.frogText {
    grid-area: 14/1/15/2;
    font-family: 'Courier New', Courier, monospace;
}
.frogText p {
     color: black;
    font-size: medium;
    z-index: 7;
   
}
.frogShirtY {
    grid-area: 11/1/14/4;
    background-image: url(subpages/merch/page/cloudbg.svg);   
}

.frogShirtY img{
    rotate: 9deg;
    scale: 1.1;
    translate: 0px 30px;
}
.frogShirtK {
grid-area: 13/3/16/6;
rotate: -7deg;
scale: 1.1;
translate: -10px 20px;
}
.frog {
    grid-area: 14/1/18/4;
    scale:.9;
    translate: 0px 55px;
}

.heart {
    grid-area: 9/5/11/9;
    scale: 1.22;
    rotate: 22deg;
    translate: -55px -10px;
}
.heartText {

    grid-area: 11/6/12/8;
    font-family: 'Courier New', Courier, monospace;
}
.heartText p {
    color: black;
    font-size: medium;
    z-index: 7;
  
}

.heartsShirtW {
    grid-area: 12/6/15/9;
    background-image: url(subpages/merch/page/wavebg.svg);
    outline: 1.5px black solid; 
}

.heartsShirtW img{
    rotate: 10deg;
    scale: 1.3;
    translate: -10px 60px;
}
.heartBucket {
    grid-area: 11/4/13/6;
    rotate: -20deg;
    scale: .9;
    translate: 55px -5px;
    z-index: 6;
}

.clownCropW {
    grid-area: 11/9/13/11;
    rotate: -12deg;
    scale:1.4;
    translate: 0px -10px;
}
.clownText {
    grid-area: 12/11/13/12;
    font-family: 'Courier New', Courier, monospace;
}
.clownText p {
    color: black;
    font-size: medium;
    z-index: 7;
}
.clownGirl {
    grid-area: 12/9/16/12;
    rotate: 12deg;
    scale: .99;
    translate: 25px 30px;
}

.clownGirlShirtWModel {
    grid-area: 19/9/21/11;
    scale: 2.21;
    translate: -55px -20px;
    z-index: 6;
}
.clownModelText {
    grid-area: 20/11/21/12;
    font-family: 'Courier New', Courier, monospace;
}
.clownModelText p {
    color: black;
    font-size: medium;
    z-index: 7;
}
.seeingClownText {
    grid-area: 15/6/16/8;
    font-family: 'Courier New', Courier, monospace;
    z-index: 7;
    background-color: white;
}

.seeingClownHoodieText {
    grid-area: 21/7/22/8;
    font-family: 'Courier New', Courier, monospace;
}
.seeingClownHoodieText p {
    color: black;
    font-size: medium;
    z-index: 7;
}

.seeingClownText p {
    color: black;
    font-size: medium;
    z-index: 7;

}

.seeingClownCropText {
    grid-area: 18/11/19/12;
    font-family: 'Courier New', Courier, monospace;
}
.seeingClownCropText p {
    color: black;
    font-size: medium;
    z-index: 7;
}
.allSeeingCropWBg {
    grid-area: 16/10/18/12;
    background-image: url(subpages/merch/page/flowerbg.svg);
    outline: 1.5px black solid;
}

.allSeeingCropWBg img {
    scale: 1.2;
    rotate: 9deg;
}

.allSeeingHoodieFold {
    grid-area: 17/6/18/7;
    scale:2.3;
    rotate:-15deg;
    translate: -15px 0px;
}

.allSeeingHoodieK {
    grid-area: 19/7/21/8;
    scale:2.3;
    rotate:10deg;
    translate: 25px -20px;
}

.allSeeingCG {
    grid-area: 16/8/18/9;
    scale:3.2;
    rotate:-5deg;
    translate: -10px -60px;
}

.darkMagickCropKModel {
    grid-area: 19/3/22/6;
    outline: 2px black solid;
    

}

.darkMagickCropKModel img {
    width: 100%;
    height: 25vw;
    object-fit: cover;
}
.darkMagickText {
    grid-area: 18/4/19/5;
    font-family: 'Courier New', Courier, monospace;
}
.darkMagickText p {
    color: black;
    font-size: medium;
    z-index: 7;
}
.darkMagickShirtK {
    grid-area: 18/1/21/4;
    rotate: -10deg;
    scale:1.15;
    translate: -25px 60px;
}

.shroomHead {
   grid-area: 24/2/26/3;
   scale: 2.8;
   rotate: -5deg;
   translate: 40px -105px; 
}

.shroomHeadHoodieModel {
   grid-area: 25/4/28/5;
   scale: 4.5;
   translate: 10px 43px;
   z-index: 6; 
}

.shroomHeadBaseball {
   grid-area: 28/2/29/3;
   scale: 2.7;
   rotate: 9deg;
   translate: -10px -115px; 
}

.shroomHeadCropK {
    grid-area: 27/6/28/7;
    scale: 2.6;
    rotate: 9deg;
    translate: 55px -20px;
    z-index: 6;
}

.shroomHeadShirtW {
    grid-area: 23/5/26/8;
    rotate: -10deg;
    scale: 1.2;
    translate: 0px -10px;
}

.shroomCropKModel {
    grid-area: 24/9/25/10;
    z-index: 6;
    scale: 4.4;
    translate: 80px -70px;
}

.shroomBucket {
    grid-area: 22/8/24/10;
    scale: .9;
    rotate: 8deg;

}
.shroomHoodie {
    grid-area: 25/11/26/12;
    scale: 1.9;
    rotate: 10deg;
    translate: -35px 60px;
}
.shroomCropW {
    grid-area: 27/9/29/11;
    rotate: -7deg;
    scale: 1.5;
}
.shroomText {
    grid-area: 26/9/27/10;
    font-family: 'Courier New', Courier, monospace;
 
}
.shroomText p {
    color: black;
    font-size: medium;
    z-index: 8;
}

.shroomHeadText {    
    grid-area: 28/6/29/8;
    font-family: 'Courier New', Courier, monospace;
    outline: 1.5px solid black;
   
}
.shroomHeadText p {
    color: black;
    font-size: medium;
    z-index: 8;
  
}

.whaleBg {
    grid-area: 30/1/34/8;
}

.headSpaceModel {
    grid-area: 31/7/35/10;
    translate: -30px -102px;
    scale: 1.9;
}

.headSpace {
    grid-area: 31/4/35/12;
    z-index: 7;

   
}
.headSpace img {
    translate: 0px 20px;
    scale: 1.1;
}
.headSpaceText {
    grid-area: 30/9/31/10;
    font-family: 'Courier New', Courier, monospace;
    outline: 1.3px solid black;
   
}
.headSpaceText p {
    color: black;
    font-size: medium;
    z-index: 8;
  
}
.headSpaceHoodie {
    grid-area: 31/4/32/5;
    scale: 2.7;
    rotate: -9deg;
    translate: -10px -55px;  
}
.headSpaceTote {
    grid-area: 33/3/35/5;
    rotate: 15deg;
    scale: 1.4; 
    translate: 10px 20px; 
    z-index: 8;
}

.headSpaceShirtW {
    grid-area: 31/5/34/8;
    rotate: 5deg;
    translate: 30px 65px;  
}

.headSpaceSCropW {
    grid-area: 30/1/32/3;
    rotate: 10deg;
    z-index: 6;
    translate: 25px -15px; 
}
.headSpaceSCropK {
     grid-area: 29/6/31/8;
    rotate: -5deg;
    z-index: 6;
    translate: -60px 0px;  
}

#square10 {
    grid-area: 9/5/11/7;
}

#square11 {
    grid-area: 9/11/10/12;
}

#square12 {
    grid-area: 11/9/13/11;
}

#square13 {
    grid-area: 16/6/17/7;
}
#square14 {
    grid-area: 18/3/19/4;
}

#square15 {
    grid-area: 17/7/19/9;
}

#square16 {
    grid-area: 19/9/21/11;
}

#square17 {
    grid-area: 22/8/24/10;
    background-image: url(subpages/merch/page/wavyCheckGPBg.svg);
}
#square18 {
    grid-area: 23/5/26/8;
}
#square19 {
    grid-area: 26/1/29/4;
}
#square20 {
    grid-area: 27/9/29/11;
}
#square21 {
    grid-area: 30/2/34/6;
}

#square22 {
    grid-area: 31/8/35/11;
}

.blank1 {grid-area: 1/1/2/2;}
.blank2 {grid-area: 1/2/2/3;}
.blank3 {grid-area: 2/1/3/2}
.blank4 {grid-area: 2/2/3/3}

.blank5 {grid-area: 2/3/3/4;}
.blank6 {grid-area: 2/4/3/5;}
.blank7 {grid-area: 2/5/3/6;}
.blank8 {grid-area: 2/6/3/7;}
.blank9 {grid-area: 3/3/4/4}
.blank10 {grid-area: 3/4/4/5}
.blank11 {grid-area: 3/5/4/6}
.blank12 {grid-area: 3/6/4/7}

.blank13 {grid-area: 5/1/6/2}
.blank14 {grid-area: 5/2/6/3}

.blank21 {grid-area: 2/10/3/11}
.blank22 {grid-area: 2/11/3/12}
.blank32 {grid-area: 3/10/4/11}
.blank33 {grid-area: 3/11/4/12}

.blank24 {grid-area: 3/2/4/3}
.blank34 {grid-area: 4/1/5/2}
.blank35 {grid-area: 4/2/5/3}


.blank36 {grid-area: 4/3/5/4}
.blank37 {grid-area: 4/4/5/5}
.blank38 {grid-area: 4/5/5/6}
.blank47 {grid-area: 5/3/6/4}
.blank48 {grid-area: 5/4/6/5}
.blank49 {grid-area: 5/5/6/6}

.blank50 {grid-area: 5/6/6/7}
.blank51 {grid-area: 5/7/6/8}
.blank52 {grid-area: 5/8/6/9}
.blank61 {grid-area: 6/7/7/8}
.blank62 {grid-area: 6/8/7/9}
.blank72 {grid-area: 7/7/8/8}
.blank73 {grid-area: 7/8/8/9}
.blank83 {grid-area: 8/6/9/7}
.blank84 {grid-area: 8/7/9/8}
.blank85 {grid-area: 8/8/9/9}

.blank78 {grid-area: 7/1/8/2}
.blank79 {grid-area: 7/2/8/3}
.blank80 {grid-area: 7/3/8/4}
.blank81 {grid-area: 7/4/8/5}

.blank89 {grid-area: 8/1/9/2}
.blank90 {grid-area: 8/2/9/3}
.blank91 {grid-area: 8/3/9/4}
.blank92 {grid-area: 8/4/9/5}

.blank100 {grid-area: 9/1/10/2}
.blank101 {grid-area: 9/2/10/3}
.blank102 {grid-area: 9/3/10/4}
.blank103 {grid-area: 9/4/10/5}

.blank106 {grid-area: 9/7/10/8}
.blank107 {grid-area: 9/9/10/9}
.blank117 {grid-area: 10/7/11/8}
.blank118 {grid-area: 10/8/11/9}

.blank125 {grid-area: 11/4/12/5}
.blank126 {grid-area: 11/5/12/6}
.blank138 {grid-area: 12/4/13/5}
.blank139 {grid-area: 12/5/13/6}

.blank132 {grid-area: 12/11/13/12}

.blank141 {grid-area: 13/9/14/10}
.blank142 {grid-area: 13/10/14/11}
.blank143 {grid-area: 13/11/14/12}



.blank152 {grid-area: 14/9/15/10}
.blank153 {grid-area: 14/10/15/11}
.blank154 {grid-area: 14/11/15/12}

.blank155 {grid-area: 14/1/15/2}
.blank156 {grid-area: 14/2/15/3}
.blank166 {grid-area: 15/1/16/2}
.blank167 {grid-area: 15/2/16/3}
.blank177 {grid-area: 16/1/17/2}
.blank178 {grid-area: 16/2/17/3}
.blank179 {grid-area: 16/3/17/4}
.blank188 {grid-area: 17/1/18/2}
.blank189 {grid-area: 17/2/18/3}
.blank190 {grid-area: 17/3/18/4}


.blank165 {grid-area: 15/9/16/10}

.blank136 {grid-area: 13/4/14/5}
.blank137 {grid-area: 13/5/14/6}

.blank140 {grid-area: 14/5/15/6}

.blank146 {grid-area: 14/3/15/4}
.blank148 {grid-area: 14/5/15/6}

.blank146 {grid-area: 15/3/16/4}
.blank148 {grid-area: 15/5/16/6}
.blank149 {grid-area: 15/6/16/7}


.blank374 {grid-area: 30/1/31/2}
.blank373 {grid-area: 31/1/32/2}
.blank372 {grid-area: 32/1/33/2}
.blank371 {grid-area: 33/1/34/2}

.blank370 {grid-area: 34/4/35/5}
.blank369 {grid-area: 34/5/35/6}
.blank368 {grid-area: 34/6/35/7}
.blank367 {grid-area: 34/7/35/8}


.blank365 {grid-area: 32/7/33/8}
.blank364 {grid-area: 32/6/33/7}
.blank363 {grid-area: 31/7/32/8}
.blank362 {grid-area: 31/6/32/7}
.blank361 {grid-area: 30/7/31/8}
.blank360 {grid-area: 30/6/31/7}
.blank359 {grid-area: 29/7/30/8}
.blank358 {grid-area: 29/6/30/7}