*
{
  box-sizing: border-box;
}

body
{
  margin: 0;
  padding: 0;
  background-color: #880e21;
}

/*start model*/
.my-model
{
  top: 20px;
  position: relative;
}

.login ,.signup
{
  background-color: white;
  position:relative;
  width: 500px;
  height: 600px;
}
.login::before
{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #880e2154;
    top: 0%;
    left: 0%;
    z-index: 1;
    transform-origin: center top 0;
    transition: 0.5s;
}


.login .btn
{
  width: 150px;
  color: #880e2154;
}
 
.page-link
 {
    position: relative;
    display: block;
    color: #0d6efd;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
    transition: none !important;
}

.login .btn:hover
{

  color: white;
  background-color: #880e21 !important;
  transition: 0.3s ease-in-out;
  border: 2px solid white !important;
}
.btn:focus
{
  box-shadow:  0 0 0 0 !important;
}

.login-content
{
  position: absolute;
  top: 20%;
  left: 0;
  z-index: 2;
}
.signup-content
{
  position: absolute;
  top: 10%;
  left: 0;
  z-index: 2;
}
.signup .btn
{
  width: 150px;
  background: #880e2154 !important;
}
.signup .btn:hover
{
  color: #880e2154;
  background: #880e21 !important;
  transition: 0.3s ease-in-out;
}
/*end model*/
.m
{
  width: 100px;
  height: 100px;
  background-color: red;
}