@import url('https://fonts.googleapis.com/css2?family=Philosopher&family=Dancing+Script:wght@700&family=Lato:ital,wght@1,300&family=Merienda:wght@700&display=swap');

html,body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    width: 100%;
    font-family: 'Lato', sans-serif;
}
.navbar{
    display: flex;
    justify-content: space-between;
    background: #000022;
    padding-right: 30px;
    color: #fff;
}
.navbar ul{
    list-style: none;
    text-decoration: none;
   
}
nav .name-title{
    display: inline-flex;

}
.name-title li{
    padding: 3px;
    font-family: 'Dancing Script', cursive;
    font-size: 24px;
    font-weight: 900;
}
nav .nav-options{
    display: inline-flex;
}
.nav-options li{
    padding: 0.5rem 1.4rem;
    font-size: 22px;
    font-family: 'Dancing Script', cursive;
}
.nav-options li:hover{
    border-bottom:2px solid #fff;
}
.top-container{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    padding-bottom: 2rem;
}
.top-container img{
    width: 30%;
    height: 30%;

}
.top-container h1{
    font-family: 'Dancing Script', cursive;
    padding : 2rem;
    border-bottom: 1px solid black;
}
.top-container p{
    text-align: center;
}
#name{
    font-size: 6rem;
    border-bottom: none;
}
.filter{
    filter: grayscale(100);
}
.top-title{
    margin-top: -20px;
    font-style: italic;
    font-weight: 600;
}
.technologies {
    text-align: center;
    background: #EBE9E9;
    padding: 40px;
}
h1{
    font-size: 42px;
}
p{
    font-size: 28px;
}
.skill-list{
    display:flex;
    list-style: none;
    justify-content: center;
}
.skill-list li{
    padding: 4px;
}
.tailwind{
    margin-top: 8px;
    }
.projects{
    text-align: center;
    padding: 40px;
    background: #fff;
}
.btn {
    font-size: 14px;
    width: 120px;
    height: 45px;
    background-color: #E28413;
    padding: 8px;
    border-radius: 8px;
    border: none;
    outline: none;
    cursor: pointer;}
a{
    text-decoration: none;
    color: #fff;
}
.blogs{
    text-align: center;
    padding: 40px;
    background: #EBE9E9;
}
footer{
    text-align: center;
    background: #000022;
    padding-top: 20px;
    padding-bottom: 10px;
    color: #fff;
}
.icons{
    display: flex;
    justify-content: center;
    flex-direction: row;
    padding: 10px;
}
.icons img{
    transition: .1s;
    height: 45px;
    width: 50px;
    padding: 10px;
}
footer li{
  list-style: none;
}

.element-list{
    max-width: 48rem;
    margin: auto;
    padding: 2rem;
}
.element-list ol{
    list-style: none;
}

.element-list  a{
    color:#FBF5F3;
    margin-right: 1rem;
    padding: 0.5rem;
    background-color: #000022;
    border-radius: 0.75rem;
}
.element-list  a:hover{
    border: 1px solid #000022;
    background-color: #FBF5F3;
    color: #000022;

}
.element-list li{
    background: #EBE9E9;
    padding: 1.5rem;
    margin: 2rem;
    border-radius: 1rem;
    border: 2px solid #000022;
}
.element-list li h1{
    font-size: 2rem;
}
.element-list li p{
    font-size: 1.25rem;
}
@media screen and (max-width:600px) {

 .top-container img{
    width: 80%;
    height: 75%;
    
}
  .navbar{
      padding-right: 5px;
    
  }#name{
    font-size: 2.45rem;

}
  nav .name-title{
      padding-left: 5px;
  }
 .name-title li{
     font-size: 17px;
     padding: px 0px;
 }
 .nav-options li{
     font-size: 18px;
     padding: 5px;
 }
 .element-list{
    max-width: 90%;
    padding: 1rem;
}
.element-list li{
margin: 2rem 1rem;
} 
.element-list ol{
    padding: .5rem;
}
}