*{box-sizing: border-box; list-style: none; outline: none; border: none;}
:root{
--bg-color:#fdfdfd;
--white-color:#ffffff;
--text-color:#000000;
--main-color:#0A3E89;
--second-color:#D71923;
--shadow-color:rgba(0, 0, 0, 0.2);
--h1-size: clamp(2.5rem, 2.5vw + 1rem, 4.5rem);
--h2-size: clamp(2rem, 2vw + 0.8rem, 3.5rem);
--h3-size: clamp(1.8rem, 1.5vw + 0.6rem, 3rem);
--body-size: clamp(1.6rem, 1vw + 0.2rem, 2rem);
--fs-special: clamp(1.4rem, 0.8vw + 0.4rem, 1.6rem);
}
body{
margin: 0 5%;
font-family: "Roboto", sans-serif;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--bg-color);
}
h1{
font-family: "Oswald", sans-serif; 
font-size: var(--h1-size);
font-weight: 400; 
text-transform: capitalize;
}
section{width: 100%; max-width:420px; height: auto;}
.logo-link img{width: 150px; height: 150px;}
.password-wrapper{position:relative;}
.password-wrapper .toggle-password{
position:absolute;
top:18px;
right:12px;
background:none;
border:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}
.password-wrapper input.is-invalid + label + .toggle-password{right:30px;}
.password-wrapper input{padding-right:45px;}
.toggle-password i{font-size:22px;}
#login-timer{margin-top:0.5rem; font-weight:bold;}
#loginForm input:disabled,
#loginForm button:disabled {
cursor: not-allowed;
opacity: 0.7;
}