/* import used font  */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk&display=swap');

body{
    background-color: #202124;
    font-family: 'Schibsted Grotesk', sans-serif;
    color: white;
    margin: 0%;
    padding: 0%;
    text-align: center;
}
.container{
    text-align: center;
    width: fit-content;
    max-width: 95vw;
    min-width: 70vw;
    padding: 1%;
    margin: 2% auto;
    background: rgba(0, 0, 0, 0.219);
    box-shadow: 0 8px 32px 0 rgba(189, 42, 42, 0.37);
    backdrop-filter: blur( 10.5px );
    -webkit-backdrop-filter: blur( 10.5px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}
.container .banner_img{
    width: 60vw;
    height: 50vh;
}
.inputForm{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
}
.inputForm select{
    width: 15vw;
    height: 7vh;
    border-radius: 15px;
    font-size: x-large;
    font-weight: bolder;
    color: #ff1818;
    text-align: center;
}

.inputBlock{
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 1vh;
}
.inputBlock label{
    font-size: larger;

}

.btn {
	box-shadow: 3px 4px 0px 0px #ff1717f3;
	background:linear-gradient(to bottom, #ff3333b9 5%, #FF3333 100%);
	background-color:#FF3333;
	border-radius:5px;
	border:1px solid #ff2323;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:45px;
	font-weight:bold;
	padding:12px 44px;
	text-decoration:none;
	text-shadow:0px 1px 0px #FF3333;
    margin-top: 4vh;
}
.SqueezeButton_section{
    display: flex;
    gap: 2vw;
    justify-content: center;
    align-items: end;
}
.loaderImg{
    border: 10px solid #f3f3f3; /* Light grey */
    border-top: 10px solid #ff1b1b; /* red */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite; /* Apply animation */
}

@keyframes spin {
  0% { transform: rotate(0deg); } /* Start position */
  100% { transform: rotate(360deg); } /* End position */
}
.btn:hover {
	background:linear-gradient(to bottom, #ff1b1b 5%, #FF3333 100%);
	background-color:#ff1818;
}
.btn:active {
	position:relative;
	top:1px;
}

/* footer */
footer{
    width: 100%;
    color: #ff2323;
    font-size: medium;
    margin-top: 5vh;
}

/* question page */
.Qindex{
    border: 5px solid white;
    padding: 1% 2%;
    width: fit-content;
    margin: 0% auto;
    border-radius: 15px;
    background-color: #FF3333;
}
.answers{
    display: flex;
    flex-direction: column;
    width: 40vw;
    margin: 0% auto;
    
}
.answers .answer{
    background: rgba( 255, 255, 255, 0.6 );
    box-shadow: 0 8px 30px 0 rgba(250, 9, 9, 0.37);
    backdrop-filter: blur( 8px );
    -webkit-backdrop-filter: blur( 8px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    text-align: left;
    margin-top: 2vh;
    padding: 1%;
    font-size: xx-large;
    color: black;
    font-weight: bolder;
}
.answer input{
    width: 4vw;
    height: 4vh;
    color: #ff1b1b;
}
.answer:hover {
    cursor: pointer;
    position:relative;
	top:1px;
    left: 5px;
    background: rgba(255, 37, 37, 0.767);
    border: 3px solid rgb(255, 255, 255);
    color: white;
}
.Qcount{
    margin-left: 2vw;
    font-size: medium;
}
.finish_section{
    text-align: center;
    padding: 0vh 3vh;
}
.finish_img{
    width: 80vw;
    height: 50vh;
}


@media screen and (max-width:650px) {
    .container{
        margin: 2% auto;
        height: fit-content;
        padding: 5vh 2vw;
    }
    .container .banner_img{
        width: 90vw;
        height: 50vh;
    }
    .btn{
        font-size: 35px;
    }
    .inputForm{
        gap: 3vw;
    }
    .inputForm select{
        width: 27vw;
        height: 7vh;
        border-radius: 15px;
        font-size: large;
        font-weight: bolder;
        color: #ff1818;
        text-align: center;
    }
    .answers{
        width: 95vw;
        height: fit-content;
        
    }
    .answers .answer{
        height: fit-content;
    }
    .loaderImg{
        width: 20px;
        height: 20px;
    }
    .SqueezeButton_section{
        gap: 4vw;
        align-items: center;
    }
    .finish_img{
        width: 90vw;
        height: 30vh;
    }
}