@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
html,
body {
    height: 100%
}

#global {
    display: flex;
    border-radius: 14px;
    justify-content: center;
    background-color: var(--secound-color);
}

body {
    --invert: invert(60%);
    --secound-color: #202122;
    --primary-color: #1A1B1A;
    --color-white: rgb(158, 157, 157);
    --text-color: rgb(158, 157, 157);
    --hover-color: #14305D;
    align-items: center;
    justify-content: center;
    background-color: var(--secound-color);
    height: 100%;
    display: flex;
    flex-direction: column;
}

* {
    padding: 0px;
    margin: 0px;
}

#loginbox {
    border-radius: 30px 30px 30px 30px;
    height: 600px;
    width: 450px;
    align-self: center;
    display: flex;
}

#logininsider {
    align-self: center;
    border-radius: 10px;
    width: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

input[type='text']::placeholder {
    color: var(--color-white);
}

input[type='text']:focus {
    outline: none;
}

#forget {
    transition: color 0.1s;
    font-family: 'Bebas Neue';
    color: var(--color-white);
    font-size: 15px;
    position: relative;
    text-decoration: none;
}

#forget:hover,
#register:hover {
    color: var(--hover-color);
}

#erro {
    color: var(--color-white);
    font-family: 'Bebas Neue';
    color: rgba(255, 0, 0, 0.849);
    opacity: 1;
    transition: all .1s
}

#erroforget {
    display: flex;
    height: 25px;
    align-self: center;
    position: relative;
    top: -11px;
}

#mode {
    filter: var(--invert);
    width: 40px;
    height: 40px;
    position: relative;
    bottom: 115px;
    left: 85%;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #1a1b1a inset;
    -webkit-text-fill-color: var(--text-color) !important;
}

#redirect {
    align-self: center;
}

#logininsider p a {
    color: rgb(255, 255, 255);
}

#arrowright:hover {
    filter: invert(100%);
}

#arrowright {
    filter: invert(45%);
    width: 30px;
    transition: all .16s;
}

#loginbox {
    background: var(--primary-color);
    width: 450px;
    height: 600px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

* {
    font-size: .9rem;
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}


/* metadata logo */

@media (max-height:950px) and (max-width:700px) {
    #forget {
        font-size: 1.5rem !important;
        left: 10px;
    }
    #button {
        font-size: 1.1rem!important;
    }
    #loginbox {
        background-position: center 150px!important;
        background-size: 125px 125px !important;
    }
}

@media (max-width:1000px) {
    #logininsider {
        box-shadow: none;
    }
    #register {
        position: static;
        margin-top: 10px;
    }
}

@media (max-width:600px) {}

#email:hover~#emaillabel,
#senha:hover~#senhalabel,
#senha:valid~#senhalabel,
#email:valid~#emaillabel {
    top: -47px
}

#logo {
    width: 100px;
    margin-bottom: 50px;
}

#button:hover {
    background: rgba(255, 255, 255, 0.052);
}

#senhalabel {
    width: 38px;
}

label {
    transition: all .05s;
    width: 45px;
    color: var(--text-color);
    position: relative;
    top: -32px;
    background: var(--primary-color);
    user-select: none;
    margin-left: 15px
}

input:focus-visible {
    outline: none;
}

#email,
#senha {
    padding: 13px!important;
    width: 330px;
    height: 30px;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    background: transparent;
    border-radius: 10px;
}

@media (max-width:600px) {
    #global {
        width: 95%;
        height: 95%;
    }
    #loginbox {
        width: 100%;
        align-items: center;
        flex-direction: column;
    }
    #logininsider {
        background-color: var(--primary-color);
        margin-left: 0px;
        height: auto;
        width: 100%;
    }
    #html {
        height: 100%;
    }
    #register {
        position: static;
        margin-top: 20px;
    }
    input[type='text'] {
        width: 90%;
        height: 3rem;
    }
    #button {
        font-family: 'Bebas Neue';
    }
    #register {
        font-size: 2rem;
        color: rgb(158 157 157 / 56%);
    }
    #erroforget {
        height: auto;
    }
    #forget {
        font-size: 2rem;
        width: 550px;
        height: auto;
        color: rgb(158 157 157 / 56%);
    }
    input[type='text']::placeholder {
        font-size: 2.1rem;
    }
}