random-elements.css

@font-face {
    font-family: hemi;
    src: url(./assets/hemi\ head\ bd\ it.otf);
}
@font-face {
    font-family: contra;
    src: url(./assets/ContrailOne-Regular.ttf);
}
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    color: white;
}
body{
    background-image: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(45,50,173,1) 35%, rgba(0,212,255,1) 100%);
    background-repeat: no-repeat;
    height: 100vh;
    width: 100vw;
}
#game-arena{
    width: 80%;
    height: 70%;
    background: rgba( 255, 255, 255, 0.1 );
    /* box-shadow: 0 8px 32px 0 rgba( 255, 255, 255, 0.37 ); */
    backdrop-filter: blur( 20px );
    -webkit-backdrop-filter: blur( 20px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}
#parent{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-top: 80px;
    padding-bottom: 30px;
    width: 100vw;
    height: 100vh;
    visibility: hidden;
}
#heading{
    font-size: 50px;
    font-family: hemi;
    text-decoration: underline;
}
#circle{
    height: 80px;
    width: 80px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    top: 2%;
    left: 90%;
    /* animation: shake 1s linear infinite; */
}
@keyframes shake {
    0%{
        transform: translateX(25px);
    }
    50%{
        transform: translateX(0px);
    }
    100%{
        transform: translateX(-25px);
    }
}
#instructions{
    position: absolute;
    align-items: center;
    padding: 15px 20px 0 10px;
    gap: 30px;
    top: 10%;
    left: 10%;
    display: flex;
    flex-direction: column;
    height: 80%;
    width: 80%;
    background: rgba( 255, 255, 255, 0.05 );
    /* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
    backdrop-filter: blur( 12.5px );
    -webkit-backdrop-filter: blur( 12.5px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}
#game-des{
    font-size: 18px;
    line-height: 25px;
}
#highlight{
    color: yellow;
    font-weight: 900;
}
#choose-mode-heading{
    font-size: 40px;
    font-family: hemi;
    text-decoration: underline;
}
#buttons{
    display: flex;
    width: 45%;
    justify-content: space-between;
}
#buttons button{
    font-size: 16px;
    font-family: hemi;
    width: 100px;
    height: 50px;
    background: rgba( 255, 255, 255, 0.05 );
    /* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
    backdrop-filter: blur( 12.5px );
    -webkit-backdrop-filter: blur( 12.5px );
    border-radius: 5px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}
#startBtn button{
    margin-top: 50px;
    font-size: 16px;
    font-family: hemi;
    width: 100px;
    height: 50px;
    background: rgba( 255, 255, 255, 0.05 );
    /* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
    backdrop-filter: blur( 12.5px );
    -webkit-backdrop-filter: blur( 12.5px );
    border-radius: 5px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}
#timer{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border: 2px solid white;
    position: absolute;
    top: 3%;
    right: 3%;
    font-size: 25px;
}
#score{
    position: absolute;
    align-items: center;
    padding: 15px 20px 15px 10px;
    gap: 30px;
    top: 20%;
    left: 20%;
    display: flex;
    flex-direction: column;
    height: 60%;
    width: 60%;
    background: rgba( 255, 255, 255, 0.05 );
    /* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
    backdrop-filter: blur( 12.5px );
    -webkit-backdrop-filter: blur( 12.5px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    visibility: hidden;
}
#score-text{
    font-family: contra;
    font-size: 18px;
    line-height: 25px;
}
#score-box{
    text-align: center;
    font-size: 30px;
    font-family: hemi;
    /* margin-top: 30px; */
}
#playBtn{
    margin-top: 8%;
    font-size: 16px;
    font-family: hemi;
    width: 120px;
    height: 50px;
    background: rgba( 255, 255, 255, 0.05 );
    backdrop-filter: blur( 12.5px );
    -webkit-backdrop-filter: blur( 12.5px );
    border-radius: 5px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    display: flex;
    justify-content: center;
    align-items: center;
}
#playBtn:hover{
    cursor: pointer;
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
}
#reset{
    position: absolute;
    top: 1%;
    right: 1%;
}
#home{
    position: absolute;
    top: 1%;
    left: 1%;
}
.resetBtn{
    background: rgba( 255, 255, 255, 0.05 );
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}
@media (max-width:450px){
    body{
        overflow: hidden;
    }
    #instructions{
        gap: 18px;
    }
    #svg{
        width: 12px;
        height: 12px;
    }
    #heading{
        font-size: 13px;
    }
    #game-des{
        font-size: 11px;
    }
    #choose-mode-heading{
        font-size: 15px;
    }
    #buttons button{
        width: 40px;
        height: 25px;
        font-size: 8px;
    }
    #buttons{
        width: 55%;
    }
    #timer{
        width: 40px;
        height: 40px;
        font-size: 17px;
    }
    #reaction-time-box{
        font-size: 12px;
    }
    #score-text{
        font-size: 11px;
    }
    #score-box{
        font-size: 14px;
    }
    #playBtn{
        height: 30px;
        font-size: 13px;
    }
}
@media (min-width:450px) and (max-width:750px){
    body{
        overflow: hidden;
    }
    #instructions{
        gap: 20px;
    }
    #svg{
        width: 20px;
        height: 20px;
    }
    #heading{
        font-size: 18px;
    }
    #game-des{
        font-size: 16px;
    }
    #choose-mode-heading{
        font-size: 18px;
    }
    #buttons button{
        width: 60px;
        height: 30px;
        font-size: 12px;
    }
    #buttons{
        width: 60%;
    }
    #timer{
        width: 40px;
        height: 40px;
        font-size: 17px;
    }
    #reaction-time-box{
        font-size: 16px;
    }
    #score-text{
        font-size: 15px;
    }
    #score-box{
        font-size: 19px;
    }
    #playBtn{
        height: 35px;
        font-size: 16px;
    }
}
@media (min-width:750px) and (max-width:1140px){
    body{
        overflow: hidden;
    }
    #instructions{
        gap: 20px;
    }
    #svg{
        width: 24px;
        height: 24px;
    }
    #heading{
        font-size: 25px;
    }
    #game-des{
        font-size: 18px;
    }
    #choose-mode-heading{
        font-size: 18px;
    }
    #buttons button{
        width: 60px;
        height: 30px;
        font-size: 12px;
    }
    #buttons{
        width: 40%;
    }
    #timer{
        width: 40px;
        height: 40px;
        font-size: 17px;
    }
    #reaction-time-box{
        font-size: 18px;
    }
    #score-text{
        font-size: 18px;
    }
    #score-box{
        font-size: 22px;
    }
    #playBtn{
        height: 40px;
        font-size: 18px;
    }
}