*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 100%;
    color: var(--white-color);
    text-align: center;
}
:root{
    --dark-color:#002c65;
    --light-color:#648cf6;
    --white-color: #e6f4f1;
    --additional: #e39e22;
}
body{
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.title{
    background-color: var(--light-color);
    padding: 10px;
    font-size: 5vw;
    height: fit-content;
}
section{background-color: var(--dark-color);}
/*intro*/
#intro{
    height: 100vh;
    background-image: url('../assets/bg.jpg');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 80%;
    height: fit-content;
    background-color: #011939a3;
    padding: 5vw;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.container img{
    border-radius: 50%;
    height: 20vw;
    width: 20vw;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}  
.container .p{width: 60%;}
/*skills*/
#skills{
    font-size: 5vw;
    padding-bottom: 30px;
}
.set{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}
.skill{
    width: auto;
    padding: 8px;
    background-color: var(--light-color);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 5%;
    margin-bottom: 20px;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    margin:5px;
    font-size: 44px;
}
.skill i { font-size: 60px }
.skill:hover{ background-color: var(--dark-color-color); }
/*Awards*/
#awards{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#awards ul{
    width: fit-content;
}
#awards li{
    text-align: left;
    padding: 10px;
    width: fit-content;
    font-weight: 500;
}
#awards a{
    color: var(--additional);
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    text-decoration: none;
}
#awards a:hover{
    text-decoration: underline;
}
/*projects*/
#project p{
    color: var(--additional);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 86%;
}
.ps{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    height: fit-content;
    padding: 20px;
}
.project{
    padding: 10px;
    background-color: var(--additional);
    width: 30%;
    border-radius: 5px;
}
.descript{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.descript h2{font-size: max(3vw, 25px); line-height: 1;}
.descript span{font-size:  max(2vw, 16px);}
.descript a{
    text-decoration: none;
    padding: 10px;
    border: solid 1px white;
    border-radius: 4px;
    transition: 0.7s;
    font-size: 3vw;
    width: 80%;
    margin-top: 5px;
}
.descript a:hover{background-color: var(--light-color); border-color: var(--light-color);}
/*footer*/
footer{
    background-color: var(--light-color);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 20px;
}
footer ul{
    list-style: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 40%;
}
footer li{
    padding: 10px;
    width: fit-content;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}
footer li:hover{background-color: var(--additional);}
footer img{
    height: 4vw;
    width: 4vw;
}
/*other devices*/
@media (max-width: 768px) {
    .container{ flex-direction: column; }
    .skill i, .skill h2{ font-size: 7vw; }
}
@media (max-width: 470px) {
    footer{flex-direction: column;}
    footer ul{width: 100%;}
    footer img{height: 40px; width: 40px;}
    .project{width: 80%; margin-top:10px;}
}