create.css

.container {
    grid-area: container;
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 5vw auto auto;
    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: 1fr 5fr 2fr auto auto 1.5fr;
    border-radius : 20px;
    grid-template-areas:
        '. . . .'
        '. title title .'
        '. . . .'
        '. create create .'
        '. form form .'
        '. . . .';
}
.title {
    grid-area: title;
    display: grid;
    justify-content: center;
    align-content: center;
}
.title_text {
    animation: bouncy 2s infinite linear;
    font-size: 5vw;
}
.create {
    grid-area: create;
    display: grid;
    justify-content: start;
    align-content: center;
}
.create_text {
    font-size: 2vw;
}
.form {
    grid-area: form;
}
.form_inside {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1vw auto 1vw auto 1vw auto 1vw auto 1vw auto 1vw auto auto auto;
    grid-template-areas:
        '.'
        'user'
        '.'
        'name'
        '.'
        'dob'
        '.'
        'colorr'
        '.'
        'weight'
        '.'
        'pass'
        'r_pass'
        'c_button';
}
.username {
    grid-area: user;
}
.realname {
    grid-area: name;
}
.dob {
    grid-area: dob;
}
.dob select {
    font-size: 1.5vw;
}
.colorr {
    grid-area: colorr;
}
.colorr input {
    height: 30px;
}
.text {
    margin-bottom: 1px;
    font-size: 1.5vw;
}
.weight {
    grid-area: weight;
}
.password {
    grid-area: pass;
}
.r_password {
    padding-top: 1vw;
    grid-area: r_pass;
}
.create_button_area {
    padding-top: 1vw;
    align-content: center;
    grid-area: c_button;
}
.error_text {
    color: red;
    font-size: 1.5vw;
    padding-top: 5px;
}
input {
    width: 100%;
    font-size: 2vw;
}