@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@200..700&family=Passion+One:wght@400;700;900&family=Sriracha&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&family=Passion+One:wght@400;700;900&family=Sriracha&display=swap');

/* 
    background: "#020617",
    emphisis: "#71ff7b",
    dark: "#141C2F",
    white: "#E6E6E6",
    formBorder: "#374151", 
*/

*{
    font-family: Arial, Helvetica, sans-serif;

    margin: 0px;
}
:root{
    --background: #020617;
    --emphisis: #71ff7b;
    --dark: #141C2F;
    --white: #E6E6E6;
    --formBorder: #374151;
}

h2 + h3 + p{
    color: var(--white);
}
body{
    background-image: linear-gradient(to bottom, #424e61, #020617);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    height: 100vh;
    width: 100vw;
}
header{
    text-align: center;
}
header > picture > img{
    border-radius: 100%;
    border: 1px solid var(--white);
    
    margin-top: 15px;

    transition: width 1s ease;
}
header #eu:hover{
    width: 220px;
}
header #oculto{
    margin-top: 5px;
}
header #nome{
    color: var(--white);
    font-family: "Oswald", sans-serif;
    font-size: 32px;

    padding-bottom: 1px;

    cursor: pointer;
}
header #cargo{
    color: var(--white);
    font-family: "Noto Sans", sans-serif;
    font-size: 19px;
    font-weight: 600;

    padding-bottom: 8px;
}
header #descrição{
    color: var(--white);
    font-family: "Noto Sans", sans-serif;
    font-size: 17px;
    text-align: center;

    margin-left: 10%;
    margin-right: 10%;
    max-height: 0;

    overflow: hidden;

    transition: all 2000ms ease-in;
}
#oculto:hover > #descrição{
    opacity: 1;
    max-height: 230px;
}


main{
    text-align: center;
    margin: auto;
    margin-top: 15px;
}
main #escuro{
    cursor: pointer;
}
main h2{
    color: var(--white);
    font-family: "Oswald", sans-serif;
    font-size: 28px;

    margin-bottom: 10px;
}
#escuro:hover > #obscuro{
    max-height: 90px;
    opacity: 1;
}
main #obscuro{
    overflow: hidden;

    max-height: 0;

    opacity: 0;

    transition: all 2000ms ease;
    
}
main .p{
    font-family: "Noto Sans", sans-serif;
    background-color: var(--dark);
    color: white;
    
    display: inline-block;
 
    padding: 10px;
    margin-left: 10px;
    margin-bottom: 5px;

    border-radius: 15px;

    transition: all 2000ms ease;
}
main .p:hover{
    font-size: 17px;
    background-color: var(--background);
    padding: 15px;
    margin-bottom: 10px;
    
}
main #proj{
    margin-top: 10px;
}
main #preto{
    cursor: pointer;
}
main h3{
    color: var(--white);
    font-family: "Noto Sans", sans-serif;
    font-weight: 700;

    padding-bottom: 5px;
}
#preto:hover > .inline{
    max-height: 230px;
    opacity: 1;
}
main .inline{
    background-color: var(--formBorder);
    overflow: hidden;
    display: inline-block;

    max-height: 0;
    opacity: 0;

    transition: all 4000ms ease;

    margin-bottom: 5px;
    margin-left: 5px;

    border: 3px solid black;
    border-radius: 10px;
}
main .space{
    padding: 10px;
}
main .space p{
    color: var(--white);
}
main .button{
    background-color: var(--dark);
    display: inline-block;

    width: 53%;
    height: 53%;

    border: 1px solid black;
    border-radius: 15px;

    padding: 6px;
    margin-top: 15px;

    transition: all 1s ease;
}
main .button:hover{
    background-color: var(--background);
    padding: 10px;
}
main .botão{
    color: white;
    text-decoration: none;
}
main #negro{
    cursor: pointer;
}
#negro:hover > #sociais{
    display: inline-block;
    max-height: 50px;
    opacity: 1;
}
main #sociais{
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 3000ms ease;
}
main .redes .img{
    transition: width 1000ms ease;
}
main .redes:hover > .img{
    width: 35px;
}