body {
    background-color: black;
    margin: 0px;
    padding: 0px;
    height: 100vh;
    text-align: center;
    overflow-y: hidden;
    overflow-x: hidden;
}

@media (width <=1499px) {
    .narrow-hide {
        display: none !important;
    }

    .narrow-show {
        display: all !important;
    }
}

.narrow {

    width: 100vw;
    height: 100vh;
    margin: auto;
    background-color: rgb(8, 26, 0);
    color: rgb(170, 97, 1);
    font-size: 5vw;
    text-align: center;
    background-image: url("../images/zombie.svg");
    background-repeat: no-repeat;
    background-position-x: center;
    background-size: 100%;
}

.noflow {
    overflow: hidden;

    width: 100vw;
    height: 100vh;

    position: absolute;
    top: 0vh;
    left: 0vw;

    border: 1px solid transparent;
}

.front {
    display: flex;
    flex-direction: row;
    position: relative;
    text-align: center;
    height: 90%;
    min-width: 50vw;
    min-height: 90vh;
    max-height: 90vh;
    background-color: rgb(29, 0, 0);
}

.zeromargin {
    margin: 0px;
    padding: 0px;
}

.frontbgimg {
    text-align: center;
    margin: 0px;
    padding: 0px;
    height: 100vh;
    width: 100vw;
    max-width: 100vw;
    min-width: 50vw;
    min-height: 0;
    max-height: 100vh;
    background-color: rgb(0, 0, 0);
    position: absolute;
    top: 0vh;
    left: 0vw;
}

.fronthandsimg {
    margin: 0px;
    padding: 0px;
    height: 100vh;
    width: 100vw;
    max-width: 100vw;
    min-width: 50vw;
    min-height: 0;
    position: absolute;
    top: 0vh;
    left: 0vw;
    transform: scale(3, 3);
    transition: all 0.6s ease-in;
}

.fronthandsimg:hover {
    transform: scale(1, 1);
}

.frontlogo {
    width: 100vw;
    max-width: 100vw;
    min-width: 50vw;
    position: absolute;
    top: 5vh;
    left: 0vw;
    opacity: 1.0;

}

.frontlogo:hover {
    opacity: 1;
    animation-name: logoanim;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    transform-origin: center;
    /* transform: perspective(100px) rotateY(10deg) scale(1.5, 1.5);
    transform-origin: top; */
}

@keyframes logoanim {

    0% {
        transform: perspective(4px) rotateY(0deg) rotateX(0deg) scale(1, 1);
    }

    4% {
        transform: perspective(4px) rotateY(0.05deg) rotateX(0.05deg) scale(1.05, 1.05);
    }

    8% {
        transform: perspective(4px) rotateY(0.1deg) rotateX(0.1deg) scale(1.1, 1.1);
    }

    12% {
        transform: perspective(4px) rotateY(0.15deg) rotateX(0.15deg) scale(1.15, 1.15);
    }

    16% {
        transform: perspective(4px) rotateY(0.2deg) rotateX(0.2deg) scale(1.2, 1.2);
    }

    20% {
        transform: perspective(4px) rotateY(0.25deg) rotateX(0.25deg) scale(1.25, 1.25);
    }

    24% {
        transform: perspective(4px) rotateY(0.3deg) rotateX(0.3deg) scale(1.3, 1.3);
    }

    28% {
        transform: perspective(4px) rotateY(0.25deg) rotateX(0.35deg) scale(1.35, 1.35);
    }

    33% {
        transform: perspective(4px) rotateY(0.2deg) rotateX(0.4deg) scale(1.4, 1.4);
    }

    38% {
        transform: perspective(4px) rotateY(0.15deg) rotateX(0.45deg) scale(1.45, 1.42);
    }

    44% {
        transform: perspective(4px) rotateY(0.1deg) rotateX(0.48deg) scale(1.5, 1.43);
    }

    50% {
        transform: perspective(4px) rotateY(0deg) rotateX(0.51deg) scale(1.5, 1.45);
    }

    56% {
        transform: perspective(4px) rotateY(-0.1deg) rotateX(0.48deg) scale(1.5, 1.43);
    }

    62% {
        transform: perspective(4px) rotateY(-0.15deg) rotateX(0.45deg) scale(1.45, 1.42);
    }

    67% {
        transform: perspective(4px) rotateY(-0.2deg) rotateX(0.4deg) scale(1.4, 1.4);
    }

    72% {
        transform: perspective(4px) rotateY(-0.25deg) rotateX(0.35deg) scale(1.35, 1.35);
    }

    76% {
        transform: perspective(4px) rotateY(-0.3deg) rotateX(0.3deg) scale(1.3, 1.3);
    }

    80% {
        transform: perspective(4px) rotateY(-0.25deg) rotateX(0.25deg) scale(1.25, 1.25);
    }

    84% {
        transform: perspective(4px) rotateY(-0.2deg) rotateX(0.2deg) scale(1.2, 1.2);
    }

    88% {
        transform: perspective(4px) rotateY(-0.15deg) rotateX(0.15deg) scale(1.15, 1.15);
    }

    92% {
        transform: perspective(4px) rotateY(-0.1deg) rotateX(0.1deg) scale(1.1, 1.1);
    }

    96% {
        transform: perspective(4px) rotateY(-0.05deg) rotateX(0.05deg) scale(1.05, 1.05);
    }

    100% {
        transform: perspective(4px) rotateY(0deg) rotateX(0deg) scale(1, 1);
    }

}

.gameframe {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 100vw;
    background-color: rgba(226, 178, 75, 0);
}

.game {
    display: flex;
    height: 180px;
    background-color: rgba(0, 0, 0, 0);
}

.gamesquare {
    flex-basis: 180px;
    flex-direction: row;
    text-align: center;
    vertical-align: middle;
    background-image: url("../images/black180.svg");
    background-repeat: no-repeat;
    background-size: 0%;
    background-position: 50%, 50%;
    transition: all 0.15s ease-out;
    color: rgba(240, 248, 255, 0.39);
}

.gamesquare:hover {
    background-size: 100%;
    color: rgb(167, 214, 255);
    text-shadow: rgb(234, 255, 156) 0 0 5px;
}

.gamebg {
    position: relative;
    height: 940px;
    width: 1500px;

    background-color: black;
    background-image: url("../images/map.webp");
}

.infoHeadline {
    position: absolute;
    left: 1000px;
    top: 0px;
    height: 143px;
    width: 420px;
    cursor: pointer;
    background-image: url("../images/wood_s.png");
    background-repeat: no-repeat;
    background-size: 400px;
    background-position: right;
    padding-top: 25px;
    color: aliceblue;
    text-align: center;
    font-size: 30px;
    text-shadow: rgb(0, 0, 0) 5px 10px 10px, rgb(0, 0, 0) 5px 5px 5px, rgb(234, 255, 156) 0 0 5px, rgb(234, 255, 156) 0 0 8px;
    /* background-color: rgba(255, 255, 255, 0.068); */
}

.infoSquare {
    position: absolute;
    left: 1000px;
    top: 100px;
    height: 209px;
    width: 420px;
    cursor: pointer;
    background-image: url("../images/wood_m.png");
    background-repeat: no-repeat;
    background-size: 400px;
    background-position: right;
    padding-top: 80px;
    font-size: 20px;
    color: aliceblue;
    text-align: center;
    text-shadow: rgb(0, 0, 0) 5px 10px 10px, rgb(0, 0, 0) 5px 5px 5px;
}

.squarecontent {
    display: flex;
    flex-direction: row;
    position: relative;
    top: 0px;
    left: 1px;
    height: 180px;
    width: 180px;
    cursor: pointer;
}

.haszombie {
    position: relative;
    height: 100%;
    width: 100%;
    /* background-color: rgba(0, 255, 21, 0.151); */
    opacity: 0.0;
}

.hasplayer {
    position: relative;
    height: 100%;
    width: 100%;
    /* background-color: rgba(0, 174, 255, 0.151); */
    opacity: 0.0;
}

.foundkitten {
    position: relative;
    height: 100%;
    width: 100%;
    /* background-color: rgba(255, 0, 0, 0.151); */
    opacity: 0.0;
}

.buttonsquare {
    display: flex;
    position: absolute;
    left: 1000px;
    top: 580px;
    height: 330px;
    width: 420px;
    background-image: url("../images/wood_ctrl.png");
    background-repeat: no-repeat;
    background-size: 400px;
    background-position: right;
    padding-top: 80px;
}

.buttonrow {
    display: flex;
    flex-direction: row;
    position: relative;
    height: 105px;
    width: 320px;
    padding: 5px;
    font-size: 20px;
    color: aliceblue;
    text-align: center;

    /* background-color: rgba(49, 18, 0, 0.493); */
}

.buttons1 {
    left: 70px;
    top: 30px;
}

.buttons2 {
    left: -210px;
    top: 120px;
}

.buttoncontent {
    position: relative;
    height: 80px;
    width: 90px;
    z-index: 0;
    transition: all 0.1s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.616) 0px 0px 15px 2px;
}

.buttoncontent:hover {
    /* transform: perspective(2px) rotateY(0.0deg) rotateX(0.3deg) scale(0.9, 0.9);
    opacity: 1.1; 
    z-index: 0; */
    box-shadow: rgba(0, 0, 0, 0.616) 0px 15px 15px 10px;
    cursor: pointer;
}

/* specific button effects*/
#dice:hover {
    transform: perspective(2px) rotateY(-0.2deg) rotateX(0.25deg) scale(1, 1);
    z-index: 1;
}

#up:hover {
    transform: perspective(2px) rotateY(0.0deg) rotateX(0.25deg) scale(1.1, 1.1);
    z-index: 1;
}

#bat:hover {
    transform: perspective(2px) rotateY(0.2deg) rotateX(0.25deg) scale(1, 1);
    z-index: 1;
}

#left:hover {
    transform: perspective(2px) rotateY(-0.2deg) rotateX(-0.25deg) scale(1, 1);
    box-shadow: rgba(0, 0, 0, 0.616) 0px -10px 15px 10px;
    z-index: 1;
}

#down:hover {
    transform: perspective(2px) rotateY(0.0deg) rotateX(-0.25deg) scale(1.1, 1.1);
    box-shadow: rgba(0, 0, 0, 0.616) 0px -10px 15px 10px;
    z-index: 1;
}

#right:hover {
    transform: perspective(2px) rotateY(0.2deg) rotateX(-0.25deg) scale(1, 1);
    box-shadow: rgba(0, 0, 0, 0.616) 0px -10px 15px 10px;
    z-index: 1;
}


/*  TV  */

.tvsquare {
    display: flex;
    position: absolute;
    left: 990px;
    top: 330px;
    height: 280px;
    width: 420px;
    text-align: center;
    align-items: center;
    align-content: center;
    cursor: pointer;
}

.tvcontent {
    position: absolute;
    left: 20px;
    top: 20px;
    height: 250px;
    width: 330px;
    z-index: 0;
}

.tvoverlay {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 0px;
    width: 0px;
    z-index: 1;
}

.instructions {
    display: none;
    flex-direction: row;
    position: absolute;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding: 0px;
    text-align: center;
    z-index: 100;
    height: 940px;
    width: 1500px;
    background-color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

.instructionsContent {
    color: yellow;
    text-align: center;
    font-size: 24px;
    position: relative;
    margin: 0px;
    padding: 0px;
    height: 100%;
    text-align: center;
}

#instructionsZombie {
    background-color: rgba(0, 17, 0, 0.97);
    opacity: 0.8;
}

#instructionsText {
    flex-grow: 1;
}

#instructionsPlayer {
    background-color: rgba(20, 13, 0, 0.97);
    opacity: 0.8;
}

.instructionsTextBox {
    display: flex;
    flex-direction: column;
    position: relative;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding: 0px;
    text-align: center;
    z-index: 100;
    height: 940px;
    background-color: rgba(32, 0, 0, 0.548);
}

#instructionsTextBoxHeadline {
    padding-top: 20px;
    font-size: 48px;
    height: 2em;
    background-color: rgba(44, 0, 0, 0.774);
    text-shadow: rgb(0, 0, 0) 5px 0px 5px, rgb(0, 0, 0) 5px 5px 10px, rgb(0, 0, 0) 5px 10px 15px;
    color: rgb(240, 198, 60);

}

#instructionsTextBoxInfo {
    padding-top: 20px;
    color: rgb(255, 255, 187);
    text-shadow: rgb(0, 0, 0) 5px 5px 5px, rgb(0, 0, 0) 10px 5px 10px, rgb(0, 0, 0) 15px 5px 15px, rgb(255, 255, 255) 0px 0px 15px;
    /* text-shadow: rgb(0, 0, 0) 5px 10px 5px, rgb(0, 0, 0) 0px 0px 20px; */
    background-image:  linear-gradient(to bottom, rgba(44, 0, 0, 0.774), rgba(32, 0, 0, 0));
    overflow: hidden;
    flex-grow: 1;
}

/* adding logo to backgruond */
#instructionsTextBoxInfo::before {    
    content: "";
    background-image: url("../images/w_white.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
    top: 60px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 50;
    opacity: 0.05;
}


#instructionsTextBoxKitten {
    height: 100px;
    padding-left: 300px;
}


li{
    text-align: left;
}