:host {
    text-align: center;
    font-family: "Lato", "Noto Sans", "Arial", sans-serif;

    /*width: 80%;
    height: 80vh;*/
}

#avatar {
    border-radius: 15px;
    transition: background-color 150ms ease-in-out;
    max-height: 225px;
}

#avatar:hover {
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

#user {
    font-size: 24px;
}

#password {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;

    width: 300px;
    height: 25px;

    font-size: 18px;
    font-family: "Lato", "Noto Sans", "Arial", sans-serif;

    border: none;
    outline: none;
    background: none;

    border-bottom: solid 2px white;
    color: white;

    transition: border-bottom-color 150ms ease-in-out, background-color 150ms ease-in-out;
}

::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.8);
}

#password:hover {
    background: rgba(255, 255, 255, 0.1);
}

#password:focus {
    border-bottom-color: #2fa6ff;
}

#desktop {
    background: none;
    border: none;
    outline: none;

    color: white;

    font-family: "Lato", "Noto Sans", "Arial", serif;
    font-weight: 300;
    font-size: 32px;
    text-align: left;

    width: 300px;
    padding: 10px 15px;
    margin-top: 22vh;

    transition: background-color 150ms ease-in-out;
}

#desktop i {
    float: right;
    margin-top: 3px;
}

#desktop:hover {
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

#error {
    color: rgba(230, 20, 20, 0.85);
    font-size: 18px;
}