@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap");
      @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap");
      body {
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;

        position: absolute;
        width: 1727px;
        height: 1117px;
        left: 0px;
        top: 0px;
        display: grid;
        place-items: center;

        background-image: url("background.png");
        background-repeat: no-repeat;
        object-fit: cover;
      }

      .redrectangle {
        position: absolute;
        /* display: grid; */
        align-items: center;
        justify-content: center;
        left: 565px;
        top: 245px;
        width: 597px;
        height: 627px;
        background-color: rgba(240, 58, 71, 0.9);
        box-shadow: 10px 10px 40px 10px rgba(0, 0, 0, 0.25);
        border-radius: 70px;
        animation: heartbeat 4s ease-in-out infinite;
      }

      @keyframes heartbeat {
        0%,
        100% {
          transform: scale(1.03);
        }

        80% {
          transform: scale(1);
        }
      }
 a {
  text-decoration: none;
 }
      .button {
        position: relative;
        display: grid;
        align-items: center;
        top: 20%;
        left: 26%;
        height: 10%;
        width: 48%;
      }

      .front {
        position: relative;
        display: grid;
        align-items: center;
        height: 100%;
        width: 100%;
        background-color: #151515;
        color: #85f3f1;
        font-size: 38px;
        font-family: "Poppins";
        border-radius: 25px;
        border: none;
        
      }

      .back {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #151515;
        border-radius: 25px;
      }

      .img1 {
        position: relative;
        width: 286.56px;
        height: 62.7px;
        object-fit: cover;
        left: 1%;
        object-position: 0px -182px;
        border-radius: 25px;
      }

      .img2 {
        position: absolute;
        width: 286.56px;
        height: 62.7px;
        object-fit: cover;
        left: 1%;
        border-radius: 25px;
        object-position: 0px -182px;
        animation: animate 3s ease-in-out infinite;
      }

      @keyframes animate {
        0%,
        100% {
          height: 100%;
        }
        50% {
          height: 0%;
        }
      }

      h1 {
        display: grid;
        text-align: center;
        font-family: "montserrat";
        margin-top: 30px;
        font-weight: 900;
        font-size: 40px;
      }

      h2 {
        display: grid;
        position: relative;
        top: 10%;
        left: 15%;
        font-family: "montserrat";
        font-size: 30px;
        color: white;
        font-weight: lighter;
      }

      .username {
        display: grid;
        position: relative;
        top: 8%;
        left: 15%;
        width: 380px;
        height: 63px;
        background: #d9d9d9;
        border-radius: 20px;
        border: none;
        font-size: 30px;
        padding-left: 20px;
        margin-bottom: 45px;
      }

      .passcode {
        display: grid;
        position: relative;
        top: 8%;
        left: 15%;
        width: 380px;
        height: 63px;
        background: #d9d9d9;
        border-radius: 20px;
        border: none;
        font-size: 30px;
        padding-left: 20px;
      }

      .incorrect {
        position: relative;
        display: grid;
        align-items: center;
        color: red;
        font-size: 30px;
        font-family: sans-serif;
        letter-spacing: 2px;
        font-weight: bold;
        top: 400px;   
       display: none;   }