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(20, 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;
    font-family: 'Courier New', Courier, monospace;
    z-index: 10;
}
.cell p {
    color: black;
    padding: 40px;
    font-size: medium;
    transform: scale(1.1);
}
.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;
}

.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;
}


.blue {
    background-color: #00e4ef;
}

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


.black {
    background-color: black;
}

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

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

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

#square4 {
    grid-area: 4/10/5/11;
}
#square5 {
    grid-area: 6/9/9/12;
}
#square6 {
    grid-area: 9/5/10/6;
}
#square7 {
    grid-area: 10/7/11/8;
}
#square8 {
    grid-area: 11/4/12/6;
}
#square9 {
    grid-area: 13/1/14/2;
}
#square10 {
    grid-area: 13/6/15/11;
}
#square11 {
    grid-area: 16/2/18/4;
}
#square12 {
    grid-area: 17/4/20/7;
}
#square13 {
    grid-area: 17/11/18/12;
}
#square14 {
    grid-area: 19/10/20/11;
}
#square15 {
    grid-area: 20/9/21/10;
}
#square16 {
    grid-area: 9/8/10/11;
}

/* Deck Imgs */

.introText {
    grid-area: 1/8/3/10;
    font-family: 'Courier New', Courier, monospace;
    outline: 1.5px solid black;
    z-index: 10;
}
.introText p {
    color: black;
    font-size: medium;
    transform: scale(1.2);
}

.headerText {
    grid-area: 1/5/2/6; 
    outline: 1.5px solid black;
    
}
.headerText h1 {
    font-size: medium;
    color:#ff72cb;
    -webkit-text-stroke: 4px black; 
    paint-order: stroke fill;
    text-shadow: 5px 5px 0px black;
}
.deckBundle {
    grid-area: 3/4/7/9;
    z-index: 15;
    
}
.deckBundle img {
    scale: 1.25; 
}

.wildWoman {
    grid-area: 1/1/3/3;
    
}
.wildWoman img {
    scale:.6;
}
.witchHand {
    grid-area: 3/1/8/4;
    translate: -20px 45px;  
}

.bears {
    grid-area: 2/10/5/12; 
    scale: 1.25;  
    z-index: 10; 
    translate: -30px 38px;
}

.threeCardHand {
    grid-area: 5/8/9/12; 
    scale: .9;
    z-index: 15;
    translate: 0px 28px;   
}

.witch {
    grid-area: 7/4/10/6;
    scale: 1.27;
    translate: 25px -15px;
    z-index: 15;
}
.witch img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.witchHand2 {
    grid-area: 13/1/18/6;
    scale: .95;
    translate: 0px 15px;
}

.witchHand2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.intuition {
    grid-area: 10/6/12/8;
    scale: .9;
}
.intuition img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.goddess {
    grid-area: 18/1/21/4;
    translate: 0px -25px;
}
.goddess img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.confrontation {
    grid-area: 10/9/13/12;
    translate: 0px 25px;
}
.caution {
    grid-area: 17/10/20/12;
    translate: 5px -17px;
    scale: .8;
}
.deckPile {
    grid-area: 15/7/19/11;
    translate: -60px 0px;
    scale: .95;
}
.witchCards {
    grid-area: 9/1/12/4;
    
}
.witchCards img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wildText { 
    grid-area: 9/8/10/11; 
}
.witchText { 
    grid-area: 11/4/12/6; 
}
.deckStory {
    grid-area: 13/6/15/10;
    translate: 4vw 0px;

}
.deckStory p {
    color: white;
    
}
.deckMaking {
    grid-area: 17/4/20/7;
}
.deckLink {
    grid-area: 8/6/9/7;
    outline: 1.5px solid black;    
}
.deckLink h2 {
    font-size: medium;
    color:#00e4ef;
    -webkit-text-stroke: 4px black; 
    paint-order: stroke fill;
    text-shadow: 5px 5px 0px black;
    transition-duration: .5s;
}
.deckLink h2:hover {
    scale: 1.2;
    transition-duration: .5s;
}

.deckLink2 {
    grid-area: 20/7/21/8; 
    outline: 1.5px solid black;   
}
.deckLink2 h2 {
    font-size: medium;
    color:#ff72cb;
    -webkit-text-stroke: 4px black; 
    paint-order: stroke fill;
    text-shadow: 5px 5px 0px black;
    transition-duration: .5s;
}
.deckLink2 h2:hover {
    scale: 1.2;
    transition-duration: .5s;
}



.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: 3/1/4/2;}
.blank6 {grid-area: 3/2/4/3;}

.blank7 {grid-area: 4/1/5/2;}
.blank8 {grid-area: 4/2/5/3;}

.blank9 {grid-area: 4/3/5/4;}
.blank10 {grid-area: 4/3/5/4;}

.blank11 {grid-area: 2/10/3/11;}
.blank12 {grid-area: 2/11/3/12;}

.blank13 {grid-area: 5/11/6/12;}
.blank14 {grid-area: 5/10/6/11;}
.blank15 {grid-area: 5/9/6/10;}

.blank16 {grid-area: 5/3/6/4;}
.blank17 {grid-area: 6/3/7/4;}
.blank18 {grid-area: 7/3/8/4;}

.blank19 {grid-area: 7/4/8/5;}
.blank20 {grid-area: 7/5/8/6;}
.blank20 {grid-area: 8/4/9/5;}
.blank21 {grid-area: 8/5/9/6;}

.blank22 {grid-area: 7/8/8/9;}
.blank23 {grid-area: 8/8/9/9;}

.blank24 {grid-area: 10/6/11/7;}
.blank25 {grid-area: 11/6/12/7;}
.blank26 {grid-area: 11/7/12/8;}

.blank27 {grid-area: 10/9/11/10;}
.blank28 {grid-area: 10/10/11/11;}
.blank29 {grid-area: 10/11/11/12;}

.blank30 {grid-area: 11/9/12/10;}
.blank31 {grid-area: 11/10/12/11;
        background-color: #ff72cb;}
.blank32 {grid-area: 11/11/12/12;}

.blank33 {grid-area: 12/9/13/10;}
.blank34 {grid-area: 12/10/13/11;}
.blank35 {grid-area: 12/11/13/12;}

.blank36 {grid-area: 13/2/14/3;}
.blank37 {grid-area: 13/3/14/4;}
.blank38 {grid-area: 13/4/14/5;}
.blank39 {grid-area: 13/5/14/6;}

.blank40 {grid-area: 14/1/15/2;}
.blank41 {grid-area: 14/2/15/3;}
.blank42 {grid-area: 14/3/15/4;}
.blank43 {grid-area: 14/4/15/5;}
.blank44 {grid-area: 14/5/15/6;}

.blank40 {grid-area: 15/1/16/2;}
.blank41 {grid-area: 15/2/16/3;}
.blank42 {grid-area: 15/3/16/4;}
.blank43 {grid-area: 15/4/16/5;}
.blank44 {grid-area: 15/5/16/6;}

.blank45 {grid-area: 16/1/17/2;}
.blank46 {grid-area: 16/4/17/5;}
.blank47 {grid-area: 16/5/17/6;}

.blank48 {grid-area: 17/1/18/2;}
.blank49 {grid-area: 17/4/18/5;}

.blank48 {grid-area: 18/1/19/2;}
.blank49 {grid-area: 18/2/19/3;}
.blank49 {grid-area: 18/3/19/4;}

.blank50 {grid-area: 19/1/20/2;}
.blank51 {grid-area: 19/2/20/3;}
.blank52 {grid-area: 19/3/20/4;}

.blank53 {grid-area: 20/1/21/2;}
.blank54 {grid-area: 20/2/21/3;}
.blank55 {grid-area: 20/3/21/4;}


.blank56 {grid-area: 15/10/16/11;}
.blank57 {grid-area: 15/9/16/10;}
.blank58 {grid-area: 15/8/16/9;}
.blank59 {grid-area: 15/7/16/8;}

.blank60 {grid-area: 16/10/17/11;}
.blank61 {grid-area: 16/9/17/10;}
.blank62 {grid-area: 16/8/17/9;}
.blank63 {grid-area: 16/7/17/8;}

.blank64 {grid-area: 17/10/18/11;}
.blank65 {grid-area: 17/9/18/10;}
.blank66 {grid-area: 17/8/18/9;}
.blank67 {grid-area: 17/7/18/8;}

.blank68 {grid-area: 18/10/19/11;}
.blank69 {grid-area: 18/9/19/10;}
.blank70 {grid-area: 18/8/19/9;}
.blank71 {grid-area: 18/7/19/8;}

.blank72 {grid-area: 18/11/19/12;}
.blank73 {grid-area: 19/11/20/12;}