forgot.css

.container {
    grid-area: container;
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 10vh auto 10vh;
    grid-template-areas:
        '. . .'
        '. box .'
        '. . .';
}

 .container_box {
    background-color: white;
    grid-area: box;
    display: grid;
    grid-template-columns: 1fr 2.5fr 2.5fr 1fr;
    grid-template-rows: 1.5fr 5fr 2fr auto auto 1.5fr;
    border-radius : 20px;
    grid-template-areas:
        '. . . .'
        '. title title .'
        '. . . .'
        '. forgot forgot .'
        '. form form .'
        '. . . .';
}
.title {
    grid-area: title;
    display: grid;
    justify-content: center;
    align-content: center;
}
.title_text {
    font-size: 6vw;
}
.forgot {
    grid-area: forgot;
    display: grid;
    justify-content: start;
    align-content: center;
}
.forgot_text {
    font-size: 3.5vw;
}
.form {
    grid-area: form;
}
.form_inside {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1vw auto 1vw auto 1vw auto auto auto;
    grid-template-areas:
        '.'
        'user'
        '.'
        'dob'
        '.'
        'pass'
        'r_pass'
        'forgot_button';
}
.username {
    grid-area: user;
}
.username_text {
    margin-bottom: 1px;
    font-size: 2vw;
}
.dob {
    grid-area: dob;
}
.dob select {
    font-size: 1.5vw;
}
.dob_text {
    margin-bottom: 1px;
    font-size: 2vw;
}
.password {
    grid-area: pass;
}
.password_text {
    margin-bottom: 1px;
    font-size: 2vw;
}
.r_password {
    padding-top: 1vw;
    grid-area: r_pass;
}
.forgot_button_area {
    padding-top: 1vw;
    grid-area: forgot_button;
}
.forgot_button {
    font-size: 2vw;
}
.error_text {
    color: red;
    font-size: 1.5vw;
    padding-top: 5px;
}
input {
    width: 100%;
    font-size: 2vw;
}