/*
  * Connect the Montserrat Font
  */
 @font-face {
     font-family: 'Montserrat';
     src: url('./fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
     font-weight: 100 900;
     font-style: normal;
 }

 body {
     background-image: url("./background.png");
     background-repeat: no-repeat;
     background-size: cover;

     /* background-position-y: 384px; */
     background-position: center -40%;

     /* background: radial-gradient(#591C05, #000000); */
     background-color: #000000;

     display: flex;
     justify-content: center;
 }

 .logo {
     width: 190px;
     height: 91px;
     padding-top: 11.7vh
 }

 p {
     margin: 0;
     color: #FFFFFF;
     font-family: Montserrat;
 }

 .input-with-icon {
     padding-left: 48px;
     background-repeat: no-repeat;
     background-position: 16px center;
     background-size: 24px 24px;

     height: 6.2vh;
     border-radius: 12px;
     border: 1px solid gray;
     background-color: #161616;
     color: #9BA2AD;
     font-family: Montserrat;
     font-size: 16px;
     font-weight: 500;

     cursor: pointer;
 }

 .email-icon {
     background-image: url('./icons/EnvelopeSimple.png');
 }

 .password-icon {
     background-image: url('./icons/Lock.png');
 }

 #loginButton {
     border-radius: 12px;
     border: 1px solid gray;
     background: radial-gradient(ellipse, #64BFCA 0%, #223E6B 100%);
     font-family: Montserrat;
     font-size: clamp(10px, 1.5vw, 20px);
     font-weight: 700;
     line-height: 28px;
     color: #FFFFFF;

     cursor: pointer;
 }

 .password-wrapper {
     position: relative;
     display: inline-block;
 }

 .toggle-password {
     position: absolute;
     right: 20px;
     top: 50%;
     transform: translateY(-50%);
 }

 .flexColumn {
     display: flex;
     flex-direction: column;
 }

 .flexCenter {
     align-items: center;
 }