@font-face {
    font-family: 'GameFont';
    src: url('src_font/normal.ttf') format('truetype');
    font-weight: normal;  
    font-style: normal;
}

.of_the_nxt{
    display: none;
    align-items: center;           
    justify-content: center; 
    flex-direction: column
}

body{
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    
  
    background-image: url("src_imgs/2.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;


    display: flex;                
    align-items: center;           
    justify-content: center; 

}


.welcome{
    display: flex;
    flex-direction: column;       
    align-items: center;
    justify-content: center;

    height: 90vh;
    width: 70vw;

    padding: 1rem 1rem;
    margin: 1rem 1rem;

    border-radius: 5rem;

    overflow-y: auto;
    overflow-x: hidden; 
    
    background-image: url("src_imgs/1.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    opacity: 0.9;
    
    box-shadow: 0 0 20px 10px rgb(212, 255, 249);

}

.welcome::-webkit-scrollbar {
    display: none;
}

.main_welcome{

    background-image: linear-gradient(
    36deg, 
    #49fcffdb 0%,    
    #519cfd96 50%,   
    #ffffff 100%   
                         );
    padding: 1rem 1rem;
    margin: 1rem 1rem;
    height: 80vh;
    width: 60vw;
    border-radius: 4rem;

    text-align: center;



    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.472);

    overflow-x: hidden;

}

.main_welcome::-webkit-scrollbar {
    display: none; 
}

#first_wel{
    text-align: center;
    font-weight: bold;
    font-size: clamp(2rem, 3vw, 4rem);
    color: rgb(255, 255, 255);
}

.text_info{

    overflow-wrap: break-word;
    word-break: break-all;
    text-align: center;
    font-size: clamp(1rem, 1vw, 1rem);
    font-family: 'GameFont';
    font-weight: bold;
    color: rgb(0, 0, 0);
}
#about_us{
    font-size: clamp(2rem, 3vw, 3rem);
    color: rgb(0, 0, 0);
    text-decoration:underline rgb(255, 255, 255);
}

#start_btn{
    margin-top: 0.01rem;
    padding: 1rem 0.5rem;
    font-size: clamp(1.3rem, 2vw, 1rem);
    font-weight: bold;
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0.589);
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.4s ease;
}
#start_btn:hover{
    background-color: rgb(247, 247, 247);
    color: rgb(0, 0, 0);
    transform: scale(1.2);
}

#view_github{
    margin-top: 0.1rem;
    font-size: clamp(1rem, 1vw, 1rem);
    color: rgb(255, 255, 255);
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.589);
    padding: 1rem 1rem;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

#view_github:hover{
    background-color: rgb(247, 247, 247);
    color: rgb(0, 0, 0);
    transform: scale(1.2);
}

#school{
    margin-top: 0.1rem;
    font-size: clamp(1rem, 1vw, 1rem);
    color: rgb(255, 255, 255);
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.589);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
#school:hover{
    background-color: rgb(247, 247, 247);
    color: rgb(0, 0, 0);
    transform: scale(1.2);
}

.main_game{
    display: flex;
    flex-direction: column;       
    align-items: center;
    

    height: 75vh;
    width: 70vw;

    padding: 1rem 1rem;
    margin: 1rem 1rem;

    border-radius: 3rem;

    overflow-y: auto;
    overflow-x: hidden; 

    
    background-image: linear-gradient(
    25deg, 
    #000000bc 0%,
    #91fffb9a 50%, 
    #ffffff 100%  
    
);

    box-shadow: 0 0 20px 10px rgba(212, 255, 249, 0.672);
}

.main_game::-webkit-scrollbar {
    display: none; 
}


.outsde_main{
    display: flex;
    flex-direction: column;       
    align-items: center;
    justify-content: center;


    background-image: url(src_imgs/3.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;


    height:  12vh;
    width: 50vw;

    border-radius: 2rem;

    padding: 0.5rem 0.5rem;
    margin: 0.5rem 0.5rem;

    box-shadow: 0 0 20px 10px rgb(107, 107, 255);
    
    border: black solid 5px;

    overflow-y: auto;
    overflow-x: hidden; 
}

.outsde_main::-webkit-scrollbar {
    display: none;
}


.questions{
    display: flex;
    background-color: rgb(0, 0, 0);
    box-shadow: 0 0  20px 10px #ffffff;

    justify-content: center;
    align-items: center;

    border-radius: 2rem;
    padding: 1rem 1rem;
    
    height: 15vh;
    width: 65vw;

}

#show_question{
    background-image: linear-gradient(
    15deg, 
    #00fbff 0%,
    #ffe291cb 50%, 
    #ff8000 100%  
    
);
    box-shadow: 0 0  20px 10px #64e7496c;

    text-align: center;
    font-size: clamp(1rem, 1vw, 1rem);
    font-weight: bold;
    color: rgb(0, 0, 0);
    
    
    overflow-wrap: break-word;
    word-break: break-all;
    overflow-y: scroll;
    resize: none; 
    
    
    width: 70vw;
    height: 14vh;
    border-radius: 1rem;

    padding: 0.3rem 0.3rem;

    
}
#show_question::-webkit-scrollbar {
    display: none; 
}

.option1{
    display: flex;

    background-image: url("src_imgs/5.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    border: black solid 0.3rem;
    box-shadow: 0 0  20px 10px #ff0000;

    align-items: center;
    flex-direction: row; 

    border-radius: 2rem;
    padding: 1rem 1rem;
    
    height: 8vh;
    width: 54vw;
    margin-top: 1rem;



}

.option2{
    display: flex;
    background-image: url("src_imgs/4.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    border: black solid 0.3rem;
    box-shadow: 0 0  20px 10px #007bff;

    align-items: center;
    flex-direction: row; 

    border-radius: 2rem;
    padding: 1rem 1rem;
    
    height: 8vh;
    width: 54vw;
    margin-top: 1rem;



}


.option3{
    display: flex;
    background-image: url("src_imgs/6.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    
    border: black solid 0.3rem;
    box-shadow: 0 0  20px 10px #11ff00;

    align-items: center;
    flex-direction: row; 

    border-radius: 2rem;
    padding: 1rem 1rem;
    
    height: 8vh;
    width: 54vw;
    margin-top: 1rem;


}

.option4{
    display: flex;
    background-image: url("src_imgs/7.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    
    border: black solid 0.3rem;
    box-shadow: 0 0  20px 10px #fbe200;

    align-items: center;
    flex-direction: row; 

    border-radius: 2rem;
    padding: 1rem 1rem;
    
    height: 8vh;
    width: 54vw;
    margin-top: 1rem;


}




#answer_text_1 {
    flex-grow: 1;

    background-image: linear-gradient(
    180deg, 
    #ff0606fc 0%,
    #f3a42dd9 50%, 
    #012c2e 100%  
    
);
    opacity: 0.9;

    height: 11vh;
    width: 30vw;

    border-radius: 2rem;
    margin: 0.2rem;
    
    

    overflow-y: scroll;
    resize: none;
    border: none;

    box-sizing: border-box; 

    box-shadow: 0 0 2px 2px hsl(0, 100%, 63%);
    border: rgb(255, 0, 0) solid 1px;

    padding: 15px;
    font-size: 20px;
    font-weight: bold ;

    text-align: center;

    

}

#answer_text_1::-webkit-scrollbar {
    display: none; 
}

#answer_text_2 {
    flex-grow: 1; 
    
    background-image: linear-gradient(
    58deg, 
    #2306fffc 0%,
    #fb00f750 50%, 
    #ff1500 100%  
    
);
    opacity: 0.9;

    height: 11vh;
    width: 30vw;

    border-radius: 2rem;
    margin: 0.2rem;
    
    

    overflow-y: scroll;
    resize: none;
    border: none;

    box-sizing: border-box; 
    
    box-shadow: 0 0 2px 2px hsl(204, 100%, 63%);
    border: rgb(0, 123, 255) solid 1px;

    padding: 15px;
    font-size: 20px;
    font-weight: bold ;

    text-align: center;

}

#answer_text_2::-webkit-scrollbar {
    display: none; 
}

#answer_text_3 {
    flex-grow: 1; 

    background-image: linear-gradient(
    85deg, 
    #1c5f3f 0%,
    #4eff3ec5 50%, 
    #c2f5e0 100%  
    
);
    opacity: 0.9;

    height: 11vh;
    width: 30vw;

    border-radius: 2rem;
    margin: 0.2rem;
    
    

    overflow-y: scroll;
    resize: none;
    border: none;

    box-sizing: border-box; 
    
    box-shadow: 0 0 2px 2px hsl(102, 100%, 63%);
    border: rgb(64, 255, 0) solid 1px;

    padding: 15px;
    font-size: 20px;
    font-weight: bold ;

    text-align: center;

}

#answer_text_3::-webkit-scrollbar {
    display: none; 
}



#answer_text_4 {
    flex-grow: 1; 

    background-image: linear-gradient(
    280deg, 
    #f3ff06fc 0%,
    #f490ffa1 50%, 
    #a8fbff 100%  
    
);
    opacity: 0.9;

    height: 11vh;
    width: 30vw;

    border-radius: 2rem;
    margin: 0.2rem;
    
    

    overflow-y: scroll;
    resize: none;
    border: none;

    box-sizing: border-box; 
    
    box-shadow: 0 0 2px 2px hsl(63, 100%, 63%);
    border: rgb(255, 238, 0) solid 1px;

    padding: 15px;
    font-size: 20px;
    font-weight: bold ;

    text-align: center;

}

#answer_text_4::-webkit-scrollbar {
    display: none; 
}

.main_click {

    background-image: linear-gradient(
    50deg, 
    #74fdff 0%,
    #ffffffbf 50%, 
    #ff27be 100%  
    
);

    width: 11vw; 
    height: 11vh; 
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;

    border: #000000 dotted 1.5px;

    box-shadow: 0 0 5px 5px #ffffff;
    cursor: pointer;

    opacity: 0.8;

}

.main_click:hover{
    background-image: linear-gradient(
    50deg, 
    #f84d0f 0%,
    #ffffff 50%, 
    #53dbe3 100%  
    );

    border: rgb(255, 255, 255) solid 3px;
    
    scale: 1.3; 
    box-shadow: 0 0 5px 5px #000000;

    opacity: 1;
}


.option1 h4, .option2 h4, .option3 h4, .option4 h4 {
    display: flex;
    
    background-image: linear-gradient(
    50deg, 
    #ffffff 0%,
    #34fff8d4 50%, 
    #ff6b02 100%  
    
);

    flex-direction: row; 
    align-items: center;
    justify-content: center;

    color: #000000;


    border-radius: 1rem;

    font-size: 3rem;

    right: auto;

    border: black solid 1px;

    box-shadow: 0 0 20px 10px rgb(0, 0, 0);

}


.output_box{
    display: flex;
    align-items: center;
    flex-direction: row; 
    justify-content: space-between; 
}


#scoore{
   
    flex-grow: 1; 

    background-image: linear-gradient(
    20deg, 
    #331e32fc 0%,
    #f490ffa1 50%, 
    #6734bb 100%  
    
);
    
    height: 5vh;

    border-radius: 1rem;
    margin: 0.2rem;
    
    

    overflow-y: scroll;
    resize: none;
    border: none;

    box-sizing: border-box; 
    
    box-shadow: 0 0 5px 5px hsl(0, 0%, 100%);
    border: rgb(0, 0, 0) solid 2px;

    padding: 15px;
    font-size: 20px;
    font-weight: bold ;

    text-align: center;

}

#scoore::-webkit-scrollbar {
    display: none; 
}


.scoore_back{
    display: flex;
    align-items: center;
    justify-content: center;

    height: 14vh;
    width: 45vw;

    border-radius: 2rem;

    padding: 0.5rem 0.5rem;
    margin: 0.5rem 0.5rem;

    box-shadow: 0 0 20px 10px rgb(255, 255, 255);
    background-color: #000000;
}



.settings{
    display: flex;
    align-items: center;
    justify-content: center;



    border-radius: 1rem;

    padding: 0.5rem 0.5rem;
    margin: 0.5rem 0.5rem;

    background-image: linear-gradient(
    20deg, 
    #331e32fc 0%,
    #f490ffa1 50%, 
    #6734bb 100%  
    
                                    );
    box-shadow: 0 0 20px 10px rgb(255, 255, 255);

    border: #000000 solid 3px;
}


.set_btn{
    background-color: rgba(239, 77, 77, 0.718);
    color: rgb(255, 255, 255);
    font-size: clamp(1rem, 1vw, 1rem);
    font-weight: bold;
    padding: 0.5rem 1rem;
    margin: 0.2rem;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.set_btn:hover{
    background-color: rgb(247, 247, 247);
    color: rgb(0, 0, 0);
    transform: scale(1.2);
}


.image{
    display: flex;
    width: 60vw;
}