.content{
    margin: 8px;
    width: calc(100% - 16px);
    align-items:center;
    justify-content:center;
}

.login_register_div{
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(100% - 16px);
    max-width: 216px;
    max-height: 210px;
    overflow: hidden;
    padding: 8px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(161, 161, 161, 0.32);
    border: 1px solid black;
    border-radius: 10px;
}

.login_div{
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
}

.login_div label {
    margin: 25% 0 5%;
  }

label {
    color: #d0d0d0;
    justify-content: center;
    display: flex;
    cursor: pointer;
    transition: .5s ease-in-out;
}

.login_form{
    display: grid;
    grid-template-columns: auto;
}

.login_form input{
    background-color: #818181;
    border: none;
}

.login_form input:focus{
    background-color: #818181;
    border: none;
}

.login_form button{
    transition: .2s ease-in;
}

.btn_submit{
    width: 25% !important;
    margin: 8px 0px;
    justify-self: center;
}

.register_div{
    background: #eee;
    border-radius: 60% / 10%;
    transform: translateY(10%);
    transition: .8s ease-in-out;
    background-color: #818181;
}

.register_div label {
    color: #d0d0d0;
    transform: scale(.9);
  }

  .register_form{
      display: grid;
      grid-template-columns: auto;
      margin-top: 5px;
  }
  
.register_form input{
    background-color: #43413f;
    border: none;
    width: 70%;
    justify-self: center;
    color: #d0d0d0;
}

.register_form button{
    transition: .2s ease-in;
}

#chk {
    display: none;
  }

#chk:checked ~ .register_div {
    transform: translateY(-70%);
}

#chk:checked ~ .register_div label {
    transform: scale(1);
    margin: 10% 0 5%;
}

#chk:checked ~ .login_div label {
    transform: scale(.6);
    margin: 5% 0 5%;
} 

.message{
    display: grid;
    justify-content: center;
    height: 24px;
    padding-top: 5px;
}