/* Imports */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
/* Google icon settings */
.material-symbols-outlined
{
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48;
    transition: font-variation-settings 0.5s;
}
.icon{font-size: 2rem;}

/* Main */
body
{
    background-color: rgb(24, 24, 24);
    font-family: 'Noto Sans', sans-serif;
}

/* Classes */
.navigation-link
{
    color: rgb(0, 209, 112);
    text-decoration: underline;
}
/* Mobile */
@media only screen and (max-width: 768px)
{
    .icon{font-size: 1.5rem;}
    /* Navigation */
    .navigation-title{display: none;}
    .navigation-item
    {
        margin: 0.75rem;
        width: 3rem;
        height: 3rem;
    }
    /* Auth */
    .auth-wrapper{width: 100%;}
}

/* PC+ */
@media only screen and (min-width: 768px)
{
    /* Navigation */
    .navigation-title
    {
        color: rgb(0, 209, 112);
        font-size: 2rem;
        left: 2%;
        position: absolute;
        top: 2.5%;
    }
    .navigation-item
    {
        margin: 0.3rem;
        padding: 0.5rem;
        width: 5rem;
        height: 5rem;
        transition: background-color 0.2s, color 0.5s, box-shadow 0.2s;
    }
    .navigation-item:hover
    {
        background-color: rgb(0, 46, 24);
        box-shadow: 0px 0px 40px 1px rgb(0, 88, 46);
        color: rgb(0, 255, 136);
    }
    .navigation-item:hover > .material-symbols-outlined
    {
        font-variation-settings:
        'FILL' 2,
        'wght' 800,
        'GRAD' 0,
        'opsz' 48;
    }
    /* Auth */
    .auth-wrapper{width: 40%;}
    /* Account */
    .account-card{margin: 2rem;}
}

/* Either */
/* Navigation */
.navigation-container
{
    background: linear-gradient(180deg, rgb(25, 25, 41), rgb(24, 24, 24));
    display: flex;
    flex-direction: row;
    justify-content: center;
    min-width: 320px;
    padding: 0.5rem;
    text-align: center;
    width: 100%;
}
.navigation-items
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 50%;
}
.navigation-item
{
    border-radius: 100%;
    color: rgb(0, 209, 112);
}
/* Auth */
.auth-wrapper
{
    background-color: rgb(19, 19, 26);
    border: 3px solid rgb(0, 59, 32);
    border-radius: 0.5rem;
    box-shadow: 0px 0px 40px 1px rgb(0, 46, 24);
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 60%;
    transform: translate(-50%, -60%);
}
.auth-title
{
    color: rgb(0, 209, 112);
    font-size: 2rem;
    font-weight: bold;
    margin: 0.5rem 0;
    /* Align title center horizontal */
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.auth-content
{
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    width: 100%;
}
.auth-label
{
    color: rgb(0, 209, 112);
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0.5rem 0;
    /* Align label center horizontal */
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.auth-input
{
    background-color: rgb(24, 24, 24);
    border: 2px solid rgb(0, 59, 32);
    border-radius: 0.5rem;
    color: rgb(0, 209, 112);
    font-size: 1rem;
    margin: 0.5rem 0;
    padding: 0.5rem;
    width: 100%;
    text-align: center;
}
.auth-input::placeholder
{
    color: rgb(233, 233, 233);
    font-size: 1rem;
    text-align: center;
}
.auth-button
{
    background-color: rgb(24, 24, 24);
    border: 2px solid rgb(0, 209, 112);
    border-radius: 0.5rem;
    color: rgb(233, 233, 233);
    font-size: 1rem;
    font-weight: bold;
    margin-top: 1.5rem;
    padding: 0.5rem;
    width: 100%;
    transition: background-color 0.2s, color 0.2s;
}
.auth-button:hover
{
    background-color: rgb(0, 209, 112);
    color: rgb(24, 24, 24);
}
.auth-remember
{
    color: rgb(233, 233, 233);
    font-size: 1rem;
    margin: 0.5rem 0;
    /* Align remember center horizontal */
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.auth-checkbox{margin: 0 0.5rem;}
/* Account */
.account-card
{
    background-color: rgb(19, 19, 26);
    border: 3px solid rgb(0, 59, 32);
    border-radius: 0.5rem;
    box-shadow: 0px 0px 40px 1px rgb(0, 46, 24);
    display: flex;
    font-weight: bold;
    flex-direction: column;
    justify-content: center;
}
.account-title
{
    color: rgb(233, 233, 233);
    font-size: 2rem;
    margin: 0.5rem 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.account-card-title
{
    color: rgb(0, 209, 112);
    margin-top: 1rem;
    text-align: center;
}
.account-card-status
{
    align-items: center;
    color: rgb(233, 233, 233);
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0.5rem;
}
.account-card-content
{
    color: rgb(233, 233, 233);
    margin: 0.5rem 1rem;
}
.account-card-text
{
    color: rgb(233, 233, 233);
    display: flex;
    font-size: 1rem;
    flex-direction: column;
    margin: 0.5rem;
}
.account-card-data
{
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0.5rem;
}
.account-card-divider
{
    border: 1px solid rgb(0, 209, 112);
    margin: 0.5rem;
}
.account-card-other-users
{
    color: rgb(233, 233, 233);
    margin: 0.5rem;
    display: flex;
    flex-direction: row;
    justify-content: center;

}
.account-card-profile
{
    align-items: center;
    color: rgb(233, 233, 233);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0.5rem;
}
.account-card-profile-picture
{
    border: 2px solid rgb(0, 209, 112);
    border-radius: 100%;
    height: 5rem;
    object-fit: cover;
    width: 5rem;
}
/* Categories */
.category-card
{
    background-color: rgb(19, 19, 26);
    border: 3px solid rgb(0, 59, 32);
    box-shadow: 0px 0px 40px 1px rgb(0, 46, 24);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.category-card-title
{
    color: rgb(0, 209, 112);
    font-size: 1.5rem;
    margin: 0.25rem;
    text-align: center;
    text-decoration: none;
}
.category-card-content
{
    color: rgb(233, 233, 233);
    font-size: 1rem;
    margin: 0.5rem;
    text-align: center;
}
/* Videos */
.video-card
{
    background-color: rgb(19, 19, 26);
    border: 3px solid rgb(0, 59, 32);
    box-shadow: 0px 0px 40px 1px rgb(0, 46, 24);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0.25rem;
}
.video-card-title
{
    color: rgb(0, 209, 112);
    font-size: 1.25rem;
    text-align: center;
    text-decoration: none;
}
.video-card-content
{
    color: rgb(233, 233, 233);
    font-size: 1rem;
    margin: 0.25rem;
    text-align: center;
}

/* Video */
.video-title
{
    color: rgb(0, 209, 112) !important;
}
.video-title-text, .video-title
{
    color: rgb(233, 233, 233);
    font-size: 1.5rem;
    text-align: center;
}
.video-text
{
    color: rgb(233, 233, 233);
    font-size: 1rem;
    margin: 0.25rem;
    text-align: center;
}
.video-player, video
{
    /* Make sure video is not bigger than half the page */
    max-height: 100%;
    max-width: 75vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0 auto;
}
/* Other */
.no-text-makeup
{
    text-decoration: none;
}
.upload-image
{
    /* center image */
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0 auto;
    width: 80%;
    height: 70%;

}