/* BODY */

body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background-image:url('../img/bg.png');
background-size:cover;
background-position:center;
height:100vh;
display:flex;
align-items:flex-end;
justify-content:center;
}

/* TOPBAR */

.topbar{
position:fixed;
top:0;
left:0;
width:100%;
height:15%; /* pequena */
background:rgba(0,0,0,0.8);
padding:5px 20px;

display:flex;
align-items:center;
justify-content:space-between;

overflow:hidden;
transition:height 0.3s ease;

z-index:1000;
}

/* quando expande */

.topbar.expand{
height:20%;
}

.topbar.expand .logo{
height:100%;
}
/* LOGO */

.logo{
height:95%;
transition:height 0.3s ease;

}

/* LOGIN FORM */

.loginform{
display:flex;
align-items:center;
}

/* INPUTS */

.loginform input{
padding:8px;
margin-right:5px;
border-radius:5px;
border:none;
}

/* BOTÃO LOGIN */

.login{
background:#6366f1;
padding:8px 15px;
color:white;
}

/* MENU */

.menu{
margin-bottom:40px;
}

/* BOTÕES */

.btn{
padding:20px 40px;
margin:10px;
font-size:20px;
border:none;
border-radius:10px;
cursor:pointer;
color:white;
transition:0.2s;
}

.btn:hover{
transform:scale(1.05);
}

.register{background:#3b82f6;}
.status{background:#22c55e;}
.ranking{background:#ef4444;}
.download{background:#f59e0b;}