:root {
    --color1: #F0F0F0;
    --color2: #333;
    --color3: #555;
    --color4: #3ae4b1;
    --colorLinear:linear-gradient(purple,aqua);
    --fontFamily:"Cascadia Code",sans-serif;
}

* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body{
    background: var(--color1);
    font-family:var(--fontFamily);
}

/***************************************
estilizando o HERO
****************************************/
#inicio{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    background:var(--color2);
    justify-content:center;
    align-items:center;
    opacity:1;
    transition: opcity 1s ease-in-out;
}

#imgHero{
    width:500px;
    height:500px;
    border-radius:50%;
    margin-top:20px;
    animation: rodar 1s ease-in-out;
}

@keyframes rodar{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg)
    }
}



#titulo{
    margin-top: 100px;
    text-align:center;
    font-size:3rem;
    background:var(--colorLinear);
    text-transform:uppercase;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    animation: efeito 1s ease-in-out;
}

@keyframes efeito {
    from{
        opacity:0;
    }
    to{
        opcatity:1;
        transform:translateY(-10px)
    }
}



header {
    background:var(--color3); /* COR DO FUNDO*/
    color:var(--color4); /* COR DA FONTE*/
    padding:20px; /* ESPAÇAMENTO*/
    display:flex; /* DEIXA UM DO LADO DO OUTRO */
    justify-content:space-between; /* AJUSTA*/
    align-items:center;
    border-radius:50px;
}

header nav ul {
    list-style:none;
    display:flex;
    align-items:center;
    gap: 20px;
}

header #logo{
    width:70px;
    height:70px;
    border-radius:50%;
}



header nav ul li a{
    text-decoration: none;
    color:var(--color1);
    font-weight:800;
}

header nav ul li a:hover{  
    color:var(--color4);
    text-decoration:underline;
    text-transform:uppercase;
}

.cor{
    width:30px;
    height:30px;
    border-radius:50px;
    background:var(--colorLinear)
}


#texto {
    margin-top: 100px;
    text-align:center;
    font-size:2rem;
    background:var(--colorLinear);
    text-transform:uppercase;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}