@font-face {
  font-family: NeutraDisplayTitling;
  src: url(fonts/NeutraDisplayTitling.otf);
}

:root {
  --withe: #fff;
  --light-grey: rgb(249, 245, 242);
  --pink: #E31C79;
  --red: #ff0000;
  --green: #307A07;
}

html,
body {
  font-family: NeutraDisplayTitling;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  margin: 0;
}

h1 {
  font-size: 35px;

}

.title {
  margin: 10px 0;
}

main {
  position: absolute;
  height: 100%;
  width: 100%;
}

.outer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

div.top {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 45%;
  background-color: var(--withe);
}

div.bottom {
  display: flex;
  justify-content: center;
  flex: 1 55%;
  background-color: var(--light-grey);
}

img {
  width: 400px;
}

.main-container {
  margin-top: -275px;
  width: 500px;
  height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  margin-bottom: 60px;
}

.reset-password-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 500px;
  height: 425px;
  background-color: #fff;
  border: 1px solid #ced4da;
}

.reset-password-container input {
  margin: 10px 0;
  padding: 15px 200px 15px 15px;
  border: 1px solid #ced4da;
}

.btn {
  padding: 15px 60px;
  background: var(--pink);
  cursor: pointer;
}

.btn a {
  color: var(--withe);
}

.error p {
  font-size: 10px;
  margin: 0;
  color: var(--red);
}

.success {
  color: var(--green);
  font-size: 10px;
}

@media only screen and (max-width: 540px) {
  h1 {
    font-size: 25px;
  }

  .reset-password-container {
    width: 300px;
    height: 400px;
  }

  .reset-password-container input {
    padding: 15px 50px 15px 15px;

  }

  .error p {
    font-size: 8px;
  }
}

@media only screen and (max-width: 395px) {
  img {
    width: 350px;
  }
}

@media only screen and (max-width: 330px) {
  .main-container {
    margin-top: auto;
  }

  img {
    width: 300px;
  }

  .logo {
    margin-bottom: 10px;
  }
}