@import url('https://fonts.googleapis.com/css2?family=Expletus+Sans:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');

html,body {
    font-family:'Exo', 'Expletus Sans', Arial;
    width: 100vw;
    height: 100%;
    overflow-x: hidden;
    background-color: #000;
}

#header { 
position: fixed;
top: 0;
left: 0;
bottom: 0;
background: #076aa3;
width: 260px;
overflow-y: auto;
transition: all ease-in-out 0.4s;
padding: 0 10px;
z-index: 9997;
}

#header  .myprofilepicture {
    width: 160px;
    border-radius: 60%;
    margin: 22px auto;
    display: block;
}

#header h1{

    color: #fff;
    font-size: 35px;
    text-align: center;
}

#header h4{

    color: #fff;
    font-size: 14px;
    text-align: center;
}

#header .socials{
padding-top:15px
}

#header .socials a {
    text-decoration: none;
    font-size: 0.6rem;
    background-color: #076aa3;
    color: #fff;
    margin-right: 0.8rem;
    padding: 0.4rem;
    border-radius: 98%;
    transition: 0.5s;
}

#header .socials a:hover {
    background-color: lime;
}

footer {
    text-align: center;
    padding-top: 33px;
    font-size: 14px;
    color:#fff;
  }

#main{

    margin-left: 260px;
}

section#home{
    background-image: url('../assets/Giga/Wallpaper.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

    width: 100%;
    height: 100vh;

    
}

#menu-back {

text-decoration:none;
text-align:center;

}

section#home h3{
    font-size: 5rem;

    margin-left: 65px

}

i.menu-to-mobile{
    position: fixed;
    color: #fff;
    background-color: transparent;
    right: 1rem;
    top: 1.5rem;
    font-size: 2rem;
    border-radius: 3.32rem;
    cursor: pointer;
    z-index: 10;
    width: 35px;
    height: 35px;
    display: none;
    justify-content: center;
    align-items: center;
}

.menu_active{
    overflow: hidden;
}

.menu_active #header {

    left: 0;
}

@media(max-width: 1143px){
    
    #header{
        left: -260px;
    }

    i.menu-to-mobile{
        display: flex;
    }

    section#home h3{
        font-size: 4rem;
    }

    #main{
        margin-left: 0;
    }

    .campanha button{
        border-radius: 16%;
        width: 120px;
        height: 100px;
    }
    
}

*::-webkit-scrollbar{
    width: 8px;
}

*::-webkit-scrollbar-track{
    width: 10px;
    box-shadow: inset 0 0 .3rem #161f11;
    background-color: #076aa3;
}

*::-webkit-scrollbar-thumb{
    background-color: #032940;
}

section#contato h2{
    font-size: 32px;
    color: #fff;
}

section#contato .btn_envio{
background-color: #2a630d;
color: #fff;
}


.campanha{
    margin-right: 21px;
}

.campanha button{
    border-radius: 16%;
    width: 120px;
    height: 145px;
}

section {
    padding-left:15px
}
section#sobremim .textosobre {
    padding-left:25px
}

section#sobremim  img.myprofilepicture {
    width: 510px;
    border-radius: 62%;
    margin: 9px auto;
    display: block;
}