*{
    box-sizing: border-box;
    color: #00060c;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.drop-down{
    position: fixed;
    display: none;
    right: 5%;
    top: 1%

}

.drop-down-content{
    display: none;
    background-color: white;
    right: 0%;
    position: absolute;
    box-shadow: 0px 0px 16px 5px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.drop-down-content a{
    color: blue;
}



.drop-down:hover .drop-down-content {
    display: block;
    
  }



.nav-bar{
    display: flex;
    width: 400px;
    justify-content: space-around;
    margin: auto 20px;
}
.nav-bar a{
    text-decoration:none ;
    font-size: larger;
    color: rgb(110, 110, 228);
}
.nav-bar a:hover{
    color: rgb(61, 61, 129);
}

.top-bar{
    display: flex;
    box-sizing: border-box;
    width: 100%;
    margin: 0%;
    padding: auto;
    justify-content: space-between;
    position: fixed;
    top: 0%;
    left: 0%;
    background-color:white;
    z-index: 4;
}

.top-bar h3{
    padding-left: 30px;
    font-style: italic;
    transform-origin:50% 50%;
    
    animation-name: color;
    animation-duration: 60s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

main{
    position: absolute;
    text-align: center;
   
    
   
    background-color: #e5e5e5;
}


.intro{
    background-image: url(images/back2.jpg);
    background-attachment:scroll;
    background-size: cover;
    background-repeat: no-repeat;
    top: 0%;
    left: 0%;
    right: 0%;
    width: 99%;
    margin: 0 auto 70px;
    padding: 100px 25% 100px 5%;
    
    border-bottom-left-radius: 50px;
    text-align: justify;
}

.intro h2{
    font-size: 1.5rem;
    
    
   
}

.intro h3{
 
    line-height: 1.5;

   
}

@keyframes slide {

   0%{margin-left: -50%}
   
   100%{margin-left: 0px}

    }

    @keyframes logos{
        0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
       }


    @keyframes color{
        0%{ color:#464646 }
        20%{ color:navy }
        40%{ color: brown }
        60%{color: green}
        80%{ color: blue }
    
    }


    



.intro h3{
   color: rgb(61, 61, 129);
    font-weight: bolder;
}

.social-icons{
    display: flex;
    gap: 30px;
    animation-name: slide;
    animation-duration: 4s;
    animation-timing-function: linear;
    
}

.fab{
    color: blue;
    font-size: 30px;
}
 .fab:hover{
    color: rgb(61, 61, 129);
 }

 
.project{
    background-color: white;
    width: 90%;
    margin: 50px auto;
    
    border-radius: 50px;
    padding: 2% 4% 2% 1%;
    display: flex;
    justify-content: space-between;
   
}

.project-ro{
    background-color: white;
    width: 90%;
    margin: 50px auto;
    border-radius: 50px;
    padding: 2% 4% 2% 1%;
    display: flex;
    justify-content: space-between;
   
}

.project-img{
    padding: 50px 10px;
    background-color: #464646;
    width: calc(90% / 2.2%);
    border-radius: 15px;
}


.project-img img{
    width: 100%;
    object-fit: cover;
    height: 60%;
}

.project2-img{
    padding: 30px 20px;
    background-color: #e5e5e5;
    width: calc(90% / 2.2%);
    border-radius: 15px;
}


.project2-img img{
    width: 100%;
    object-fit: cover;
    height: 60%;
}

.project3-img{
    padding: 20px 20px;
    background-color: #e5e5e5;
    width: calc(90% / 2.2%);
    border-radius: 15px;
}


.project3-img img{
    width: 100%;
    object-fit: cover;
    height: 60%;
    border: 5px solid white;

}

.project4-img{
    padding: 30px 10px;
    background-color: rgb(15, 15, 43);
    width: calc(90% / 2.2%);
    border-radius: 15px;
}


.project4-img img{
    width: 100%;
    object-fit: cover;
    border: 10px solid white;
}

.project-text{
    padding: 0% 10%;
    width: calc(90% / 2.2%);
    text-align: left;
    line-height: 2;

}



.year {
    display: flex;
    flex-direction: row;
}

.year ul{
    width:max-content;
    margin: auto;
}

.computer-lang{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: auto 5% 0%;
    cursor:not-allowed;
    color: blue;
    border-bottom: 5px solid #464646;;
    background-color: rgb(209, 218, 218);;

}

.view-btn{
    width: max-content;
    height: 60px;
    border-radius: 40px;
    border-bottom: 5px solid black;
    cursor: pointer;
    color: blue;
    font-size: larger;
    font-weight: bolder;
    background-color: rgb(177, 189, 189);
    

}
.view-btn:hover{
    background-color: rgb(214, 203, 203)
    

}


.about-me-text{
    width: 50%;
   
    padding:15px 1% 15px 5%;
    text-align: justify;
    line-height: 2;
    font-size: larger;
    

}

.cv{
    width: max-content;
    height: 60px;
    border-radius: 40px;
    border-bottom: 5px solid black;
    cursor: pointer;
    color: blue;
    font-size: larger;
    font-weight: bolder;
    background-color: rgb(209, 218, 218);
    text-align: center;

}

.cv:hover{
    background-color: rgb(177, 189, 189);
}
    


.languages{
    width: 45%;
   
    padding:30px 0px;
    text-align: left;

   

}

.languages button{

        margin: 5% 10% 5% 0%;
        background-color: rgb(209, 218, 218);
        border: 3px solid rgb(184, 190, 190);
        width: 95px;
        height: 105px;
        padding: auto;
        border-radius: 10px;

}

.languages button img{
    border-radius: 50%;
}

.framework{
        display: flex;
        justify-content: space-between;
        margin-right: 100px;

}

.skill{
    display: flex;
    justify-content: space-between;
        margin-right: 100px;


}
.drop-down-frame{
    position: relative;
}

.drop-down-frame-content{
    display: none;
    background-color: white;
    right: 0%;
    position: absolute;
    box-shadow: 0px 0px 16px 5px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    
    
}

.drop-down-frame:hover .drop-down-frame-content{
    display: block;

}
.drop-down-frame-content h3{
    color: blue;

}

#About-me {
    display: flex;
    justify-content: space-between;
    width: 100%;
   
    
    margin: 100px auto;
    border-top-right-radius: 100px;

}

form{
    display: flex;
    flex-direction: column;
    margin: 100px auto 30px;
    width: 400px;
    gap: 20px;
}

input{
    height: 50px;
    border-radius: 10px;
    border:none;
}
textarea{
    border:none;
    border-radius: 10px;

}

input[type=submit]{
    width: 200px;
    font-size: larger;
    font-weight: bolder;
    color: blue;
    margin: auto;
    border-radius: 10px;
}

input[type=submit]:hover{
    background-color: rgb(193, 193, 243);

}

#contact{
    background-color: blue;
    padding: 30px 10% 30px 10%;
    z-index: 2;
    border-top-left-radius: 50px;
    width: 100%;
    margin: auto;
    box-sizing: border-box;
}
#contact h1, #contact h2, #contact i{
    color: white;
    font-weight: bolder;
}
.design{
    width: 150px;
    height: 1px;
    border:2px solid black;
    margin: auto;
    border-radius: 10%;
}

.end{
    background-color: white;
    border-top-right-radius: 100px;
    width: 99%;
    margin: auto;
    box-sizing: border-box;
    
}

@media (max-width: 900px){

    .drop-down{
    
        display: block;  }

    .nav-bar{
        display: none;
    }

    .project{
        
        
        border-radius: 50px;
        padding: 4% ;
        display: flex;
        justify-content:center;
        flex-direction: column;
        gap: 30px;

    }

    .project-ro{
        
        
        border-radius: 50px;
        padding: 4% ;
        display: flex;
        justify-content:center;
        flex-direction: column-reverse;
        gap: 30px;

    }


    #About-me{

        flex-direction: column;
        justify-content: center;
        padding: 4%;
        text-align: center;
        gap: 30px;
    }

    .about-me-text{
        width: 100%;
        padding: 0%;
    

}

.languages{
    width: 100%;
   
    padding:0px;
    text-align: justify;
}

.intro{
    margin: 0%;
    padding: 15% 4% 4% 4%;

}

}