@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --background-color: #ffffff;
    --color: #000000;

    --button-background-color: #cbcbcb;
    --button-hover-background-color: #b8b8b8;
    --button-color: #000000;

    --button-leave-background-color: #ff5f5f;
    --button-leave-hover-background-color: #ff3737;
    --button-leave-color: #000000;

    --header-footer-background-color: #e2e2e2;

    --light-background-color: #e8e8e8;
    --lighter-background-color: #ececec;
}

[data-theme="dark"] {
    --background-color: #343a40;
    --color: #ffffff;

    --button-background-color: #ffffff;
    --button-hover-background-color: #cdcdcd;
    --button-color: #000000;

    --button-leave-background-color: #ff5f5f;
    --button-leave-hover-background-color: #ff3737;
    --button-leave-color: #ffffff;

    --header-footer-background-color: #2d3237;

    --light-background-color: #4c545d;
    --lighter-background-color: #9ca7b2;
}

[data-theme="light"] {
    --background-color: #ffffff;
    --color: #000000;

    --button-background-color: #e8e8e8;
    --button-hover-background-color: #d6d6d6;
    --button-color: #000000;

    --button-leave-background-color: #ff5f5f;
    --button-leave-hover-background-color: #ff3737;
    --button-leave-color: #000000;

    --header-footer-background-color: #e8e8e8;

    --light-background-color: #e8e8e8;
    --lighter-background-color: #ececec;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    color: var(--color);
}

body { background-color: var(--background-color); }

p, h1, h2, h3, h4, h5, h6 { font-size: 14px; }

.oversized { font-weight: bold; font-size: 40px; }

.title { font-weight: bold; font-size: 26px; }

.subtitle { font-size: 15px; font-style: italic; }

.heading-1 { font-size: 20px; }

.heading-2 { font-size: 16px; }

.heading-3 { font-size: 14px; }

input {
    display: block;
    border: none;
    border-radius: 1em;
    padding: 1em;
}

button, select {
    padding: 1em;
    border: none;
    border-radius: 1em;
    background-color: var(--button-background-color);
    color: var(--button-color);
}

button:hover { cursor: pointer; background-color: var(--button-hover-background-color); }

.leave { background-color: var(--button-leave-background-color); color: var(--button-leave-color); }

.leave:hover { background-color: var(--button-leave-hover-background-color); }

.header, .footer {
    position: fixed;
    left: 0;
    width: 100%;
    padding: 10px;
    z-index: 1000;
}

.header { top: 0; background-color: var(--header-footer-background-color); }

.footer { bottom: 0; background-color: var(--header-footer-background-color); }

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

ul {
    display: flex;
    list-style: none;
    padding: 0;
}

li { margin-right: 15px; }

.container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px);
    padding-top: 50px;
}

.options, .period, .schedule {
    padding: 20px;
    border-radius: 8px;
}

.content { display: flex; }

.period {
    flex: 1;
    background-color: var(--light-background-color);
    margin-right: 10px;
    margin-left: 20px;
}

.schedule {
    flex: 1;
    background-color: var(--lighter-background-color);
    margin-left: 10px;
    margin-right: 20px;
}