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

li {
        margin-left: 1em;
}

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

body {
        background-color: #E8EAF6;
        color: #000;
        font-size: 22px;
}

body a {
        color: #7B1FA2;
}

body a:hover {
        color: #7986CB;
}


h1 {
        font-weight: 400;
        color: #4A148C;
        font-size: 2em;
        margin-bottom: 0.25em;
}

h2 {
        color: #4A148C;
        font-weight: 400;
        font-size: 1.8em;
        margin-bottom: 0.25em;
}

p {
        margin-bottom: 1em;
}

#page-wrapper {
        margin: auto;
        padding: 1em;
}

#title {
        text-decoration: none;
        color: #4A148C;
        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: #111;
        fill: #DDD;
}

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

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

.nav {
        background-color: #111;
        text-align: center;
        margin-bottom: 2em;
}

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


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

.nav ul li:hover {
        background-color: #4A148C;
}

.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 #111;
        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) {
        body {
                font-size: 1.5em;
        }

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

@media (min-width: 1800px) {
        body {
                font-size: 2em;
        }

        #google_calendar {
                width: 800px;
                height: 600px;
        }
}