*{
    @import url('https://googleapis.com')
    margin:0;
    font-family: 'Inter', sans-serif;
    padding:0;
    box-sizing:border-box;
}

body {
    background-color: #e5e6ff;
    background-image: radial-gradient(#145388 1px, transparent 1px);
    background-size: 40px 40px; /* Adjust size for density */
    background-position: center;
    opacity: 1; /* Keeps the dots subtle */
    margin: 0;
    padding: 0;
    /* This creates a flexible box that fills the whole screen */
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    min-height: 100vh;       /* Uses 100% of the viewport height */
}

main {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

header {
    position: absolute; /* Keeps the RDCC logo at the top without affecting the card's center */
    top: 50px;
    left: 100px;
    width: auto;
    height: auto;
    padding: 0;
    background-color: #e5e6ff;
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    box-sizing: border-box;
}

header h1 {
    color: #145388;
    margin: 0;
}

.container {
    background: #fff;
    width: 500px;
    min-height: 300px;
    display: grid;
    padding: 1.5rem;
    border-radius: 10px;
    position: relative; /* Keep this for the edge lines */
    box-shadow: 0 10px 30px #00000d;
}

.container::before,
.container::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    border: 3px solid #145388; /* Matches your form title color */
}

/* Top Left Bracket */
.container::before {
    top: -15px;
    left: -15px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 12px;
}

/* Bottom Right Bracket */
.container::after {
    bottom: -15px;
    right: -15px;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 12px;
}

form{
    margin:0 2rem;
}
.form-title {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    color: #145388;
    font-style: bold;
    padding: 1.3rem 1.3rem 0 1.3rem; /* Set bottom padding to 0 */
    margin-bottom: 0px;            
}

.form-description {
    font-size: 15px;
    color: #00000d;
    text-align: center;
    padding: 0;                     /* Removed all padding */
    margin-top: 0;                  /* Ensures it sits directly under the title margin */
    margin-bottom: 1rem;            /* Maintains space before the input fields */
}

input{
    color:inherit;
    width:100%;
    background-color:transparent;
    border:none;
    border-bottom:1px solid #00000d;
    padding-left:1.5rem;
    font-size:15px;
}
.input-group {
    padding: 1% 0;
    position: relative;
    margin-top: 2rem; /* Increased space between the two input groups */
}
.input-group i{
    position:absolute;
    color:#145388;
}
input:focus{
    background-color: transparent;
    outline:transparent;
    border-bottom:2px #145388;
}
input::placeholder{
    color:transparent;
}
label{
    color:#00000d;
    position:relative;
    left:1.2em;
    top:-1.3em;
    cursor:auto;
    transition:0.3s ease all;
}
input:focus~label,input:not(:placeholder-shown)~label{
    top:-3em;
    color:#145388;
    font-size:15px;
}

.btn{
    font-size:1.1rem;
    padding:8px 0;
    border-radius:5px;
    outline:none;
    border:none;
    width:100%;
    background:#145388;
    color:white;
    cursor:pointer;
    transition:0.9s;
}
.btn:hover{
    background:#154a71;
}

.password-options {
    text-align: right; /* Aligns it where "forgot password" usually sits */
    margin-top: 5px;
    margin-bottom: 15px;
}

.toggle-link {
    background: none;
    border: none;
    color: #145388;
    cursor: pointer; /* Ensures the mouse changes to a hand */
    font-size: 0.8rem;
    position: relative;
    font-size: 15px;
    z-index: 10; /* Pulls it in front of the labels */
}

.toggle-link:hover {
    color: #d5e0ea;
    text-decoration: underline;
}