*{
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
}

body{
    padding: 6vh;
    background-color: #F8F4E1;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.fixedIcons{
    position: fixed;
    display: flex;
    flex-direction: column;
    gap:3vh;
    right: 3px;
    bottom: 40px;
}

.fixedIcons div img{
    height: 10vh;
    background-color: #F8F4E1;
    border-radius: 15px;
    cursor: pointer;
}
/* home */

.mainContainer{
    background-image: url('../images/baclgroundimage.jpg');
    background-repeat: no-repeat;
    background-size:cover;
    height: 88vh;
}

nav{
    display: flex;
    list-style: none;
    justify-content: space-around;
    background-color: rgba(28, 18, 8, 0.3);
}

.mainContainer nav h1{
    color: #F8F4E1;
    text-shadow: #543310 3px 3px 2px;
    font-size: 6vh;
    padding: 1vh;
}
.mainContainer nav .navlist {
    display: flex;
    justify-content:space-around;
    list-style: none;
}

.mainContainer nav .navlist li {
    font-size: 3.6vh;
    line-height: 9vh;
    border-bottom:3px solid transparent;
}

.mainContainer nav .navlist li a{
    color: #F8F4E1;
    text-decoration: none;
    padding: 3vh 4vh 3vh 4vh;
    
}

.mainContainer nav .navlist li:hover{
    background-color:rgba(175, 143, 111,0.5);
    border-bottom:3px solid #F8F4E1;
}

.mainContainer nav .open,.close{
    position: absolute;
    top:8vh;
    right: 6vh;
    color:#F8F4E1;
    font-size: 5vh;
    cursor: pointer;
    line-height: 6vh;
    display: none;
    z-index: 7;
}

nav .icons{
    padding: 4vh;
    font-size: 7vh;
    cursor: pointer;
    display: none;
}
nav .icons .fa-envelope:hover{color:rgb(255, 128, 0) }
nav .icons .fa-telegram:hover{color:rgb(240, 117, 138) }
nav .icons .fa-instagram:hover{color:rgb(0, 145, 255)}
nav .icons .fa-github:hover{color:green }

nav .icons i{
    color: #F8F4E1;
}

.intro{
    width: 100%;
    height: 79vh;
    display: flex;
    align-items: center;
    padding: 17vh;
    font-size: 8vh;
    color: #281909;
}
.intro span{
    font-weight: 900;
    font-size: 12vh;
}

/* gameBox */

.gamesBox{
    display: block;
    text-align: center;
    height:max-content;
    margin: 15vh;
}

.gamesBox h1{
    margin-bottom: 6vh;
    font-size: 9vh;
    color: #3a230b;
    border-bottom:2px solid #543310;
}
.gamesBox .games{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap:10vh; 
}

.gamesBox .games div{
    background-color: #74512D;
    text-align: center;
    padding: 6vh;
    cursor: pointer;
    border: 2px solid #281908;
    box-shadow: #4e4944 3px 3px 7px 4px;
    border-radius: 10px;
    font-size: 4vh;
    color: #F8F4E1;
}

.gamesBox .games div:hover{
    transform: scale(1.1);
}

.gamesBox .games div img{
    height: 30vh;
    border-radius: 50%;
    border:3px solid #281908;
}

.gamesBox .games div i{
    font-size: 7vh;
    margin: 2vh;
}

.gamesBox .games div i:hover{
    color: #281908;
    border-radius: 50%;
    transform: scale(1.2);
}

/* courses */

.courses{
    height: max-content;
    text-align: center;
    color: #F8F4E1;
    background-color: #543310;
    padding: 6vh;
    font-size: 4.5vh;
}
.courses h1{
    border-bottom:2px solid #F8F4E1;
}


.courses .courseList{
    display: flex;
    justify-content: center;
    padding: 4vh;
    flex-wrap: wrap;
    margin: 5vh;
    border-radius: 50%;
    gap:8vh;
}

.courses .courseList button{
    border-radius: 50%;
    cursor: pointer;
    box-shadow: #281908 3px 3px 5px;
}
.courses .courseList button img{
    height: 250px;
    border-radius: 50%;
    outline: 2px solid #F8F4E1;
    
}
.courses .courseList button:hover{
    transform: scale(1.1);
}

.courses .notes{
    background-color: #876e54;
    border-radius: 30px;
    padding: 4vh;
    color: #281908;
    margin: 4vh;
}

.courses .notes h2{
    margin: 3vh;
    border-bottom:2px solid #3a230b;
}

.courses .pdf{
    display: flex;
    gap: 4vh;
    margin: 4vh;
    align-items: center;
    justify-content: center;
}

.courses .pdf img{
    height: 200px;
    border-radius: 10px;
    border: 1.5px solid #281908;
    box-shadow: #281908 4px 6px 5px;
}

.hide{
    display: none;
}

/* Mini project */

.background{
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    background-image: linear-gradient(to right ,#74512D, #281908);
    clip-path: circle(50% at 0 50%);
    transition: clip-path 3s ease ;
}

.miniProject{
    display: flex;
    flex-direction: row;
    margin: 7vh 0 7vh 0;
    height: 93vh;
    text-align: center;
    position: relative;
}

.miniProject:hover .background{
    clip-path: circle(150% at 0 0);
}

.bmi{
    flex: 2;
    align-self: center;
    color: #F8F4E1;
    font-size: 6vh;
}

.bmiImg{
    flex:3;
    align-self: center;
    text-shadow: 
    -1px -1px 0 #F8F4E1, /* Top-left shadow */
    1px -1px 0 #F8F4E1,  /* Top-right shadow */
    -1px 1px 0 #F8F4E1,  /* Bottom-left shadow */
    1px 1px 0 #F8F4E1; 
}

.miniProject .bmiImg img{
    height: 60vh;
    text-align: center;
    box-shadow: rgba(248, 244, 225,0.7) 5px 5px 15px 10px;
    margin: 3vh;
    border: 2px solid #281908;
    border-radius: 10px;
    cursor: pointer;
}

.bmiImg a{
   color: #3a230b;
}

.aboutSection{
    text-align: center;
    margin-top: 10vh;
    margin-bottom: 6vh;
    display: flex;
    flex-direction: column;
    gap: 3vh;
    user-select: none;
    height: max-content;
}

.aboutSection h1{
    font-size: 8vh;
    color: #281909;
    border-bottom:2px solid #543310;
}
.aboutSection p{
    color: #3a230b;
    padding: 3vh;
    line-height: 7vh;
    font-size: 3.5vh;
}

/* contact us */

.contact{
    color: #F8F4E1;
    text-align: center;
    height: max-content;
    padding: 7vh;
    background-color: #543310;
}

.contact .contactUs{
    margin: 7vh;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.contact .contactUs div{
    margin-bottom: 3vh;
    text-align: center;
    align-content: center;
    width: 300px;
    min-height: 300px;
    max-height: fit-content;
    padding: 4vh;
    font-size: 3vh;
    box-sizing:content-box;
    
}

.contact .insta,.tele{
    background-color: #876e54;
    color: #281909
}

.contact .mail{
    background-color: #281909;
    color: #876e54;
}

.contact .contactUs div i{
    font-size: 12vh;
    margin-bottom: 6vh;
}

.contact .contactUs div i:hover{
    transform: scale(1.2);
}
.contact .contactUs div a{
    text-decoration: none;
    color: inherit ;
}

.contact .contactUs div:hover{
    transform: scale(1.1);
    cursor: pointer;
}

@media (max-width:900px){
.fixedIcons{
    gap: 2vh;
}

    .fixedIcons div img{
        height: 35px;
        border-radius: 10px;
    }

    .mainContainer nav .navlist{
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 10;
        background-color:#281908;
        display: none;
    }

    .mainContainer nav .open{
        display: block;
        position: fixed;
        background-color: rgba(84, 51, 16,0.6);
        border-radius: 7px;
        width:7vh;
        text-align: center;
    }
    .mainContainer nav .navlist li:hover{
        transform: scale(1.2);
        border-bottom: transparent;
    }
    .close{
        display: block;
    }
    nav .icons{
        display: block;
    }

    nav{
        border-bottom:3px solid #543310;
    }
    .intro{
        text-align: center;
        font-size: 5vh;
        padding: 3vh;
    }
    .intro span{
        font-size: 8vh;
    }

    .gamesBox{
        margin:5vh;
    }
    .gamesBox .games div{    
        padding: 3vh 0 3vh 0;
        width: 220px;
        height: max-content;
    }
     
    .gamesBox .games div img{
        height: 22vh;
    }

    /* courses */

    .courses h1{
        font-size: 5vh;
    }

    .courses .courseList{
        padding: 3vh 0 0 0;
 
    }
    .courses .courseList button img{
        height: 100px;
    }

    .courses .notes, .courses{
        padding: 2vh;
        margin: 2vh;
        font-size: 3vh;
    }
    
    .courses .notes h2{
    margin: 1vh;
    font-size:4vh;
    }

    .courses .pdf{
        gap: 2vh;
    }
    .courses .pdf img{
        height: 80px;
    }
/* bmi */
    .miniProject{
        flex-direction: column;
        padding-bottom: 4vh;
    }

    .bmi {
        font-size: 2.6vh;
        flex: 1.1;
        margin-top: 3vh;
    }

    .background{
        clip-path: circle(35.4% at 50% 0);
    }
    .miniProject .bmiImg a{
        font-size: 2vh;
    }

    .miniProject .bmiImg img{
        height: 250px;
        margin-bottom: 5vh;
    }

    /* about section */

    .aboutSection h1{
        font-size:4.5vh;
    }
    .aboutSection p{
        font-size: 2vh;
        padding: 1vh;
        line-height: 4vh;
    }

    /* contact */
    .contact{
        display: none;
    }

}

@media (max-width:450px){
    body{
        padding: 4vh;
    }
    .intro{
        text-align: center;
        font-size: 4vh;
        padding: 4vh;
    }
    .intro span{
        font-size: 5vh;
    }
    .mainContainer nav .open{
        font-size: 3vh;
        top:6vh;
        right: 4vh;
    }

    .gamesBox h1,.gamesBox div i{
        font-size: 3vh;
    }
    .gamesBox div p{
        font-size: 2.5vh;
    }

    .courses h1{
        font-size: 4vh;
    }

    .courses .pdf img{
        height: 50px;
    }

}