@font-face {
    font-family: babapro;
    src: url("../fonts/Babapro-Ea4rr.otf");
  }
  
  @font-face {
    font-family: raleway;
    src: url("../fonts/Raleway-Regular.ttf");
  }
  @font-face {
    font-family: raleway-bold;
    src: url("../fonts/Raleway-Bold.ttf");
  }
  @font-face {
    font-family: raleway-semibold;
    src: url("../fonts/Raleway-SemiBold.ttf");
  }
  
  * {
      margin: 0;
      padding: 0;
      font-feature-settings: "pnum" on, "lnum" on;
    }
  html {
      box-sizing: border-box;
      font-size: 62.5%;
  }

.wrapper{
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.wrapper > .logo
{
    width: 50%;
    height: 100%;
}
.wrapper > .logo > figure
{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wrapper > .logo > figure > img
{
    width: 95%;
}

.wrapper > .form_wrapper
{
    width: 50%;
    height: 100%;
}

.form_wrapper > form
{
    width: 100%;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}

.form_wrapper > form > input
{
    border: 2px solid #7692DB;
    border-radius: 5px;
    outline: none;
    color: #332D2D;
    font-size: 1.5rem;
    font-family: raleway-semibold;
    margin-bottom: 1.3rem;
    height: 3.5rem;
    width: 55%;
    text-indent: 1.2rem;
}
.form_wrapper > form > h2{
    font-family: raleway-bold;
    color: #332D2D;
    font-size: 2rem;
    margin-bottom: 2rem;
}

.form_wrapper > form > input[type=submit]
{
  height: 3.5rem;
  width: 40%;
  background-color:#7692DB;
  color: #332D2D;
  font-size: 1.5rem;
  font-family: raleway-semibold;
  cursor: pointer;
  text-indent:0;
}

.form_wrapper > form > input[type=submit]:hover
{
background-color: var(--third-color);
}

.wrapper > img{
  position: absolute;
  width: 30%;
  height: 50%;
  filter: blur(1rem);
}
#top_left_circle
{
  top: 0;
  left: 0;
}
#bottom_left_circle
{
  bottom: 0;
  left: 0;
}