:root {
        color-scheme: light dark;
        --body-bg: light-dark(#E8EAF6, #333);
        --body-fg: light-dark(#000, #DDD);
        --link-color: light-dark(#7B1FA2, #42A5F5);
        --link-hover: light-dark(#7986CB, #90CAF9);
        --accent-color: light-dark(#4A148C, #A770EB);
        --menu-color: #FFF;
        --menu-bg: #111;
        --menu-hover-bg: light-dark(#4A148C, #222);
        --darkmode-toggle-fg: light-dark(#DDD, #333);
        --darkmode-toggle-bg: light-dark(#333, #DDD);
}

* {
        font-family: BarlowCondensed;
        margin: 0;
        padding: 0;
}

.dark {
        color-scheme: dark;
}

.light {
        color-scheme: light;
}

li {
        margin-left: 1em;
}

button {
        font-size: 1em;
        padding: 0.1em 0.25em;
}

body {
        background-color: var(--body-bg);
        color: var(--body-fg);
        font-size: clamp(1.375rem, 0.75rem + 0.7813vw, 2rem);
}

body a {
        color: var(--link-color);
}

body a:hover {
        color: var(--link-hover);
}


h1 {
        font-weight: 400;
        color: var(--accent-color);
        font-size: 2em;
        margin-bottom: 0.25em;
}

h2 {
        color: var(--accent-color);
        font-weight: 400;
        font-size: 1.5em;
        margin-bottom: 0.25em;
}

p {
        margin-bottom: 1em;
}

b{
        font-weight:600;
}

#page-wrapper {
        margin: auto;
        padding: 1em;
        max-width: 1280px;
}

#title {
        text-decoration: none;
        color: var(--accent-color);
        display: inline;
        font-size: 4em;
        font-weight: 400;
        text-transform: uppercase;
        cursor: pointer;
}

#darkmode-toggle {
        margin-top: 1em;
        float: right;
        padding: 0.5em;
        background-color: var(--darkmode-toggle-bg);
        fill: var(--darkmode-toggle-fg);
}

#darkmode-toggle #lightmode {
        display: none;
}

#darkmode-toggle #darkmode {
        display: block;
}

.dark #darkmode-toggle #lightmode {
        display: block;
}

.dark #darkmode-toggle #darkmode {
        display: none;
}

.nav {
        background-color: var(--menu-bg);
        text-align: center;
        margin-bottom: 2em;
}

.nav ul {
        list-style-type: none;
        margin: auto;
}


.nav ul li {
        margin-left: 0;
        color: var(--menu-color);
        text-decoration: none;
        font-weight: 500;
        cursor: pointer;
}

.nav ul li:hover {
        background-color: var(--menu-hover-bg);
}

.nav ul li a {
        box-sizing: border-box;
        padding: 0.5em;
        color: inherit;
        display: block;
        width: 100%;
        height: 100%;
        text-decoration: none;
}


.flex-wrapper {
        display: block;
        gap: 1em;
}

.flex-col {
        flex-basis: 0;
        flex-grow: 1;
}

.block {
        border: 5px solid var(--menu-bg);
        padding: 0.5em;
        margin-bottom: 1em;
        font-weight: 300;
}

@media (min-width: 782px) {
        .flex-wrapper {
                display: flex;
        }

        .nav ul {
                display: flex;
        }

        .nav ul li {
                flex-grow: 1;
                display: inline-block;
        }

        .nav ul li a {
                padding: 1em;
        }

        #google_calendar {
                width: 400px;
                height: 300px;
        }
}

@media (min-width: 1280px) {
        #google_calendar {
                width: 600px;
                height: 400px;
        }
}

@media (min-width: 1800px) {
        #google_calendar {
                width: 800px;
                height: 600px;
        }
}