@import url('../css/font_global.css');

:root{
    --imgSlider: 400px;
}

html {
    font-family: 'Nebulica-Black', 
                 'Nebulica-Bold', 
                 'Nebulica-ExtraBold', 
                 'Nebulica-ExtraLight',
                 'Nebulica-Medium',
                 'Nebulica-Thin', 
                 'Nebulica-VF', 
                 'Montserrat', 
                 sans-serif;
    width: 100%;
    font-optical-sizing: auto;
}


h1 {
    font-family: 'Nebulica-Medium', sans-serif; 
}

h2 {
    font-family: 'Nebulica-Bold', sans-serif;
}

h3 {
    font-family: 'Nebulica-Medium', sans-serif;
}

p, a {
    font-family: 'Nebulica-ExtraLight', sans-serif;
}

a:hover {
    font-family: 'Nebulica-ExtraBold', sans-serif;
}

small {
    font-family: 'Nebulica-Thin', sans-serif;
}

strong, b {
    font-family: 'Nebulica-Bold', sans-serif;
}

em, i {
    font-family: 'Nebulica-ExtraLight', sans-serif;
}

blockquote {
    font-family: 'Nebulica-VF', sans-serif;
}

code, pre {
    font-family: 'Nebulica-Thin', sans-serif;
}

main{
    padding-top: 90px;
}

.strong{
    font-weight: bold;
}

.selected{
    text-decoration: none;
    font-size: 5.5rem;
    font-weight: bolder;
    color: var(--branco);
}

@media only screen and (max-width: 1400px) and (min-width: 901px){
    .selected{
        font-size: 4rem;
    }
}

@media only screen and (max-width: 900px) {
    .selected{
        font-size: 3rem;
    }
}

@keyframes moverDaEsquerdaParaDireita {
    from {
        transform: translateX(-100%); 
    }
    to {
        transform: translateX(0); 
    }
}

@keyframes deslizarDaDireitaParaEsquerda {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes deslizarDeBaixoParaCima {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes deslizarDeCimaParaBaixo {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
