::selection {
    background-color: rgb(252, 236, 18);
    color: black;
}

.form-container {
    box-sizing: border-box;
    padding: 0 30em;
}

.login-form-container {
    margin-top: 2em;
    margin-left: 15em;
    margin-right: 15em;
}

form {
    display: grid;
    grid-template-columns: auto 3fr 1fr;
    column-gap: 0.5em;
    row-gap: 1.5em;
    width: 100%;
}

.form-login{
    margin: 2em 45em 0 45em;
}

input, textarea {
    background-color: rgb(60, 60, 60);
    border-color: rgb(20, 20, 20);
    border-style: solid;
    border-radius: 0.5em;
    font-size: 1.5em;
    font-family: sans-serif;
    color: white;
    padding: 0.25em 0.5em;
    color-scheme: dark;
    transition: 0.3s;
    width: auto;
}

textarea {
    resize: none;
    field-sizing: content;
    border-width: 0.09em;
}

input:focus:not(.input-submit), textarea:focus {
    outline: none;
    border-color: white;
    background-color: rgb(100, 100, 100);   
}

input:user-valid:not(.input-submit, .no-valid), textarea:user-valid {
    border-color: lime;
}

input:user-invalid:not(.input-submit, .no-valid), textarea:user-invalid {
    border-color: red;
}

.input-submit {
    background-color: rgb(252, 236, 18);
    border-color: rgb(252, 236, 18);
    color: black;
    cursor: pointer;
}

.input-submit:hover {
    background-color: rgb(252, 242, 106);
    border-color: rgb(252, 242, 106);
}

.input-submit:focus {
    background-color: rgb(252, 242, 106);
    border-color: rgb(252, 242, 106);
    outline: none;
}

.label-time {
    font-family: sans-serif;
    color: white;
    font-size: 1.5em;
    align-self: center;
}

.full-line {
    grid-column-start: 1;
    grid-column-end: 4;
}

.full-line-input{
    width: 100%;
}

.input-container {
    grid-column-start: 1;
    grid-column-end: 4;
    display: flex;
    position: relative;
}

label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: sans-serif;
    font-size: 1.5em;
    color: white;
    padding-left: 0.6em;
    user-select: none;
    cursor: text;
    transition: 0.3s;
}

.label-description {
    top: 0;
    margin-top: 0.91em;
}

.input-email:focus + .label-email,
.input-email:not(:placeholder-shown) + .label-email,
.input-description:focus + .label-description,
.input-description:not(:placeholder-shown) + .label-description,
.input-location:focus + .label-location,
.input-location:not(:placeholder-shown) + .label-location,
.input-username:focus + .label-username,
.input-username:not(:placeholder-shown) + .label-username,
.input-password:focus + .label-password,
.input-password:not(:placeholder-shown) + .label-password

{
    top: 0;
    margin-top: -0.75em;
    font-size: 0.75em;
    padding-left: 1.25em;
}

@media only screen and (max-width: 1800px) {
    .form-container {
        padding: 0 20em;
    }
}

@media only screen and (max-width: 1600px) {
    .login-form-container {
        margin-left: 10em;
        margin-right: 10em;
    }
}

@media only screen and (max-width: 1500px) {
    .form-container {
        padding: 0 15em;
    }
}

@media only screen and (max-width: 1300px) {
    .form-container {
        padding: 0 10em;
    }
}

@media only screen and (max-width: 1100px) {
    .form-container {
        padding: 0 5em;
    }
}

@media only screen and (max-width: 950px) {
    .login-form-container {
        margin-left: 5;
        margin-right: 5;
    }
}

@media only screen and (max-width: 800px) {
    .login-form-container {
        margin: 0;
        margin-top: 1em;
    }
}

@media only screen and (max-width: 600px) {
    textarea {
        height: 8em;
    }
    form {
        grid-template-columns: auto 1fr 0;
    }
    .mobile-grid-1 {
        grid-column: 1;
    }
    .mobile-grid-2 {
        grid-column-start: 2;
        grid-column-end: 4;
    }
    .form-container {
        padding: 0 2em;
    }
}

@-moz-document url-prefix() {
    textarea {
        resize: vertical;
        height: 10em;
    }
}