@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;400&family=Work+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;400&family=Palanquin+Dark&family=Work+Sans:ital,wght@0,400;1,700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
body{
    font-family: 'Inter', sans-serif;
    font-size: 100%;
    background-color: #00171F;
}
main{
    height: 85vh;
    margin-top: 3%;
}
header{
    height:15vh;
}
.custom-toggler-icon {
    background-color: white;
  }
.navbar-toggler-icon {
    color: white;
  }
.navbar-nav .nav-link {
    color: white;
}
.intro{
    display: flex;
    flex-direction: column;
    margin-left: 10%;
    margin-right: 10%;
   
}
.sobre-mim h1{
    font-size: 100%;
    margin: 1%;
    
}
.intro h1{
    color: #53DD6C;
    text-align: center;
}
.intro p {
    color: white;
    margin-top: 5%;
    text-align: justify;
}
.estudos h1{
    color: #53DD6C;
    text-align: center;
}
.tecnologia{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 3%;
   justify-content: center;
}
.tecnologia img{
    width: 13%;
    margin: 3%;
    padding: 3%;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 0 rgba(255, 255, 255, 0.2);
}
@media(min-width:280px) and (max-width:300px){
    main{
        height: 85vh;
        margin-top: 7%;
    }
    header{
        height:15vh;
    }
    .sobre-mim p{
        font-size: 90%;
    }
    .sobre-mim h1{
        font-size: 110%;
    }
    .tecnologia img{
        width: 16%;
        margin: 2%;
        padding: 2%;
        border-radius: 10px;
        box-shadow: 2px 2px 2px 0 rgba(255, 255, 255, 0.2);
    }
}
@media(min-width:301px) {
    .sobre-mim h1{
        font-size: 130%;
    }
}
@media(min-width:359px) and (max-width:370px) {
    main{
        margin-top: 7%;
    }
    .sobre-mim p{
        font-size: 100%;
    }
    .sobre-mim h1{
        font-size: 140%;
    }
    .tecnologia{
        margin-left: 1%;
        margin-right: 1%;
    }
    .tecnologia img{
        width: 20%;
        margin: 2%;
        padding: 2%;
        border-radius: 10px;
        box-shadow: 2px 2px 2px 0 rgba(255, 255, 255, 0.2);
    }
}
@media(min-width:400px) {
    main{
        margin-top: 5%;
    }
    .sobre-mim p{
        font-size: 100%;
    }
    .sobre-mim h1{
        font-size: 140%;
    }
    .tecnologia{
        margin-left: 1%;
        margin-right: 1%;
    }
    .tecnologia img{
        width: 14%;
    }
}
@media(min-width:500px) {
    .sobre-mim p{
        font-size: 105%;
    }
    .sobre-mim h1{
        font-size: 150%;
    }
    .tecnologia{
        margin-left: 5%;
        margin-right: 5%;
    }
    .tecnologia img{
        width: 12%;
    }
}
@media(min-width:600px){
    main{
        margin-top: 9%;
    }
}
@media(min-width:700px) {
    .sobre-mim p{
        font-size: 110%;
    }
    .sobre-mim h1{
         font-size: 150%;
     }
     .tecnologia{
        margin-left: 1%;
        margin-right: 1%;
    }
    .tecnologia img{
        width: 11%;
    }
}
@media(min-width:800px) {
    .sobre-mim p{
        font-size: 110%;
    }
    .sobre-mim h1{
        font-size: 150%;
     }
     .tecnologia{
        margin-left: 1%;
        margin-right: 1%;
    }
    .tecnologia img{
        width: 12%;
    }
}
@media(min-width:900px) {
    main{
        margin-top: 5%;
    }
    .sobre-mim p{
        font-size: 110%;
    }
    .sobre-mim h2{
        font-size: 150%;
     }
     .tecnologia{
        margin-left: 2%;
        margin-right: 2%;
    }
    .tecnologia img{
        width: 10%;
    }
}
@media(min-width:1000px) {
    body{
        font-size: 110%;
    }
    .sobre-mim p{
        font-size: 113%;
    }
    .sobre-mim h1{
        font-size: 165%;
     }
    .tecnologia{
        margin-left: 10%;
        margin-right: 10%;
    }
    .tecnologia img{
        width: 11%;
        
    }
}