body{margin: 0; padding: 0; box-sizing: border-box; background-color: #F5F8FA; font-family: var(--font1);} *{margin: 0; padding: 0; box-sizing: border-box;}
:root {
    --font1: 'Oxygen', sans-serif;
    --font2: 'Concert One', cursive;
    --font3: 'Comfortaa', cursive;
}

.logo{position: absolute; left: 20px; top: 20px; z-index: 20;}
/* Login */
.login{position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100vh; background-color: #000; font-family: var(--font1);}
.login .img{position: absolute; top: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: cover; object-fit: cover; height: 400px; width: 100%;}
.login .img img{background-position: center; background-repeat: no-repeat; background-size: cover; object-fit: cover; height: 400px; width: 100%; border-bottom: 5px solid #FCD922;}
.login_inner{display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 100%; max-width: 700px; padding: 20px; background-color: #ffffff; border-radius: 5px; height: 400px; z-index: 99; margin-top: -50px;}
.login_inner h1{color: #000; margin-bottom: 30px;}
.login_inner h1 span{color: #FCD922;}
.login_inner label{color: #000; margin-bottom: 5px;}
.login_inner input{width: 100%; padding: 10px 5px; border-radius: 5px; outline: none; border: none; background-color: #14121218;  color: #000; transition: all 0.3s ease-in-out; margin-bottom: 25px; border-bottom: 2px solid #FCD922;}
.login_inner button { transition: all 0.3s ease-in-out; border: none; outline: none; padding: 10px; border-radius: 5px; background-color: #FCD922; cursor: pointer; margin-top: 25px;} 
.login_inner button:hover { animation-name: bounce; animation-duration: 0.5s; animation-fill-mode: both; animation-timing-function: ease-in-out; color: #fff; background-color: #000;}  
  @keyframes bounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
.footer_login{position: absolute; bottom: 0px; left: 0px; width: 100%;}
.logout{
  transition: all 0.3s ease-in-out;
  border: none;
  outline: none;
  padding: 10px;
  border-radius: 5px;
  background-color: #FCD922;
  cursor: pointer;
  margin-top: 25px;
  text-decoration: none;
  color: #000;
  font-size: 13px;
}
.logout:hover{
  animation-name: bounce;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  color: #fff;
  background-color: #000;
}
.logo img{
   width:200px; height:200px;
}