@media only screen and (max-width: 768px) {
    
    
    body{
        transform: scale(1);
        overflow-x: hidden;
        overflow-y: hidden;
        margin: 0%;
        padding: 0%;
        box-sizing: border-box;
        height: 100vh;    
        background-attachment: fixed;
        background-size: contain;
        background-position: center center;
        background-image: linear-gradient(to top, #feada6 0%, #f5efef 100%);

    }


    .logoDiv{
        display: flex;
        align-items: center;
        width: 100vw;
    }

    .innerSpan{
        margin-right: 2vw;
    }
       
    .logoImg{
        margin-left: 2vh;
        scale:1.2;
        border-radius:45%;
    }

    .logoHeading{
        letter-spacing: 0.6vw;
        margin-left:2vw;
        font-size:6.6vh;
    }

    .mainContent{
        height: 100%;
        display: flex;
        flex-direction: column;
        width: 100vw;
        justify-content: center;
        align-items: center;
    }

    .leftDiv {
        font-size: 16vw;
        height: 50%;
        width: 80%;
        top: 13%;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-weight: bold;
        font-family: 'MainFont';
        font-style: italic;
        background: linear-gradient(50deg,#735d78,#f72585,#00008b,#4b0082,#fb6f92,#f72585);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 0.05vh black;
    }
    

    .rightDiv{
        width:65%;
        height:50%;
        position: absolute;
        top: 40%;
        border-radius: 5vh;
        width:90vw;
        right:0.5%; 
        display: flex;
        flex-wrap: wrap;
        margin-right:5vw;
        background-color: black;
    }

    .forFlip{
        text-align: center;
        margin-bottom: -2%;
    }
    
    .innerP1{
        font-family: 'MainFont';
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13vh;
        color: white;
    }
    
    .innerP2{
        font-family: 'MainFont';
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13vh;
        color: white;
    
        transform: scale(-1, 1);
        -moz-transform: scale(-1, 1);
        -webkit-transform: scale(-1, 1);
        -o-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
        transform: scale(-1, 1);
    
    }
    
    .innerP3{
        font-family: 'MainFont';
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13vh;
        color: white;
    }
    
    
    .innerP4{
        font-family: 'MainFont';
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13vh;
        color: white;
    }
    
    .innerSecondP1{
        font-family: 'MainFont';
        margin-top: -3vh;
        display: flex;
        justify-content: center;
        align-items: end;
        color: white;
    }
    
    .innerSecondP3{
        font-family: 'MainFont';
        margin-top: -3vh;
        display: flex;
        justify-content: center;
        align-items: end;
        color: white;
    }
    
    .innerSecondP4{
        font-family: 'MainFont';
        margin-top: -3vh;
        display: flex;
        justify-content: center;
        align-items: end;
        color: white;
    }

    .one,.two,.three,.four{
        width: 50%;
        height: 100%;
    }
    .two{
        pointer-events: none;
    }
    .three{
        overflow: hidden;
    }

    .easy,.med,.hard{
        font-size:6vw;
        transform: rotateY(180deg);
        font-weight: bolder;
    }

    .figures{
        font-weight:600;
        font-style: italic;
        background-color: #e0596263;
        display: flex;
        justify-content: center;
        font-size: 8vw;
        color: white;
    }

    .won{
        font-family: 'MainFont';
        padding-top: 1.5vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 7vw;
        color: rgba(255, 255, 255, 0.824);
    }
    
    .lost{
        padding-top: 1.5vh;
        font-family: 'MainFont';
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 7vw;
        color: rgba(255, 255, 255, 0.824);
    }
    
    .abandoned{
        font-family: 'MainFont';
        padding-top: 2vh;
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgba(255, 255, 255, 0.824);
    }
    
    .btnWon{
        padding-left: 1.5vh;
        color: #fca311;
        font-size:7vw;
        border: none;
        background: transparent;
    }
    
    .btnLost{
        padding-left: 1.5vh;
        color: #fca311;
        font-size:7vw;
        border: none;
        background: transparent;
    }
    
    .btnAbandoned{
        cursor: pointer;
        background-color: #e7b5b88c;
        font-size:5vw;
        padding-left: 0.9vw;
        color: white;
        border-radius: 1.8vw;
        border: none;
        width: 50vw;
    }

    .card3L0{
        font-family: 'MainFont';
        display: flex;
        justify-content: space-around;
        color: white;
        font-size: 5.5vw;
        padding-top: -3vh;

    }

    .card3L1,.card3L2,.card3L3{
        font-size: 3.6vw;
        color: white;
        margin-left: 10px;
        margin-top: -8px;
    }
    
    .card3L4{
        display: none;
    }
}