body {
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: aliceblue;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 400px;
    background-color: white;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 15px;
    z-index: 100;

  }
  .container h1{
    font-weight: bold;
    font-variant: small-caps;
  }
  .container form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 80%;
  }
  
  form {
    width: 500px;
  }

  #username,#password,#password-repeat{
    border: 0px;
    border-bottom: 1px solid black;
    margin-bottom: 25px;
    outline: none;
  }

  ::-webkit-input-placeholder { /* WebKit browsers */
    font-size: 16px; /* Change this value to adjust the font size */
    color: rgba(47, 47, 47, 0.69);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-size: 16px; /* Change this value to adjust the font size */
    color: rgba(47, 47, 47, 0.69);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-size: 16px; /* Change this value to adjust the font size */
    color: rgba(47, 47, 47, 0.69);
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    font-size: 16px; /* Change this value to adjust the font size */
    color: rgba(47, 47, 47, 0.69);
}

input{
  font-size: 16px
}

  #button{
    margin-bottom: 25px;
    width: 40%;
    padding: 10px 0px;
    transition: background-color 0.5s;
    /* background-color: #1c2eba; */
    border-radius:5px;
    border-color: #1e90ff;
    cursor:pointer
  }
 


  .shape1,
  .shape2,
  .shape3,
  .shape4 {
      position: fixed;
      border-radius: 50%;
      opacity: 0.7;
      z-index: 1;
  }

  .shape1 {
background: linear-gradient(45deg, #add8e6, #87cefa);
animation: moveShape1 10s linear infinite alternate;
top: -20px;
left: -50px;
width: 300px;
height: 300px;
}

.shape2 {
background: linear-gradient(45deg, #b0e0e6, #00bfff);
animation: moveShape2 8s linear infinite alternate;
bottom: 20%;
left: 70%;
width: 300px;
height: 300px;
}

.shape3 {
background: linear-gradient(45deg, #afeeee, #00ced1);
animation: moveShape3 12s linear infinite alternate;
bottom: 100px;
left: 200px;
width: 200px;
height: 200px;
}

.shape4 {
background: linear-gradient(45deg, #b0c4de, #1e90ff);
animation: moveShape3 12s linear infinite alternate;
bottom: 50%;
left: 50%;
width: 500px;
height: 500px;
}

  @keyframes moveShape1 {
      0% {
          transform: translateX(0);
      }

      100% {
          transform: translateY(50px) translateX(100px) rotate(270deg);
      }
  }

  @keyframes moveShape2 {
      0% {
          transform: translateY(0);
      }

      100% {
          transform: translateY(100px) rotate(180deg);
      }
  }

  @keyframes moveShape3 {
      0% {
          transform: translateX(0) rotate(0);
      }

      100% {
          transform: translateY(100px) translateX(-100px) rotate(360deg);
      }
  }

  .shape {
      position: fixed;
      border-radius: 50%;
      opacity: 0.7;
      cursor: pointer;
      transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s, bottom 0.5s,
          right 0.5s, border-radius 0.5s;
  }

  #forgot{
    margin-top: 5px;
  }

  a{
    text-decoration: none;
    color: #0f579f;
  }
  a:hover{
    text-decoration: underline;
  }