/* Start Variables */
:root {
    --main-color: #19c8fa;
    --transparent-color: rgb(15 116 143 / 70%);
    --background-color:#f7f7f7;
    --sectionPadding: 90px;
}

/* End Variables */
/* Start Global Rules */
*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 ;
    margin: 0 ;
}

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;

}
::-webkit-scrollbar {
    width: 16px;
  }
  
  
::-webkit-scrollbar-track {
    background-color: #f0d8d8;
  }
  
::-webkit-scrollbar-thumb {
    background-color: #cac7c3;
    border-radius: 100px;
  }
  

  html {
    scrollbar-width: thin; 
  }
  
 

body {
    font-family: "Work Sans", sans-serif;
    background-color: var(--background-color);
    max-width: 100vw;
    text-align: right;
    
}


ul {
    list-style: none;
}
a{
    text-decoration: none;
    color: black;
}

/* End Global Rules */

/* index */
/* start nav */
body.home-page{
    background-image: url(../assets/home.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
}

@media only screen and (max-width: 767px) {
    body.home-page {
        background-size: auto;
        background-position: 40% 41%;
    }
}

.container.home{
    min-height: calc(100vh - 15vh);
}
.container a{
    width: 80%;
}
.container button{
    font-size: 145%;
    padding: 1.5% 10%;
    border-radius: 30px;
    background-color: rgb(233,189,93);
    width: 100%;
}
.container button:hover{
    background-color: #754b19;
}

.container button:active {
    background-color: #a39e7a !important;
}
.holder .image{
    height: 10rem ;
}
.holder img{
    height: 9rem;
}
.image h1{
    background-color: #6f6868;
    color: white;
    padding: 10px;
    border-radius: 7px;
}
/* start corse */
body.basket-page{
    background-image: url(../assets/page2.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 60%;
    min-height: 100vh;
}

@media only screen and (max-width: 767px) {
    body.basket-page {
        /* background-size: auto; */
        background-position: 40% 41%;
    }
}
body.basket-page .container{
    min-height: 75vh;
}

.holder .book{
    height: 7rem;
}

.image-back-home{
    height: 9rem;
    width: 6rem;
    /* overflow: hidden; */
}
.image-back-home img{
    height: 6rem;
}
.Back-icon{
    transition: linear all 0.2s;
}
.Back-icon:hover{
    padding-right: 4px;
}
.Home-icon{
    transition: linear all 0.1s;
}
.Home-icon:hover{
    transform: scale(1.1);
}
/* start Exam */
body.Exam-page{
    background-image: url(../assets/qustion.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 60%;
    min-height: 100vh;
}

@media only screen and (max-width: 767px) {
    body.Exam-page {
        /* background-size: auto; */
        background-position: 40% 41%;
    }
}
body.Exam-page .container{
    min-height: 75vh;
}


.holder2{
    color: white;
    border: 3px solid gray;
    border-radius: 8px;
    background-color: rgba(158, 142, 142, 0.747);
    
}
.choice-hold{
    /* font-size: 145%; */
    margin: 2px;
    position: relative;
    padding: 10px 20px;
    border-radius: 30px;
    background-color: rgb(233,189,93);
    width: 43% !important;
    color: white;
    cursor: pointer;
    user-select: none;
    font-size: 130%;
}
.choice-hold input{
    width: 25%;
    height: 17px;

}
.choice-hold input {
    display: none;
}

.choice-hold.selected {
    background-color: #e0e0e0; /* Change the background color when selected */
}


/* instructions */
.hold-instruction{
    height: 13rem;
}
.holder2 img{
    width: 34%;
}
.holder2 img,
.holder2 .myvideo{
    max-width: 45%;
    border: 1px solid white;
    height: 100%;
    border-radius: 7px;
}

.instruction-text{
    padding: 10px 20px;
    border-radius: 7px;
    background-color: rgba(158, 142, 142, 0.747);
    width: 43%;
    height: auto;
    color: white;
    font-size: 130%;
}
.instruction-page .holder2{
    color: white;
    border: none;
    border-radius: none;
    background-color: transparent;
    /* padding: 0; */

}
.choice-hold button{
    width: 100%;
    border: none;
    height: 100%;
    color: white;
    padding: 16px 10px;
}
.list_of_in_structure-page .choice-hold{
    padding: 0;
    
}
.list_of_in_structure-page button{
    font-size: larger;
}
.your-answer{
    background-color: rgba(158, 142, 142, 0.747);
    /* padding: 10px; */
    border-radius: 7px;
}
.your-answer p{
    padding: 4px;
    margin: 0;
    font-size: 22px;
}

body.handball{
    background-image: url(../assets/handballball.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 0%;
    min-height: 100vh;
}

@media only screen and (max-width: 767px) {
    body.handball {
        /* background-size: auto; */
        background-position: 40% 41%;
    }
}

.intro-page{
    background-image: url(../assets/home.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 0%;
    min-height: 100vh;

}