@charset "UTF-8";

/* Fontes */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

@font-face {
    font-family: "android";
    src: url(../fonts/idroid.otf) format(opentype);
}

/* Reset nas tags */
* {
    margin: 0;
    padding: 0;
    box-sizing: 0;
}

body {
    background-color: var(--verde-clara-2);
    animation: aparecer 0.5s ease-out;
}

html {
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
}

/* Variáveis CSS */
:root {
    --fonte-padrao: Arial, Verdana, Helvetica, sans-serif;
    --fonte-destaque: "Bebas Neue", sans-serif;
    --fonte-android: "android", sans-serif;

    --verde-clara-1: #bcffda;
    --verde-clara-2: #84E1AD;
    --verde-neutra: #3BD27F;
    --verde-escura: #195B38;
    --cinza-escura: #222222;
}

/* Estilização da barrinha de rolagem */
::-webkit-scrollbar {
    width: auto;
}
::-webkit-scrollbar-track {
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: var(--verde-clara-1);
    border-radius: 1em;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--verde-neutra);
}
::-webkit-scrollbar-thumb:active {
    background-color: var(--verde-escura);
}

/* Efeito de aparecer página inteira */
@keyframes aparecer {
    0% {
        transform: translateX(-5px);
        opacity: 0;
    }
    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

/* Animações nos elementos */
@keyframes reveal {
    from {
        opacity: 0;
        clip-path: inset(45% 20% 45% 20%);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

@keyframes esquerda {
    from {
        opacity: 0;
        translate: -10vw 0;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}