:root {
    /** variaveis */
    --primary: #dc143c;
    --secondary: #fff;
    --tertiary: ;
    --accent: #000;

    /* Material design
    Light: 300; 100; 50; 0;
    Dark: 100%, 900, 700, 800;
    */
    --statusBarColor: ;
    --appBarColor: ;
    --backgroundColor: ;
    --cardsColor: ;

    --lightBackgroundTextColor: #000;
    --primaryLightTextColorOpacity: 87%;
    --secondaryLightTextColorOpacity: 54%;
    --disabledLightTextColorOpacity: 38%;


    --darkBackgroundTextColor: #fff;
    --primaryDarkTextColorOpacity: 100%;
    --secondaryDarkTextColorOpacity: 70%;
    --disabledDarkTextColorOpacity: 50%;

    --activeIconOpacity: 54%;
    --inactiveIconOpacity: 38%;
}

.lightBackgroundTextColor {
    color: var(--lightBackgroundTextColor);
}

.lightBackgroundTextColor a {
    color: var(--lightBackgroundTextColor);
}

/* Global styles */
body {
    font-family: Arial, sans-serif;
}

/* Smooth scrolling to sections */
html {
    scroll-behavior: smooth;
}


/* serve para um item baixar junto com a tela, 
 o top = é a distância do item até o topo da página
 https://youtu.be/MxEtxo_AaZ4?t=458 */
.sticktest {
    position: sticky;
    top: 0px;
}


.btnPrimary {
    background-color: #fff;
    color: var(--primary);
    padding: 10px 20px;
    text-decoration: none;
    border: none;
}

.btnPrimary:hover {
    background-color: var(--primary);
    color: var(--darkBackgroundTextColor);
}


.loading-icon {
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


.invalid {
    opacity: 0;
    color: var(--primary);
    animation: fade-in 1s ease-in forwards;
}

@keyframes fade-in {
    0% {
        font-weight: bold;
        opacity: 0;
    }

    100% {
        font-weight: bold;
        opacity: 1;
    }
}