/* HEADER */
header{
    margin-top: 10rem;
    height: 83vh;
}
header nav{
    background-color: #fff;
    z-index: 10;
}

header ul{
    list-style: none;
}
header .logo a img{
    margin-right: 1.2rem;
    transform: scale(1.5);
}
header .menu ul li{
    margin: 0 1.5rem;
    border-bottom: 2px solid transparent;
    font-size: 1.2rem;
}
header .menu ul li a {
    transition: color .8s ease;
    padding: 0!important;
}
header .menu ul li a.active{
    color: black!important;
    border-bottom: 2px solid #000!important;
    font-weight: bold;
}
header .menu ul li:hover a:not(.active){
    border-bottom:2px solid #919191!important;
    color: black!important;
}
header .menu ul li a:not(.active){color: #919191}

/* THEME */

header .menu ul .theme{
    box-sizing: border-box;
}
header .menu ul .theme input{
    opacity: 0;
    position: absolute;
}
header .menu ul .theme label{
    border-radius: 50px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 3px;
    position: relative;
    height: 26px;
    width: 60px;

    transition: background .3s linear;

}
body:not(.dark) header .menu ul .theme label{background-color: #ddd}
body.dark header .menu ul .theme label{background-color: #111}

body:not(.dark) header .menu ul .theme label .theme-content {background-color: #000}
body.dark header .menu ul .theme label .theme-content {background-color: #fff}
header .menu ul .theme label .theme-content{
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;

    height: 22px;
    width: 22px;

    transform: translateY(0px);
    transition: transform .2s linear;
}

header .menu ul .theme input:checked + label .theme-content{
    transform: translateX(33px);
}

.fa-moon{
    color: #f1c40f;
}
.fa-sun{
    color: #f39c12;
}

/* HEADER CONTENT */
header .header-content{
    margin: 4rem 0;
    height: 80vh;
  
}

/* LEFT */
header .header-content .left{
    height: 60vh;
    margin-top: 14rem;
}
header .header-content .left .content-top > *{
    padding: .25rem 0;
    text-align: justify;
    font-family: 'Lucida Sans', Verdana, sans-serif;
}
header .header-content .left .content-top > h3{
    color: #8a8a8a;
    font-size: 1.4rem;
}
header .header-content .left .content-top > h2{
    font-weight: bolder;
    font-size: 2.4rem;
}

header .header-content .left .content-button a{
    width: 20rem;
    font-size: 1.2rem;
    margin-top: 1rem;
    margin-bottom:3rem;
    padding: .7rem 0;
    border-radius: .8rem;
}
header  .header-content .left .social-media li a i{
    color: gray!important;
    transition: color .2s linear;
}
header  .header-content .left .social-media li#githubIcon:hover a i{color:black!important;}
header  .header-content .left .social-media li#linkedinIcon:hover a i{color:blue!important;}
header  .header-content .left .social-media li#whatsappIcon:hover a i{color:greenyellow!important;}
header  .header-content .left .social-media li#gmailIcon:hover a i{color:red!important;}
/* RIGHT */
header .header-content .right{
    height: 60vh;
    background-color: transparent;
    background-image: url('../img/fundo4.jpg');
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat;
    padding: 0;
}