.jersey-10-regular {
  font-family: "Jersey 10", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.jacquard-12-regular {
  font-family: "Jacquard 12", system-ui;
  font-weight: 400;
  font-style: normal;
}

* {
    background: transparent no-repeat center center;
    font-family: "Jersey 10", sans-serif;
    margin:0;
    padding:0;
    border: none;
    --tcbox: #0C071E;
    --text: #F0DFBC;
    --red: #c92a2a;
    --purp: #5f3dc4;
    --gol: #fab005;
    --blue: #3c55c5;
    --gre: #759b6f;
}

p   {
    max-height: 100%;
    overflow: hidden scroll;
}
p::-webkit-scrollbar {
    width: 100%;
}
/* got this from https://www.youtube.com/watch?v=EmlWgdrE9Jw&time_continue=10&source_ve_path=MjM4NTE&embeds_referring_euri=https%3A%2F%2Fwww.bing.com%2F&embeds_referring_origin=https%3A%2F%2Fwww.bing.com */

#muteBtn {
    font-size: 24px;
    height: 10vh;
    width: 10vh;
    position: fixed;   /* or absolute */
    top: 20px;
    right: 20px;
    z-index: 9999;     /* 👈 forces it above everything */
    pointer-events: auto;
}

button {
    cursor: pointer; /*found this while searching in w3bschool*/
}

.MGrid {
    background-image: url(../img/menu.png) ;
    background-size: cover;
    min-height: 100vh;
    grid-template: repeat(8,1fr )/ repeat(6,1fr);
    .overlay {
        position: absolute;
        background-color: rgba(0,0,0,0.3);
        height: 100vh;
        width: 210vh;
    }
    .title {
        font-family: "Jacquard 12", system-ui;
        background-image: url(../img/Tittle_sign.png);
        grid-area: 1/ 1/ 5/ 4;
        transform: translate(50px, -45px);
        width: 88%;
        font-size: 125px;
        text-align: center;
        align-content: center;
    } 
    .gm1, .gm2, .gm3, .gm4 {
        color: aliceblue;
        background-image: url(../img/sign.png);
        transform:translate(75px, 19px) ;
        width: 80%;
        height: 100%;
        align-content: center;
        font-size: 24px;
    }
    .gm1 {
        grid-area: 4/1/4/4;
    }
    .gm2 {
        grid-area: 5/1/5/4;
    }
    .gm3 {
        grid-area: 6/1/6/4;
    }
    .gm4 {
        grid-area: 7/1/7/4;
    }
}

.menu, .set, .save, .load {
    min-width:32px;
    min-height:32px;
}

.menu {
    background-image:url(../img/Menu\ Button.png); 
}
.set {
    background-image: url(../img/Settings\ Button.png);
}
.save {
    background-image: url(../img/Save\ button.png);
}
.load {
    background-image: url(../img/Load\ Button.png);
}

.GGrid3 {
    min-height: 100vh;
    grid-template: repeat(8,1fr )/ repeat(8,1fr);
    .menu {
        grid-area: 1/ 1;
        transform: translate(40px, 22px);
    }
    .set {
        grid-area: 1/1;
        transform: translate(42px, 55px);
    }
    .save {
        grid-area: 2/1;
        transform: translateX(40px);
    }
    .load {
        grid-area: 2/1;
        transform: translate(38px, 50px);
    }
    .shadet {
        background-color: var(--tcbox);
        opacity: 50%;
        grid-area: 1/ 1/ 3/ 9;
    }
    .backbox {
        background-color: var(--tcbox);
        opacity: 50%;
        grid-area: 1/ 3/ 3/ 7;
        width: 150%;
        height: 117%;
        border-radius: 0 0 20px 20px;
        transform: translateX(-16.5%);
    }
    .plot {
        background-color: var(--tcbox);
        grid-area: 1 / 3 / 3 / 7;
        height: 130%;
        width: 130%;
        transform: translate(-11%, 20px);
        border-radius: 20px;

    }
    p {
        grid-area: 1 / 3 / 3 / 7;
        transform: translateY(26%);
        color: aliceblue;
        font-size: 26px;
    }
    .cbox {
        background-color: var(--tcbox);
        grid-area: -2 / 2 / -2 / 8 ;
        transform: translateY(-45%);
        border-radius: 20px;
    }
    .gc1, .gc2, .gc3 {
        background-color: grey;
        transform: translate(35px, -26px);
        height: 60%;
        width: 80%;
        font-size: 24px;
    }
    .gc1 {
        grid-area: -2 / 2 / -2 /4;
        
    }
    .gc2 {
        grid-area: -2 / 4 / -2 /6;
    }
    .gc3 {
        grid-area: -2 / 6 / -2 /8;
    }
    .scb {
        background-color: var(--tcbox);
        opacity: 50%;
        grid-area: -1 / 2 / -2 / 8 ; 
        width: 110%;
        height: 125%;
        transform: translate(-4.5%, -19%);
        border-radius: 20px 20px 0 0;
    }
    .shadeb {
        background-color: var(--tcbox);
        opacity: 50%;
        grid-area: -2 /1 /-2 /9 ;
    }
}

.GGrid2 {
    min-height: 100vh;
    grid-template: repeat(8,1fr )/ repeat(8,1fr);
    .menu {
        grid-area: 1/ 1;
        transform: translate(40px, 22px);
    }
    .set {
        grid-area: 1/1;
        transform: translate(42px, 55px);
    }
    .save {
        grid-area: 2/1;
        transform: translateX(40px);
    }
    .load {
        grid-area: 2/1;
        transform: translate(38px, 50px);
    }
    .shadet {
        background-color: var(--tcbox);
        opacity: 50%;
        grid-area: 1/ 1/ 3/ 9;
    }
    .backbox {
        background-color: var(--tcbox);
        opacity: 50%;
        grid-area: 1/ 3/ 3/ 7;
        width: 150%;
        height: 117%;
        border-radius: 0 0 20px 20px;
        transform: translateX(-16.5%);
    }
    .plot {
        background-color: var(--tcbox);
        grid-area: 1 / 3 / 3 / 7;
        height: 130%;
        width: 130%;
        transform: translate(-11%, 20px);
        border-radius: 20px;

    }
    p {
        height: 100%;
        grid-area: 1 / 3 / 3 / 7;
        transform: translateY(26%);
        color: aliceblue;
        font-size: 26px;
    }
    .cbox {
        background-color: var(--tcbox);
        grid-area: -2 / 2 / -2 / 8 ;
        transform: translateY(-45%);
        border-radius: 20px;
    }
    .gc1, .gc2 {
        background-color: grey;
        transform: translate(50px, -26px);
        height: 60%;
        width: 80%;
        font-size: 20px;
    }
    .gc1 {
        grid-area: -2 / 2 / -2 /5;
    }
    .gc2 {
        grid-area: -2 / 5 / -2 /8;
    }
    .scb {
        background-color: var(--tcbox);
        opacity: 50%;
        grid-area: -1 / 2 / -2 / 8 ; 
        width: 110%;
        height: 125%;
        transform: translate(-4.5%, -19%);
        border-radius: 20px 20px 0 0;
    }
    .shadeb {
        background-color: var(--tcbox);
        opacity: 50%;
        grid-area: -2 /1 /-2 /9 ;
    }
}

.GGrid {
    min-height: 100vh;
    grid-template: repeat(8,1fr )/ repeat(8,1fr);
    .menu {
        grid-area: 1/ 1;
        transform: translate(40px, 22px);
    }
    .set {
        grid-area: 1/1;
        transform: translate(42px, 55px);
    }
    .save {
        grid-area: 2/1;
        transform: translateX(40px);
    }
    .load {
        grid-area: 2/1;
        transform: translate(38px, 50px);
    }
    .shadet {
        background-color: var(--tcbox);
        opacity: 50%;
        grid-area: 1/ 1/ 3/ 9;
    }
    .backbox {
        background-color: var(--tcbox);
        opacity: 50%;
        grid-area: 1/ 3/ 3/ 7;
        width: 150%;
        height: 117%;
        border-radius: 0 0 20px 20px;
        transform: translateX(-16.5%);
    }
    .plot {
        background-color: var(--tcbox);
        grid-area: 1 / 3 / 3 / 7;
        height: 130%;
        width: 130%;
        transform: translate(-11%, 20px);
        border-radius: 20px;

    }
    p {
        height: 100%;
        grid-area: 1 / 3 / 3 / 7;
        transform: translateY(26%);
        color: aliceblue;
        font-size: 26px;
    }
    .cbox {
        background-color: var(--tcbox);
        grid-area: -2 / 2 / -2 / 8 ;
        transform: translateY(-45%);
        border-radius: 20px;
    }
    .gc1{
        background-color: grey;
        transform: translate(99px, -26px);
        height: 60%;
        width: 80%;
        font-size: 20px;
        grid-area: -2 / 2 / -2 /8;
    }
    .scb {
        background-color: var(--tcbox);
        opacity: 50%;
        grid-area: -1 / 2 / -2 / 8 ; 
        width: 110%;
        height: 125%;
        transform: translate(-4.5%, -19%);
        border-radius: 20px 20px 0 0;
    }
    .shadeb {
        background-color: var(--tcbox);
        opacity: 50%;
        grid-area: -2 /1 /-2 /9 ;
    }
}

.forest, .town, .tower, .insidetower, .tavern{
    background-size:cover;
}

.forest {
    background-color: #1a221b;
    background-image: url(../img/forest.png);
    .troll {
        object-fit: contain;
        background-image: url(../img/troll.png);
        grid-area: 3/4/-1/6;
        transform: translateY(15%);
    }
}

.town {
    background-image: url(../img/town.png);
    .gos-wife {
        object-fit: contain;
        background-image: url(../img/gossip-wife.png);
        grid-area: 3/4/-1/6;
        transform: translateY(15%);
    }
}

.tower {
    background-image: url(../img/tower.png);
    .horse {
        background-size: contain;
        background-image: url(../img/donkey.png);
        grid-area: 4/6/-1/-1;
    }
}

.insidetower {
    background-image: url(../img/inside-tower.png);
    .knight {
        background-size: contain;
        background-image: url(../img/knight.png);
        grid-area: 2/3/-1/7;
        transform: translateY(15%);
    }
    .princess {
        background-size: contain;
        background-image: url(../img/princess.png);
        grid-area: 3/6/-1/-1;
        transform: translateY(15%);
    }
}

.tavern {
    background-image: url(../img/tavern.png);
    .bartender {
        object-fit: contain;
        background-image: url(../img/bartend.png);
        grid-area: 3/4/7/6;
        transform: translateY(7%);
    }
}

.end {
    background-color: var(--tcbox);
    grid-template:repeat(3,1fr)/ repeat(3,1fr);
    color:var(--text);
    h1 {
        background-color: var(--tcbox);
        grid-area: 1/2;
        transform: translateY(180%);
        height: 20%;
        text-align: center;
    }
    h2 {
        background-color: var(--tcbox);
        grid-area: 2/1/2/-1;
        text-align: center;
        max-width: 50%;
        transform: translateX(50%);
    }
    em {
        background-color: var(--tcbox);
        font-weight: 700;
    }
    span {
        background-color: var(--tcbox);
    }
    button {
        background-color: var(--tcbox);
        color: var(--blue);
        grid-area: -1/2 / -1/2 ;
        transform: translateY(-420%);
        font-size: 24px;
    }
}

.yel {
    background-color: var(--tcbox);
    grid-template: repeat(3,1fr)/ repeat(3,1fr);
    h1 {
        background-color: var(--tcbox);
        font-size: 40px;
        grid-area: 1/2;
        transform: translateY(40%);
    }
    button {
        background-color: var(--tcbox);
        color: var(--blue);
        grid-area: -2/2;
        font-size: 25px;
        transform: translateY(-190%);
    }
}

.slide {
    position: fixed;
    z-index: 1;

    width: 100%;
    height: 100%;
             
    top: 0;
    left: 0;
 
    color: white;
}
 
.slide button {
    /* prevents vertical stretching */  
    align-self: start;  
}

.why {
    background-color: var(--tcbox);
    grid-template: repeat(3,1fr)/ repeat(3,1fr);
    h1 {
        background-color: var(--tcbox);
        grid-area: 2/2;
        text-align: center;
        font-size: 60px;
    }
    button {
        background-color: var(--tcbox);
        color: var(--text);
        grid-area: 3/2;
        font-size: 30px;
    }
}