@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Montagu+Slab:opsz@16..144&family=Montserrat:wght@300;400;600;700;800;900&family=Oi&family=Poppins:wght@100;300;500;600;800;900&display=swap');


/*BIGGER DESKTOPS*/
@media only screen and (min-width: 1400px) {
    .mobile {
        display: none;
    }
    body{
        background-color:#F0F0F0;
    }
    .background{
        position: fixed;
        top: 0;
        left: 0;
        width: 110%;
        z-index: -1;
    }
    .background img {
        width: 100%;
        height:101vh;
        margin-left: -100px;
    }
    .textcontainer{
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
        margin-top: 20vh;
        margin-left: 6vw;
    }
    .textcontainer h1 {
        font-family: 'Major Mono Display', monospace;
        color:#C51C39;
        font-size: 5em;
    }
    #t2{
        margin-top: -15px;
    }
    .textcontainer h2{
        font-family: 'Major Mono Display', monospace;
        color:white;
        font-size: 2.1em;
        margin-top: -10px;
        margin-left: 1vw;
    }
    .byprego{
        margin-top: 28px;
        display: flex;
        justify-content: center;
        align-items: center;  
        margin-left: 7vw;  
    }
    .logo{
        width:13%;
    }
    .wrappers {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-family: "Poppins", monospace;
        color:white;
        margin-top: 30px;
        font-weight: 200;
        font-size: 1.2em;
        margin-left: 7vw;
    }
    .first-line {
        white-space: nowrap;
    }
    .highlight{
        color:#C51C39;font-family: "Poppins", monospace;
        font-weight: 800;
    }
    .buttonContainer{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 5%;
        flex-direction: column;
        margin-left: 7vw;
    }
    .buttonContainer button{
        flex: 1;
        width: 15%;
        margin: 5px;
        box-sizing: border-box;
    }
    .startButton{
        background-color: #C51C39;
        color:black;
        border-radius: 15px;
        font-size: 2em;
        width: 180px;
        border:none;
        box-shadow: 10px 8px 5px rgb(17, 17, 17);
        font-family: 'Major Mono Display', monospace;
        font-weight: 700;
    }
    .howtoButton{
        display: inline-block;
        border: 2px solid #C51C39;
        color:#C51C39;
        border-radius: 15px;
        font-size: 1.2em;
        width: 180px;
        margin-top: 15px;
        text-decoration: none;
        background-color: rgba(0, 0, 0, 0);
        box-shadow: 10px 8px 5px rgb(17, 17, 17);
        font-family: 'Major Mono Display', monospace;
        font-weight: 700;
    }
    .popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        align-items: center;
        justify-content: center;
      }
    
    .instBg {
        position: absolute;
        width: 42%;
        height: 73%;
    }

    .instructions {
        text-align: center;
        color: white;
        position:absolute;
        margin-top: 0%;
        font-family: 'Montserrat', sans-serif;
    }

    .ifyouhave {
        color: #C51C39;
        font-size: 1.7em;
        font-weight: 700;
    }
    .ifyouhave:after {
        content: "";
        display: block;
        white-space: pre;
        content: "you live like a";
    }

    .zname {
        margin-top: 20px;
        height:40%;
        width:40%;
        margin-top: -2%;
    }

    .howtoinstructions {
        color: #C51C39;
        margin-top: -2%;
        font-weight: 700;
        font-size: 1.2em;
    }

    ol {
        text-align: left;
        color: black;
        font-weight: 700;
        font-family: 'Montserrat', sans-serif;
        width: 600px; /* Adjust the width as needed */
        margin-left: 20%;
        margin-top: 2% !important;
        font-size: 1.1em;
    }   
    
    li {
        list-style-type: decimal;
        margin-bottom: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    li:nth-child(2):after {
        content: "";
        display: block;
        white-space: pre;
        content: "    of stress or more in the statistics";
    }
    .closeButton {
        margin-top: 25px;
        background-color: #C51C39;
        color: black;
        padding: 0px 20px;
        border: none;
        border-radius: 15px;
        font-family:'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 1.4em;
    }
    .zombiecontainer{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 3%;
        margin-top: 8%;
    }
    .zimage{
        position:relative;
        width:120%;
        height:120%;
    }
    .changingText{
        position:absolute;
        z-index: 1;
        color:black;
        font-size: 8em;
        top:60%;
        left: 55%;
        font-family: "Major Mono Display", monospace;
    }
    .text{
        display: flex;
        width:50%;
        position: absolute;
        color:white;
        font-family: 'Major Mono Display', monospace;
        margin-top: 8%;
        justify-content: right;
        align-items: right;
        margin-left: 35%;
    }
    .click{
        font-size: 18px;
        width: 50%;
    }
    .top{
        height:20%;
        background-color: #F0F0F0;    
    }   
    .gametitle{
        width:100%;
        margin-top: 0.5%;
        font-family:'Major Mono Display', monospace ;
        display: flex;
        justify-content: center;
        color:#C51C39;
        font-size: 5em;
    }
    .niveles{
        margin-top: 22vh !important;
        font-family: "Major Mono Display", monospace;
    }

    .numeros{
        font-family: "Major Mono Display", monospace;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: -20%;
    }
    

    #l-title{
        background-color: #000;
        color:white;
        
        font-size: 1.2em;
        margin-top: 8px;
        margin-top: 15px;
    }
    #l-title1{
        background-color: #000;
        color:white;
        display: flex;
        justify-content: center;
        font-size: 1.2em;
        margin-top: 15px;
        
    }
    #l-title2{
        background-color: #000;
        color:white;
        display: flex;
        justify-content: center;
        margin-top: 15px;
        font-size: 1.2em;

    }
    #dop-number{
        font-size:3em;
        color: #C71637;
        font-weight: 800;
        display: flex;
        font-family: "Poppins", sans-serif;
        justify-content: center;
        margin-top: 10px;
    }
    #s-number{
        font-size:3em;
        color:#C71637;
        display: flex;
        font-weight: 800;
        font-family: "Poppins", sans-serif;
        justify-content: center;
        margin-top: 10px;
    }
    #ti-number{
        font-size:2em;
        display: flex;
        justify-content: center;

    }
    #lineas{
        margin-top: 5px;
        display: flex;
        justify-content: right;
        height:25px;
 
        margin-left: -20%;
        padding:0 !important;

        background-color: #C51C39;
    }
    #squares{
        margin-top: 5px;
        width: 89%;
        padding: 0 ;
        display: flex;
        margin-left: -12px;
        justify-content: right;
    }
    .square{
        height:26px;
        margin-left: 2.6px;
        background-color:#C51C39;
    }
    .wboard{
        height: 79vh;
        width: 95%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 20px;
        color:white;
        background-color: white;
    }
    .imag{
        height: 60px;
        width:60px;
        margin-top: 0px;
        cursor:pointer;
    }
    .imag:hover{
        color: grey;
        cursor: pointer;
        opacity: 50%;
    }
    .chooseh1 h1{
        width: 140%;
        font-family: "Major Mono Display", sans-serif;
        font-size: 1em;
        display: flex;
        color:black;
        font-weight: 400;
        margin-top: 25px;
        font-weight: bold;
        justify-content: center;
        align-items: center;
        
    }
    .images{
        height:80vh;
    }
    .timages{
       
        height: 20vh;
    }
    .failed{
        z-index: 9999;
        display: flex;
        position: fixed;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-left: 32%;
        margin-top: 3%;
        font-size: 1.5em;
    }
    .cala{
        top:30%;
        height: 100px;
    }
    .dont{
        font-family: "Major Mono Display", monospace;
        font-size: 2em;
        margin-bottom:-10%;
        color:white;
    }
    .stress{
        font-family: "Major Mono Display", monospace;
        font-size: 5em;
        color:#C51C39;
    }
    .kill{
        font-family: "Major Mono Display", monospace;
        font-size: 2.9em;
        color:white;
        margin-top: -8%;
    }
    .buttonT{
        background-color: #C51C39;
        color:black;
        border-radius: 15px;
        font-size: 1.2em;
        width:50%;
        display: flex;
        justify-content: center;
        border:none;
        margin-top: 8%;
        box-shadow: 10px 8px 5px rgb(54, 53, 53);
        font-family: 'Major Mono Display', monospace;
    }
    .mano{
        height:280px;
        position:fixed;
        bottom:0;
    }
    .checkBackground{
        position: fixed;
        top: 0;
        left: 0;
        width: 110%;
        z-index: -1;
        height: auto;
        margin-left: -100px;
    }
    .white-fondo-results{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        font-family: "Major Mono Display", monospace;
        margin-top: 10%;
    }
    .checkyour_title, .result_title{
        font-size: 4em;
    }
    .surv_title{
        font-size: 6em;
        color:#C51C39;
    }
    #results_title{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 3%;
    }
    .dopamine_stress_numbers{
        font-family: "Major Mono Display", monospace;
        flex-direction: row;
    }
    .dopamine_text h1{
        margin-right: 50px;
        font-size: 2.5em;
        background-color: black;
        color: white;
        width: 92%;
    }
    .dopamine_text h2{
        font-size: 3em;
        font-family: "Poppins", sans-serif;
        font-weight: 800;
        color: #C71637;
    }
    .stress_text{
        display: flex;
        flex-direction: column;
        justify-content: right;
        align-items: right;
        margin-left: 10%;
    }
    .stress_text h2{
        font-weight: bold;
        font-size: 3em;
    }
    .stress_text h1{
        background-color: black;
        color: white;
        font-size: 2.5em;
        width: 150%;
    }
    .next_button{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 3%;
    }
    .nextButton{
        border:none;
        background-color: #C51C39;
        color:black;
        border-radius: 15px;
        font-size: 2.5em;
        width:8%;
        box-shadow: 10px 8px 5px rgb(129, 129, 129);
        font-family: 'Major Mono Display', monospace;
    }
    .friesBackground{
        top: 0;
        left: 0;
        width: 110%;
        position: fixed;
        z-index: -3;
        height:100%;
        margin-left: -100px;

    }
    .zombie_hands{
        display: flex;
        justify-content: center;
    }
    .zombie_hands img{
        position:fixed;
        bottom:0px;
        height:200px;
        width:400px;
    }
    .stress_prize{
        margin-top: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-family: "Major Mono Display", monospace;
    }
    .stress_prize img {
    height:200px;
    }
    .die_anyways_stress{
    font-size: 2em;
    }
    .prize_stress{
        font-size: 3em;
        margin-top: -50px;
    }
    .again_button{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 25px;
    }
    .againButton{
        border:none;
        background-color: #C51C39;
        color:white;
        border-radius: 15px;
        font-size:2em;
        width:18%;
        box-shadow: 10px 8px 5px rgb(168, 166, 166);
        font-family: 'Major Mono Display', monospace;
    }
  
  
    .hand_and_fry{
        display: flex;
        justify-content: center;
    }
    .z_hand {
    position: fixed;
    bottom: 0;
    height:390px;
    transform: translateX(-50%) translateY(50%);
    width:300px;
    left: 50%;
    }
    
    .fries {
        height: 310px;
        width: 310px;
        position: fixed;
        bottom:0;
        left: 50%;
        transform: translateX(-50%) translateY(50%);
        z-index: 2;
    }
    .star{
        height:400px;
        width: 380px;
        position:fixed;
        bottom:0;
        left:38%;        
        z-index: -1;
        top: 55%;        
        animation: fade-out-star 8s ease-in-out, rotate 15s infinite;
    }
    @keyframes fade-out-star {
        from {
            opacity: -10;
        }
        to {
            opacity: 10;
        }
    }
    @keyframes rotate { 
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(180deg);
        }
    }
}

/*MY PC*/
@media only screen and (min-width: 767px)  and (max-width: 1399px){
    .mobile {
      display: none;
    }
    body{
        background-color:#F0F0F0;
    }
    .background{
        position: fixed;
        top: 0;
        left: 0;
        width: 110%;
        z-index: -1;
        height: auto
    }
    .background img {
        width: 100%;
        height:101vh;
        margin-left: -100px;
    }
    .textcontainer{
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
        margin-top: 20vh;
    }
    .textcontainer h1 {
        font-family: 'Major Mono Display', monospace;
        color:#C51C39;
        font-size: 3.8em;
    }
    #t2{
        margin-top: -15px;
    }
    .textcontainer h2{
        font-family: 'Major Mono Display', monospace;
        color:white;
        font-size: 1.5em;
        margin-top: -10px;
    }
    .byprego{
        margin-top: 15px;
        display: flex;
        justify-content: center;
        align-items: center;    
    }
    .logo{
        width:8%;
    }
    .buttonContainer{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 4%;
        flex-direction: column;
    }
    .buttonContainer button{
        flex: 1;
        width: 12%;
        margin: 5px;
        box-sizing: border-box;
    }
    .startButton{
        background-color: #C51C39;
        color:black;
        border-radius: 18px;
        font-size: 1.3em;
        width: 150px;
        border:none;
        box-shadow: 10px 8px 5px rgb(17, 17, 17);
        font-family: 'Major Mono Display', monospace;
         font-weight: 700;
    }
    .howtoButton{
        display: inline-block;
        border: 2px solid #C51C39;
        color:#C51C39;
        border-radius: 15px;
        font-size: 1em;
        width: 180px;
        margin-top: 15px;
        text-decoration: none;
        background-color: rgba(0, 0, 0, 0);
        box-shadow: 10px 8px 5px rgb(17, 17, 17);
        font-family: 'Major Mono Display', monospace;
        font-weight: 700;
    }
    .popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
      }
    
    .instBg {
        position: absolute;
        height:80%;
       
    }

    .instructions {
        text-align: center;
        color: white;
        position:absolute;
        font-family: 'Montserrat', sans-serif;
    }

    .ifyouhave {
        color: #C51C39;
        font-size: 1.2em;
        font-weight: 700;
    }
    .ifyouhave:after {
        content: "";
        display: block;
        white-space: pre;
        content: "you live like a";
    }

    .zname {
        margin-top: 20px;
        height:35%;
        width:35%;
        margin-top: -2%;
    }

    .howtoinstructions {
        color: #C51C39;
        margin-top: -2%;
        font-weight: 700;
        font-size: 0.9em;
    }

   ol {
    text-align: left;
    color: black;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    width: 500px; /* Adjust the width as needed */
    margin-left: 25%;
    margin-top: 2% !important;
    font-size: 0.8em;
    }   

    li {
    list-style-type: decimal;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

    li:nth-child(2):after {
        content: "";
        display: block;
        white-space: pre;
        content: "    of stress or more in the statistics";
    }
    .closeButton {
        margin-top: 20px;
        background-color: #C51C39;
        color: black;
        padding: 0px 20px;
        border: none;
        border-radius: 15px;
        font-family:'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 1em;
    }
    .wrappers {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-family: "Poppins", monospace;
        color:white;
        margin-top: 30px;
        font-weight: 200;
        font-size: 0.9em;
      }
    .first-line {
        white-space: nowrap;
    }
    .highlight{
        color:#C51C39;font-family: "Poppins", monospace;
        font-weight: 800;
    }
    .zombiecontainer{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 5%;
        margin-top: 4%;
    }
    .zimage{
        position:relative;
        width:90%;
        height:90%;
    }
    .zimage{
        position:relative;
        width:90%;
        height: 90%;
    }
    .changingText{
      position:absolute;
      z-index: 1;
      color:black;
      font-size: 6em;
      top:62%;
      left: 51%;
      font-family: "Major Mono Display", monospace;
    }
    .text{
        display: flex;
        width:25%;
        position: absolute;
        color:white;
        font-family: 'Major Mono Display', monospace;
        margin-top: 6%;
        justify-content: right;
        align-items: right;
        margin-left: 55%;
    }
    .click{
        font-size:17px;
    }
    .top{
        height:50%;
        background-color: #F0F0F0;    
    }   
    .gametitle{
        width:100%;
        margin-top: 0.5%;
        font-family:'Major Mono Display', monospace ;
        display: flex;
        justify-content: center;
        color:#C51C39;
        font-size: 4em;
    }
    .niveles{
        margin-top: 90% !important;
        font-family: "Major Mono Display", monospace;
    }

    .numeros{
        font-family: "Major Mono Display", monospace;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: -20%;
    }
    

    #l-title{
        background-color: #000;
        color:white;
        
        font-size: 1em;
        margin-top: 8px;
        margin-top: 15px;
    }
    #l-title1{
        background-color: #000;
        color:white;
        display: flex;
        justify-content: center;
        font-size: 1em;
        margin-top: 15px;
        
    }
    #l-title2{
        background-color: #000;
        color:white;
        display: flex;
        justify-content: center;
        margin-top: 15px;
        font-size: 1em;

    }
    #dop-number{
        font-size:3em;
        color: #C71637;
        font-weight: 800;
        display: flex;
        font-family: "Poppins", sans-serif;
        justify-content: center;
        margin-top: 10px;
    }
    #s-number{
        font-size:3em;
        color:#C71637;
        display: flex;
        font-weight: 800;
        font-family: "Poppins", sans-serif;
        justify-content: center;
        margin-top: 10px;
    }
    #ti-number{
        font-size:2em;
        display: flex;
        justify-content: center;

    }
    #lineas{
        margin-top: 5px;
        display: flex;
        justify-content: right;
        height:25px;
 
        margin-left: -20%;
        padding:0 !important;

        background-color: #C51C39;
    }
    #squares{
        margin-top: 5px;
        width: 89%;
        padding: 0 ;
        display: flex;
        margin-left: -10px;
        justify-content: right;
    }
    .square{
        height:26px;
        margin-left: 2.6px;
        background-color:#C51C39;
    }
    .wboard{
        height: 80vh;
        width: 95%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 20px;
        color:white;
        background-color: white;
    }
    .imag{
        height: 50px;
        width:55px;
        margin-top: 6px;
        cursor:pointer;
    }
    .imag:hover{
        color: grey;
        cursor: pointer;
        opacity: 50%;
    }
    .chooseh1 h1{
        width: 130%;
        font-family: "Major Mono Display", monospace;
        font-size: 0.75em;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        
    }
    .images{
    
        height:80vh;
    }
    .timages{
       
        height: 20vh;
    }
    .failed{
        z-index: 9999;
        display: flex;
        position: fixed;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-left: 35%;
    }
    .cala{
        top:20%;
        height: 80px;
    }
    .dont{
        font-family: "Major Mono Display", monospace;
        font-size: 2em;
        margin-bottom:-2%;
        color:white;
    }
    .stress{
        font-family: "Major Mono Display", monospace;
        font-size: 5em;
        color:#C51C39;
    }
    .kill{
        font-family: "Major Mono Display", monospace;
        font-size: 2.9em;
        color:white;
        margin-top: -2%;
    }
    .buttonT{
        background-color: #C51C39;
        color:black;
        border-radius: 15px;
        font-size: 1.2em;
        width:50%;
        display: flex;
        justify-content: center;
        border:none;
        margin-top: 3%;
        box-shadow: 10px 8px 5px rgb(54, 53, 53);
        font-family: 'Major Mono Display', monospace;
    }
    .mano{
        height:200px;
    }
    .checkBackground{
        position: fixed;
        top: 0;
        left: 0;
        width: 110%;
        z-index: -1;
        height: auto;
        margin-left: -100px;
    }
    .white-fondo-results{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        font-family: "Major Mono Display", monospace;
        margin-top: 5%;
    }
    .checkyour_title, .result_title{
        font-size: 2em;
    }
    .surv_title{
        font-size: 3.5em;
        color:#C51C39;
    }
    #results_title{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 3%;
    }
    .dopamine_stress_numbers{
        font-family: "Major Mono Display", monospace;
        flex-direction: row;
    }
    .dopamine_text h1{
        margin-right: 50px;
        font-size: 1.7em;
        background-color: black;
        color: white;
        width: 92%;
    }
    .dopamine_text h2{
        font-size: 3em;
        font-family: "Poppins", sans-serif;
        font-weight: 800;
        color: #C71637;
    }
    .stress_text{
        display: flex;
        flex-direction: column;
        justify-content: right;
        align-items: right;
        margin-left: 10%;
    }
    .stress_text h2{
        font-weight: bold;
        font-size: 3em;
        font-family: "Poppins", sans-serif;
        font-weight: 800;
        color: #C71637;
    }
    .stress_text h1{
        background-color: black;
        color: white;
        font-size: 1.7em;
        width: 150%;
    }
    .next_button{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 3%;
    }
    .nextButton{
        border:none;
        background-color: #C51C39;
        color:black;
        border-radius: 15px;
        font-size: 1.2em;
        width:8%;
        box-shadow: 10px 8px 5px rgb(129, 129, 129);
        font-family: 'Major Mono Display', monospace;
    }
    .friesBackground{
        top: 0;
        left: 0;
        width: 110%;
        position: fixed;
        z-index: -3;
        height:100%;
        margin-left: -100px;

    }
    .zombie_hands{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .zombie_hands img{
        height:169px;
        position: absolute;
        bottom:0;
        width:400px;
    }
    .stress_prize{
        margin-top: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-family: "Major Mono Display", monospace;
    }
    .prize_stress{
        font-size: 2em;
        margin-top: -50px;
    }
    .again_button{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 25px;
    }
    .againButton{
        border:none;
        background-color: #C51C39;
        color:white;
        border-radius: 15px;
        font-size: 1.2em;
        width:12%;
        box-shadow: 10px 8px 5px rgb(168, 166, 166);
        font-family: 'Major Mono Display', monospace;
    }


    .hand_and_fry{
        display: flex;
        justify-content: center;
    }
    .z_hand {
        position: fixed;
        bottom: 0;
        height:320px;
        width:320px;
        left: 50%;
        z-index: 2;
        transform: translateX(-50%) translateY(50%);
      }
      
    .fries {
        height: 280px;
        width: 280px;
        position: fixed;
        bottom:-2;
        left: 50%;
        transform: translateX(-50%) translateY(50%);
        z-index: 3;
    }
    .star{
        height:300px;
        width: 320px;
        position:fixed;
        bottom:0;
        left:38.5%;
        top: 42%;        
        z-index: -1;
        animation: fade-out-star 8s ease-in-out, rotate 15s infinite;
    }
    @keyframes fade-out-star {
        from {
            opacity: -10;
        }
        to {
            opacity: 10;
        }
    }
    @keyframes rotate { 
       from {
         transform: rotate(0deg);
       }
       to {
         transform: rotate(180deg);
       }
    }

}
    
/* MOBILE */
@media only screen and (max-width: 767px) {
    body{
        touch-action: none;
    }
    .desktop{
      display: none;
    }
    .background{
        position: fixed;
        top: 0;
        left: 0;
        width: 105%;
        height: 100%;
        z-index: -1;
    }
    .background img {
        width: 100%;
        margin-left: -12px;
        height: 100%;
        object-fit: cover;
      }
    .textcontainer{
        display: flex;
        justify-content: center;
        margin-top: 30%;
        text-align: center;
    }
    .textcontainer h1 {
        font-family: 'Major Mono Display', monospace;
        color:#C51C39;
        font-size: 4.2em;
    }
    #t2{
        margin-top: -15px;
    }
    .wrappers {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-family: "Poppins", monospace;
        color:white;
        margin-top: 20px;
        font-weight: 200;
      }
    .first-line {
        white-space: nowrap;
    }
    .highlight{
        color:#C51C39;font-family: "Poppins", monospace;
        font-weight: 800;
    }
    .textcontainer h2{
        font-family: 'Major Mono Display', monospace;
        color:white;
        font-size: 1.5em;
        margin-top: -5px;
    }
    .byprego{
        margin-top:35px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color:white;
        font-family: "Major Mono Display", monospace;
        font-display: column;
    }
    .logo{
        width:20%;
    }
    .cocreated{
        font-size: 10px;
    }
    .buttonContainer{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 25%;
        flex-direction: column;
    }
    .buttonContainer button{
        flex: 1;
        width: 44%;
        margin: 5px;
        box-sizing: border-box;
    }
    .startButton{
        background-color: #C51C39;
        color:black;
        border-radius: 15px;
        box-shadow: 10px 8px 5px rgb(17, 17, 17);
        font-size: 1.5em;
        border:none;
        font-family: 'Montserrat';
        font-weight: 700;
    }
    .howtoButton{
        display: inline-block;
        border: 2px solid #C51C39;
        color:#C51C39;
        border-radius: 15px;
        font-size: 1em;
        width: 180px;
        margin-top: 15px;
        text-decoration: none;
        background-color: rgba(0, 0, 0, 0);
        box-shadow: 10px 8px 5px rgb(17, 17, 17);
        font-family: 'Montserrat', monospace;
        font-weight: 700;
    }
    .popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        align-items: center;
        justify-content: center;
      }
    
    .instBg {
        position: absolute;
    }

    .instructions {
        text-align: center;
        color: white;
        position:absolute;
        margin-top: 20px;
        font-family: 'Montserrat', sans-serif;
    }

    .ifyouhave {
        color: #C51C39;
        font-size:1em;
        font-weight: 800;
    }

    .zname {
        margin-top: 20px;
        height:55%;
        width:55%;
        margin-top: 0%;
    }

    .howtoinstructions {
        color: #C51C39;
        margin-top: 0%;
        font-weight: 800;
        font-size: 1em;
    }

    ol {
        text-align: left;
        color: black;
        font-weight: 700;
        font-family: 'Montserrat', sans-serif;
        width: 500px; /* Adjust the width as needed */
        margin-left: 17%;
        margin-top: 2% !important;
        font-size: 0.78em;
    }   
    
    li {
        list-style-type: decimal;
        margin-bottom: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    li:nth-child(2):after {
        content: "";
        display: block;
        white-space: pre;
        margin-left:4%;
        content: "to choose more images";
    }
    li:nth-child(3):after {
        content: "";
        display: block;
        white-space: pre;
        margin-left:4%;
        content: "-10% of stress in the statistics";
    }
    li:nth-child(4):after {
        content: "";
        display: block;
        margin-left:4%;
        white-space: pre;
        content: "achieve more than -10%";
    }
    li:nth-child(5):after {
        content: "";
        display: block;
        margin-left:4%;
        white-space: pre;
        content: "less stress you have";
    }
    .closeButton {
        margin-top: 15px;
        background-color: #C51C39;
        color: black;
        padding: 5px 20px;
        border: none;
        border-radius: 15px;
        font-family:'Montserrat', sans-serif;
        font-weight: 700;
    }
    .zombiecontainer{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 7%;
        margin-top: 10%;
    }
    .zimage{
        position:relative;
        width:95%;
        height:95%;
    }

    .text{
        display: flex;
        justify-content: center;
        text-align: center;
        width:100%;
        color:white;
        font-family: 'Major Mono Display', monospace;
        margin-top: -15px;
    }
    .click{
        font-size: 14px;
        width: 75%;
    }
    .top{
        height:20%;
        background-color: #F0F0F0;    
    }   
    .gametitle{
        width:100%;
        font-family:'Major Mono Display', monospace ;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color:#C51C39;
        font-size: 1.8em;
    }
    /* DOPAMINE, STRESS AND TIME LEVELS */  
    .levels{
        display:flex;
        width:100vw;
        margin-top: 15px !important;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-family: "Major Mono Display", monospace;
    }
    #barras{
        padding:0 ;
        display: flex;
        justify-content: right;
        align-items: right;
        text-align: right;
        height: 15px;
        width: 100%;
        margin-top: 5px;
    }
    .barra{
        background-color:#C71637;
    }
    #d-title{
        background-color: black;
        color:white;
        font-size: 1em;
    }

    #s-title{
        background-color: black;
        color:white;
        font-size: 0.9em;
    }
    #cuadrados{
        margin-top: 5px;
        width: 82%;
        margin-left: 6px;
        display: flex;
        justify-content: center;
    }
    .cuadrado{
        height:15px;
        margin-left: 3px;
        background-color:#C71637;
        border-color: #C71637;
        border: 1px solid #C71637;
    }
    #t-number{
        font-size: 1em;
        display: flex;
        justify-content: center;
        font-family: "Major Mono Display";
    }
    #d-number{
        font-size: 2em;
        display: flex;
        justify-content: center;
        font-family: 'Poppins', sans-serif;
        justify-content: center;
        font-weight: 900;
        color:#C71637;
    }
    #l-number{
        font-size: 2em;
        font-weight: 900;
        display: flex;
        justify-content: center;
        font-family: 'Poppins', sans-serif;
        justify-content: center;
        color:#C71637;
    }
    .square{
        background-color: white;
        height: 68vh;
    }
    #white{
        background-color: #fff;
        width:100%;
        height:100%;
    }
    
    .images{
        background-color: #f0f0f0;
        height:24%;
        position: fixed;
        bottom:0;
        width:100%;
    }
    
    .carousel-container{
        width: 100%;
        height:12%;
        position: relative;
    }

    .carousel-images {
        display: flex;        
        width: calc(100% - 60px);
        margin: 0 0px;
    }

    #im1{
        margin-left: 0px;
    }
    .carousel-images img {
        width: 23%;
        height: 100%;
        margin-top:4%;
        font-weight: bold;
        cursor:pointer;
        margin-left: 3px;
    }
    .choose{
        font-family: 'Major Mono Display',monospace;
        font-size: 0.7em;
        display: flex;
        justify-content: center;
        width:80%;
        margin-left: 10%;
        margin-top: 2%;
    }
    .carousel-button {
        position: absolute;
        margin-top: 5%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        font-size: 2rem;
        cursor: pointer;

    }
    
    .carousel-button-left {
        left: 0;
        margin-left: 8px;
    }
    
    .carousel-button-right {
        right: 0;
    
        margin-right: 8px;
    }
    .failed{
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .try{
        display:none;
    }
    .dont{
        font-family: "Major Mono Display", monospace;
        font-size: 2em;
        color:black;
    }
    .stress{
        font-family: "Major Mono Display", monospace;
        font-size: 3em;
        color:#C51C39;
    }
    .kill{
        font-family: "Major Mono Display", monospace;
        font-size: 2.5em;
        color:black;
    }
    .tryAgain{
        background-color: #C51C39;
        color:black;
        border-radius: 15px;
        font-size:2.5em;
        border:none;
        box-shadow: 10px 8px 5px rgb(17, 17, 17);
        font-family: 'Major Mono Display', monospace;
    }

    /* CHECK YOUR RESULTS PAGE*/
    #fourthScreen{
        display:none;
    }

    .backgroundWhite{
        position: fixed;
        top: 0;
        left: 0;
        width: 105%;
        height: 100%;
        z-index: -1;
    }
    .backgroundWhite img {
        width: 100%;
        margin-left: -12px;
        height: 100%;
        object-fit: cover;
    }
    .textcontainers{
        display: flex;
        justify-content: center;
        margin-top: 20%;
        text-align: center;
    }
    .checks h1{
        font-family: 'Major Mono Display', monospace;
        font-size: 2em;
        color:black;
    }
    #stitle{
        font-size: 3em;
        color:#C51C39;
    }
    .dopa{
        font-family: 'Major Mono Display', monospace;
        font-size: 1.8em;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10%;
        background-color: #000;
        color:white;
        width: 70%;
        margin-left: 14%;
    }
    .numero{
        font-family: 'Poppins', sans-serif;
        display: flex;
        justify-content: right;
        align-items: right;
        font-weight: 800;
        color:#C51C39;
    }
    #dnumber{
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        color:#C51C39;
    }
    #snumber{
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        color:#C51C39;
    }
    .cbutton{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 5%;
    }
    .nextb{
        background-color: #C51C39;
        color:black;
        border-radius: 15px;
        font-size: 1.3em;
        border:none;
        width:32%;
        box-shadow: 10px 8px 5px rgb(163, 163, 163);
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
    }
    #fifthScreen{
        display: none;
    }
    .enjcontainer{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .enjcontainer h1{
        margin-top: 15%;
        font-family: "Major Mono Display", monospace;
        font-size: 1em;
    }
    .enjcontainer h2{
        font-family: "Major Mono Display", monospace;
        font-size: 2em;
        margin-top: -8%;
    }
  
    .pbutton{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20%;

    }
    .pab{
        background-color: #C51C39;
        color:white;
        border-radius: 15px;
        font-size: 1em;
        border:none;
        margin-top: -20%;
        height:38px;
        width:50%;
        box-shadow: 5px 5px 2px rgb(163, 163, 163);
        font-family: 'Major Mono Display', monospace;
    }
    .z_hand{
        position: fixed;
        margin-top: 250px;
        height:400px;
        width:300px;
        left: 50%;
        z-index: 2;
        transform: translateX(-50%) translateY(50%);
    }
    .fries{
        height: 280px;
        width: 280px;
        position: fixed;
        margin-top:250px;
        left: 50%;
        transform: translateX(-50%) translateY(50%);
        z-index: 3;
    }
    .star{
        height:300px;
        width: 320px;
        position:fixed;
        left:12%;
        margin-top:10px;    
        z-index: -1;
        animation: fade-out-star 8s ease-in-out, rotate 15s infinite;
    }
    @keyframes fade-out-star {
        from {
            opacity: -10;
        }
        to {
            opacity: 10;
        }
    }
    @keyframes rotate { 
       from {
         transform: rotate(0deg);
       }
       to {
         transform: rotate(180deg);
       }
    }
    
}