@import url("./includes/header.css");

:root {
    --bg: #1F1B24;
    --bg2: #2b2631;
    --accent: #00b4d8;
    --text: white;
    --text-accent: var(--bg);
}

* {
    box-sizing: border-box;
    font-family: 'Poppins';
}

body,
html {
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

body {
    background-color: var(--bg);
    height: 100vh;
}

.login-wrapper {
    width: 100%;
    /* height: calc(100% - 70px); */
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.loginContainer,
.loginErrorContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: var(--text);

    border: 2px solid var(--accent);
    box-shadow: 0 0 15px rgba(0, 180, 216, 0.3);
    border-radius: 20px;
    margin: auto;

    padding: 20px;

    background-color: var(--bg2);

    width: 1020px;
}

.loginErrorContainer {
    width: 75%;
    display: none;
}

.loginContainer>h2,
.loginErrorContainer>h2 {
    color: var(--text);
    font-size: 3rem;
    font-weight: 900;
    text-align: center;
    margin: 0px;
}

.loginContainer>h2>span {
    color: var(--accent);
}

.loginErrorContainer>h2 {
    font-size: 2rem;
}

.loginErrorContainer>p {
    font-size: .8rem;
}

.loginContainer>p,
.loginErrorContainer>p {
    color: var(--text);
    text-align: center;
}

.loginContainer>.mediaParagraph {
    display: none;
}

.loginForm {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    width: 100%;
}

.loginInputContainer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;

    background-color: var(--text);
    background-color: var(--bg);
    color: var(--text);
    /* border: 2px solid var(--accent); */
    border-radius: 12px;

    padding: 8px;
    margin: 10px;

    width: 384px;
}

.loginInputContainer>label {
    margin: 5px;
    /* color: black; */
}

.loginInput {
    flex: 1;
    border: none;
    background-color: transparent;
    width: 100%;
    padding: 8px;
    border-radius: 10px;
    color: var(--text);
}

.loginInput:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

.loginBtn {
    background-color: var(--accent);
    color: var(--text-accent, var(--bg));
    border: none;
    border-radius: 8px;
    padding: 0.4rem 1rem;
    margin: 20px;
    font-size: 1.1rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.2s all;
}

.loginBtn:hover {
    background-color: var(--bg2);
    color: var(--accent);
    border: 2px solid var(--accent);
    border-style: dashed;
}

.loginError {
    color: red;
}

.registeredMsg {
    color: var(--accent);
}

.register-btn {
    color: var(--accent);
}

.forgot-password {
    color: var(--accent);
    font-size: 0.8rem;
}

@media (max-width: 820px) {
    .loginContainer>.mediaParagraph {
        display: auto;
    }

    .loginContainer {
        display: none;
    }

    .loginErrorContainer {
        display: flex;
    }
}