@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Bruno+Ace+SC&family=Fredericka+the+Great&family=Kaushan+Script&family=Orbitron:wght@400..900&family=Passion+One:wght@400;700;900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Sriracha&display=swap');

:root{
    --cor1: #2cb43c;
    --cor2: #C7FFED;
    --cor3: #343434;
    --cor4: #0D0D0D;
}

*{
    font-family: 'Roboto';
}

body{
    background-color: var(--cor4);
}

main{
    display: block;
    width: 30em;
    height: 25em;
    margin: auto;
    margin-top: 15vh;

}

div.imagem{
    display: flex;
    justify-content: center;
    padding: 10px;
}

#computador{
    width: auto;
    height: 10em;
    padding: 10px;
}

.credenciamento{
    padding-left: 65px;
}

.credenciamento > p{
    color: var(--cor2);
    padding: 4px;
    margin: 0px;
}

.credenciamento > input{
    background-color: var(--cor3);
    border-color: var(--cor2);
    border-style: solid;
    border-radius: 5px;
    width: 25em;
    height: 2.95em;
    color: var(--cor2);
}

.credenciamento > input:active{
    background-color: var(--cor3);
}

main > button{
   background-color: var(--cor1); 
   color: var(--cor2);
   font-weight: bold;
   font-size: large;
   display: flex;
   justify-content: center;
   margin: auto;
   padding: 10px;
   width: 100px;
   border-style: none;
   border-radius: 5px;
   margin-top: 40px;
}

main > button:hover{
    background-color: var(--cor2);
    color: #343434;
    transition-duration: 0.5s;
}