@import '../variables/variables.css';

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #f5f5f5;
    font-family: Helvetica, sans-serif;
}

a {
    color: #80c32f;
    text-decoration: none;
}

    a:hover {
        color: #619225;
        transition: 0.4s;
    }

.middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#login-box {
    background: #ffffff;
    border-radius: 4%;
    padding-left: 4em;
    padding-right: 4em;
    padding-top: 4em;
    height: 25em;
    width: 25em;
    display: block;
}

.box {
    position: relative;
}

.logo {
    width: 175px;
    height: 75px;
    margin: auto;
    display: block;
}

.input {
    margin: 1em auto 0 auto;
    border: none;
    border-bottom: 2px solid var(--main-color);
    height: 2em;
    width: 14.5em;
    padding: 0.5em;
    display: block;
}

    .input:hover,
    .input:active,
    .input:link,
    .input:visited,
    .input:focus {
        outline: none;
        box-shadow: none;
    }


#submit {
    background-color: var(--main-color);
    color: white;
    border: none;
    height: 3em;
    width: 10em;
    padding: 1em;
    display: block;
    margin: 0 auto 1em auto;
}

.submitPosition {
    position: fixed;
    top: 70%;
    left: 50%;
    transform: translate(-50%);
}

#submit:hover,
#submit:active,
#generate:hover,
#generate:active {
    opacity: 0.8;
    color: white;
    cursor: pointer;
    outline: none;
    transition: 0.4s;
}

#submit:focus {
    cursor: pointer;
    outline: none;
}

#password {
    font-size: 0.95em;
    text-align: center;
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#text {
    font-size: 0.95em;
    text-align: center;
    position: fixed;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#errorInf {
    position: fixed;
    height: 2em;
    width: 16em;
    top: 63%;
}

    #errorInf p {
        text-align: center;
        font-size: 0.75em;
        margin: 0;
    }


.redText {
    color: rgb(181, 3, 3);
}