@media handheld, only screen and (max-width: 767px) {
/* HELPER  ARROW AND TEXT*/


#arrowContainer {
    position: absolute;
    bottom: 100px;
    width: 100px;
    text-align: center;
    height: 150px;
    left: 90px;
}

#arrowContainer>div {
    font-size: 25px;
    font-family: 'Bangers', cursive;
    color: #003ca6;
    top: 0px;
    left: 10px;
}

#arrow {
/*    display: none;*/
}
}

/* Provide higher res assets for iPhone 4 - preset code from cssgrid.net */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
}

/* media 768 - 979 */
@media  (max-width: 979px) {
    .qus-card {
        width: 650px;
        padding: 35px 60px;
    }
    .rat-form{
        gap: 6px;
    }
    .score-sec{
            width: 52%;
            min-height: 51%;
}
    }
}

/* media 767 */
@media (max-width: 767px) {

/* MENU & GUI */

#scoreUI {
    position: absolute;
    top: 85px;
    left: 10px;
    width: 180px;
    height: 100px;
    text-align: center;
}

#scoreLabel {
}

#scoreNum {
    color: #75890c;
}

/* ------------------ */

#basket {
    width: 120px;
    position: absolute;
    left: 45px;
    bottom: 0px;
    cursor: col-resize;
    z-index: 990;
}

/* HELPER  ARROW AND TEXT*/


#arrowContainer {
    position: absolute;
    bottom: 100px;
    width: 100px;
    text-align: center;
    height: 150px;
    left: 90px;
}

#arrowContainer>div {
    font-size: 25px;
    font-family: 'Bangers', cursive;
    color: #003ca6;
    top: 0px;
    left: 10px;
}

#arrow {
/*    display: none;*/
}
}


/* media 480 */
@media (max-width: 480px) {


/* MENU & GUI */

#scoreUI {
    position: absolute;
    top: 26px;
    left: 19px;
    width: 84px;
    height: 121px;
    text-align: center;
}

#scoreLabel {
}

#scoreNum {
}

/* ------------------ */

#basket {
    width: 85px;
    position: absolute;
    left: 45px;
    bottom: 0px;
    cursor: col-resize;
    z-index: 990;
}

/* HELPER  ARROW AND TEXT*/


#arrowContainer {
    position: absolute;
    bottom: 100px;
    width: 200px;
    text-align: center;
    height: 228px;
    left: 90px;
}

#arrowContainer>div {
    font-size: 18px;
    font-family: 'Bangers', cursive;
    color: #003ca6;
    top: 0px;
    left: 10px;
}

#arrow {
/*    display: none;*/
}
.start > img{
    width: 80%;
    margin-top: 16%;
}
.start > a{
    width: 150px;
    margin-bottom: 40%;
}
.cam-img input{
    width: 250px;
    height: 269px;
    opacity: 0;
    position: absolute;
    z-index: 1;
}
.cam-img .img-bord{
    width: 250px;
    height: 269px;
}
.cam-img .img-bord img{
    width: 91%;
    height: 256px;
    border-radius: 42px 46px 80px 78px;
}
form .form-sec{
    padding-top: 5%;
}
#scoreNum {padding-bottom: 0;}
#basketTrailer{
    bottom: 5%;
}
#logo{
    font-size: 16px;
}
#play img{
    width: 150px;
}
#gameOver {
    font-size: 35px;
}
.btn-playnow img {
    width: 150px;
}
form button {
    margin-bottom: 0;
}
.bg-daco img{
    width: 500px;
}
.score-sec{
    width: 86%;
}
.result-sec .name-col{
    width: 70%;
    padding: 17px 0px 28px 0px;
}
.score-sec .scoreTxt{
    padding: 0 0 12px;
}
.score-sec .scoreTxt p {
    font-size: 30px;
}
.cam-img .img-bord .frame-img{
    height: 269px;
}
.img-bord .result {
    height: 257px;
    width: 229px;
    border-radius: 37px 42px 84px 84px;
}
.qus-card{
    padding: 35px 20px;
    width: 320px;
    height: 420px;
}
.ans-area{
    height: unset;
    gap: 15px;
    margin-top: 10px;
}
.qus-card h4{
    font-size: 22px;
}
.ans-area div {
    gap: 9px;
}
.ans-area div input {
    width: 15px;
    height: 15px;
}
.ans-area .ratBtn{
    width: 45px;
    height: 45px;
}
.rat-form div input{
     width: 45px;
    height: 45px;
}
#timer .countTimer {
    font-size: 25px;
    padding: 0px 16px;
}
}