:root {
    /* Cores */
    --contraste-botao: #f96d00;
    --texto: #f2f2f2;
    --conteudo: #EAEAE9;
    --fundo-escuro: #222831;
    --fundo-elementos: #393e46;
}

@font-face {
    font-family: Roboto;
    src: url(./fonts/Roboto-Regular.ttf);
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: Roboto-Bold;
    src: url(./fonts/Roboto-Bold.ttf);
    font-weight: 700;
    font-style: normal;
}

* {
    font-family: Roboto;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--fundo-escuro);
}
/*
animacao de login
mudar display para block apos clicar no entrar

*/
.progresso {
    content: '';
    display: none;
    position: absolute;
    top: 4.5rem;
    left: calc(50% - 10rem);
    background: linear-gradient(135deg, #f96d00 0%, #222831 45%);
    background-size: 400% 400%;
    background-position: 100% 100%;
    width: 20rem;
    height: 23.7rem;
    border-radius: 10px;
    animation: gradient 2s ease-in-out infinite;
}

@keyframes gradient {
	0% {
		background-position: 100% 100%;
	}
    33% {
		background-position: 0% 100%;
	}
	66% {
		background-position: 0% 0%;
	}
    100% {
		background-position: 100% 0%;
	}
}

.formulario-login {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 5rem;
    left: calc(50% - 9.5rem);
    width: 15rem;
    background-color: var(--fundo-elementos);
    padding: 2rem;
    border-radius: 10px;
    border: 1px solid var(--fundo-elementos);
    animation: animation 0.4s ease-out forwards 0.1s;
    z-index: 5;
}

@keyframes animation {
    0% {
        transform: scale(1, 1);
    }

    33% {
        transform: scale(0.95, 1.05);
    }

    66% {
        transform: scale(1.05, 0.95);
    }

    100% {
        transform: scale(1, 1);
    }
}

.campo {
    margin-bottom: 0.25rem;
    margin-right: 0.5rem;
    height: 1.5rem;
    border-radius: 6px;
    padding-left: 5px;
    border: 1px solid var(--texto);
    background-color: var(--texto);
    outline: none;
    box-shadow: none;
    width: var(--t-campo-cadastro);
    text-align: left;
    z-index: 10;
}

.campo:focus {
    border: 1px solid var(--contraste-botao);
}

.rotulo {
    color: var(--texto);
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
    margin-left: 0.2rem;
    z-index: 10;
}

.botao {
    background: var(--contraste-botao);
    color: var(--texto);
    padding: 2px;
    border-radius: 10px;
    height: 2rem;
    width: 5rem;
    opacity: 0.8;
    cursor: pointer;
    border: none;
    outline: none;
    box-shadow: none;
    margin-right: 2rem;
    position: relative;
    left: calc(50% - 2.5rem);
    font-size: 1.1rem;
    z-index: 10;
}

.botao:hover {
    transition: 0.2s;
    opacity: 1;
    transform: scale(1.1);
}

object {
    position: relative;
    top: 0px;
    left: calc(50% - 2.5rem);
    height: 5rem;
    width: 5rem;
    margin-bottom: 2rem;
    z-index: 1;
    animation: salto 2s ease 0s 1 normal forwards;
}

@keyframes salto {
    0% {top: 0px;}
    40% {top: -15px; rotate: 25deg;}
    65% {top: -20px; rotate: -25deg;}
    100% {top: 0px; rotate: 0deg;}
}