:root {
    --font-size: 16px;
    --font-stack: Helvetica, Montserrat;

    --padding: var(--font-size);

    --primary: #386462;
    --primary-dark: #1f2937;
    --primary-light: #8AB9D8;
    --link: #1A6FA8;
    --link-hover: #0D4F7A;
    --dark: #222623;
    --grey: #B0B5B2;
    --light: #F2F5FF;
    --surface: #FFFFFF;
    --border: #DCE5E1;
    --success: #8CAE68;
    --warning: #F5CB5C;
    --danger: #CE272A;
    --info: #56A3A6;

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #386462;
        --primary-dark: #8AB9D8;
        --primary-light: #1f2937;
        --link: #5AACE0;
        --link-hover: #7DC0EA;
        --dark: #F2F5FF;
        --grey: #6B7370;
        --light: #222623;
        --surface: #1A201C;
        --border: #2E3830;
        --success: #7FA85C;
        --warning: #D4A93A;
        --danger: #E04547;
        --info: #4A9598;
    }
}

* {
    box-sizing: border-box;
}

.dark {
    color-scheme: only dark;
}

.light {
    color-scheme: only light;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-stack), serif;
    font-size: var(--font-size);
    line-height: calc(var(--font-size) * 1.5);
    color: var(--dark);
    background-color: var(--primary-light);
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    margin-block: calc(var(--font-size) * 0.75);
}

a {
    color: var(--link);
    text-decoration: none;

    &:hover {
        color: var(--link-hover);
        text-decoration: underline;
    }

    &:visited {
        color: var(--link);
    }
}

img {
    width: 80px;
    height: auto;
}

.button-filled {
    width: fit-content;
    cursor: pointer;
    color: var(--light);
    @media (prefers-color-scheme: dark) {
        color: var(--dark);
    }
    background-color: var(--primary);
    border: 1px solid var(--primary);
    padding: calc(var(--padding) / 1.75) var(--padding);
    border-radius: calc(var(--padding) / 2);
    margin-block: calc(var(--padding) / 2);

    &:hover {
        color: var(--primary);
        background-color: transparent;
    }
}

.app {
    width: 100%;
    min-height: 100dvh;
    overflow-y: auto;
}

.login {
    width: 100%;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    .form{
        width: calc(100dvw / 1.25);
        margin: 0 auto;
        padding: var(--padding);
        border-radius: var(--padding);
        box-shadow: 0 0 8px 0 rgba(10, 10, 10, .08);
        background-color: var(--light);
        @media screen and (width >= 1440px) {
            width: calc(100dvw / 2.5);
            grid-column: 1/-1;
            grid-row: 1/-1;
            box-shadow: 0 0 8px 0 rgba(10, 10, 10, .15);
        }
    }
}

.form {
    display: flex;
    flex-direction: column;
    gap: var(--padding);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: calc(var(--padding) / 2);
}

.form-inline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: calc(var(--padding) / 2);

    .form-label {
        padding-inline: 0;
    }
}

.form-error {
    margin-block: 0;
    padding: calc(var(--padding) / 2) var(--padding);
    color: var(--danger);
    background-color: rgba(206, 39, 42, .1);
    border-radius: calc(var(--padding) / 2);
}

.form-label {
    padding: 0 var(--padding);
}

.form-input {
    font-size: var(--font-size);
    padding: calc(var(--padding) / 2) var(--padding);
    border-radius: calc(var(--padding) / 2);
    border: 1px solid var(--primary-dark);
    color: inherit;
    background-color: transparent;
}

.navbar {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding);

    @media screen and (width >= 1440px) {
        padding-inline: 16%;
    }
}

.app-icon {
    width: 64px;
    height: auto;
}

.logout-icon {
    width: 32px;
    height: auto;
}

.main {
    padding-inline: var(--padding);
    @media screen and (width >= 1440px) {
        padding-inline: 16%;
    }
}

.welcome {
    width: 100%;
    text-align: center;
    margin-block: calc(var(--padding) * 4);
}

.box {
    width: 100%;
    padding: var(--padding);
    border-radius: calc(var(--padding) * 2);
    margin-block: var(--padding);
    box-shadow: 0 0 4px rgba(34, 38, 35, .16);
    color: light-dark(var(--dark), var(--light));
    background-color: light-dark(var(--light), var(--dark));
}

.gallery {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--padding);
    flex-wrap: wrap;

    h2 {
        width: 100%;
        padding-inline: var(--padding);
    }
}

.item {
    flex: 1 1 auto;
    padding: var(--padding);
    border-radius: var(--padding);
    box-shadow: 0 0 4px rgba(34, 38, 35, .16);
    text-decoration: none;
    transition: all .3s ease-in-out;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}

a.item:hover {
    text-decoration: none;
    box-shadow: none;
}

.item.success {
    font-weight: bold;
    color: var(--success);
    background-color: rgba(140, 174, 104, .25);
}

a.disabled,
.disabled {
    cursor: default;
    pointer-events: none;
    color: var(--grey);
    background-color: rgba(176, 181, 178, .125);
    box-shadow: none;
}

.comingsoon {
    font-weight: bold;
    text-transform: uppercase;
    font-size: .8em;
    padding: calc(var(--padding) / 4) calc(var(--padding) / 2);
    border-radius: var(--padding);
    color: light-dark(var(--light), var(--dark));
    background-color: var(--primary);
    backdrop-filter: blur(16px);
}