@media (max-width: 450px) and (max-height: 940px){
    body{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
        background-image: url('../assets/nightBg.jpg');
        background-size: cover;        /* ensures the background image covers the viewport */
        background-position: center;   /* centers the background image */
        background-repeat: no-repeat;  /* prevents the image from repeating */
    }
    h1{
        font-size: 50px;
        font-family: "Russo One", sans-serif;
        font-weight: 400;
        font-style: normal;
        text-align: center;
        color:rgba(169, 233, 22, 0.96);
        transform: translateY(10px);
    }
    h2{
        font-size: 30px;
        font-family: "Russo One", sans-serif;
        font-weight: 400;
        font-style: normal;
        color:rgba(169, 233, 22, 0.96);
        transform: translateY(-5px);
    }
    .container{
        height:350px;
        width:90%;
        background-color: transparent;
        transform: translateY(20px); 
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    .box1, .box2, .box3{
        height: 80px;
        width:370px;
        background-color: #100e0ee5;
        border-radius: 50px;
        display: flex;
        justify-content:space-around;
        align-items: center;
        border: 3px solid rgb(244, 244, 20);
    }
    .box1:hover, .box2:hover, .box3:hover{
        box-shadow: 1px 1px 3px 5px rgba(231, 240, 54, 0.353); 
    }
    .box1 p, .box2 p, .box3 p{
        font-size:35px;
        font-family: "VT323", monospace;
        font-weight: 400;
        font-style: normal;
        color:rgb(14, 239, 33);
        transform: translateX(0px);
    }
    button{
        height:60px;
        width:120px;
        border-radius:30px;
        font-size: 28px;
        transform: translateX(0px);
        font-family: "VT323", monospace;
        font-weight: 600;
        font-style: normal;
        color:rgb(18, 194, 18);
        background-color: black;
        border: 3px solid green;
    }
    button:hover{
        background-color: rgb(1, 1, 32);
        box-shadow: 1px 1px 3px 5px rgb(164, 182, 4);
    }
    .play3{
        transform: translateX(0px);
    }
}