@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');


* {
    margin:0;
    padding:0;
    box-sizing:border-box;
  font-family: 'Poppins', sans-serif;
}
body{
   /*background-image:url(freeman.png);*/
   background-color:rgb(4, 27, 73);
    background-repeat:no-repeat;
    background-size:auto;
}
@media only screen and (max-width:768px){
    body{
        width:100%;
    }
}
.container{
    display:flex;
    height:500px;
    width:800px;
    border:1px solid black;
    margin:auto;
    margin-top:50px;
    box-shadow:15px 15px black;
    border-radius:10px;
}

.form{
    display:flex;
    flex-direction:column;
    width:50%;
    align-items:center;
    background-color:whitesmoke;
}
.form h2{
    font-size:3rem;
    font-family: 'Montserrat', sans-serif;
    margin:20px;
}
.form h1{
    font-size:1rem;
    font-family: 'Montserrat', sans-serif;
    margin:40px;
}
.box{
    padding:12px;
    width:65%;
    margin:25px;
    border:1px solid black;
    outline:none;
    border-radius:20px;
}
   
.form a{
    text-decoration:none;
    color:black;
    margin-top:2px;
}
.form a:hover{
    color:red;

}
.side{
    display:flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    background-color:rgb(203, 217, 244);

}
.side img{
    width:450px;
    height:450px;
}
.btn {
    font-size:24px;
    font-weight: bolder;
    font-family: 'Montserrat', sans-serif;
    border-radius:20px;
    border-color: transparent;
    position: relative;
    padding: 20px 60px;
    width:194px;
    height:40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    text-decoration: none;
    margin: 20px 40px;
    transition: 1s;
    -webkit-box-reflect: below 7px
    linear-gradient(transparent,transparent,rgba(188, 63, 63, 0.267));
   
  }
  
  .btn:hover {
    background: var(--clr);
    box-shadow: 0 0 10px var(--clr),
    0 0 30px var(--clr),
    0 0 60px var(--clr),
    0 0 100px var(--clr);
  }
  
  .btn::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 400%;
    background: var(--clr);
    transition: 1s;
    animation: animate 2s linear infinite;
    animation-delay: calc(-0.33s * var(--1));
  }
  
  .btn:hover::before {
    width: 120%;
    
  }
  
  .btn::after {
    content: '';
    position: absolute;
    inset: 4px;
    background: rgb(13, 73, 112);
    transition: 0.5s;
  }
  
  .btn:hover::after {
    background: var(--clr);
  }
  
  @keyframes animate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  
* {
  
}

body {
  /* display: flex;
  justify-content: center;
  align-items: center; */
  min-height: 100vh;
  /* background: #c3c8de; 
  overflow: hidden;
  flex-direction: column; */
}
span{
  position: relative;
  z-index: 1;
  font-size: 2rem;
  color: rgb(255, 255, 255);
  opacity: 0.5;
  /* text-transform: uppercase; */
  letter-spacing: 4px;
}

btn:hover span {
  opacity: 1;
  font-family: 'Montserrat', sans-serif;
}