:root {

}

.startpage_main {
    display: grid;
    grid-auto-columns: auto 300px auto;
    grid-template-areas:
    ". startpage_text .";
    padding-top: 12.5vh;
}

.startpage_text {
    width: 100%;
    text-align: left;
}

.login_text {
    width: 100%;
}

.logins_form input[type=submit] {
    background: lightgray;
    border: 1px solid black;
    margin-top: 6px;
    margin-bottom: 6px;
    padding: 5px 8px;
    color: black;
    cursor: pointer;
    transition: background .3s, color .3s;
    font-size: 1.3rem;
}

.logins_form input[type=submit]:hover {
    background: #fcfbfb;
    transition: background .3s, color .3s;
}

.logins_form input[type=text], input[type=password]{
    width: 100%;
    box-sizing: border-box;
    font-size: 1.3rem;
    height: 2.4rem;
    border: 2px solid #D5D5D5FF;
    margin: .5rem 0 .5rem 0;
}

.logins_form input[type=text]:hover, input[type=password]:hover {
    border-color: #2d2b2b;
}

.logins_form input[type=text]:focus, input[type=password]:focus {
    outline: none;
    border-color: #3595F6FF;
}

.reset-pass {
    max-width: 100%;
    background: lightgray;
    border: 1px solid black;
    margin-top: 6px;
    margin-bottom: 6px;
    padding: 5px 8px;
    color: black;
    cursor: pointer;
    transition: background .3s, color .3s;
    font-size: 1.3rem;
    float: right;
    text-decoration: none;
}

.reset-pass:hover {
    background: #fcfbfb;
    transition: background .3s, color .3s;
}

@media (max-width: 850px) {
    .logins_form input[type=text], input[type=password]{
        font-size: .75rem;
        height: 1.8rem;
        padding: .75rem .75rem;
    }

    .logins_form input[type=submit] {
        font-size: .75rem;
    }

    .reset-pass {
        font-size: .75rem;
    }

    .startpage_main {
        grid-auto-columns: auto 200px auto;
    }

}