@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

html, body {
    margin: 0;
    padding: 0;
    line-height: 1.6;
    font-family: var(--default-font-family);
    font-size: var(--font-size-default);
    color: var(--text-color-default);
    background-color: var(--background-color-default);
    overflow-x: hidden;
}

/* START: headers */
h1 {
    font-size: var(--h1-font-size);
    font-family: var(--header-font-family);
    margin-top: 2vw;
    margin-bottom: 1vw;
}

h2 {
    font-size: var(--h2-font-size);
    font-family: var(--header-font-family);
    margin-top: 0;
    margin-bottom: 1vw;
}

h3 {
    font-size: var(--h3-font-size);
    font-family: var(--header-font-family);
    margin-top: 0;
    margin-bottom: 1vw;
}

h4 {
    font-size: var(--h4-font-size);
    font-family: var(--header-font-family);
    margin-top: 0;
    margin-bottom: 0;
}

/* END: headers */

/* START: utility classes */

.shadow-large {
    filter: drop-shadow(0px 0px 10px var(--drop-shadow-color-default));
}

.shadow-large .shadow-hover:hover {
    filter: drop-shadow(0px 0px 10px var(--drop-shadow-color-contrast));
}

.shadow-small {
    filter: drop-shadow(0px 0px 5px var(--drop-shadow-color-default));
    transition: filter 0.2s ease;
}

.shadow-small.shadow-hover:hover {
    filter: drop-shadow(0px 0px 2px var(--drop-shadow-color-contrast));
}

.nowrap {
    white-space: nowrap;
}

.clickable {
    cursor: pointer;
}

.notclickable {
    cursor: default;
}

.hidden {
    display: none;
}

.no-scroll-bar::-webkit-scrollbar {
    display: none;
}

.no-scroll-bar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.push-to-bottom {
}

/* END: utility classes */

/* START: links */
a {
    text-decoration: none;
    transition: all 0.1s ease;
}

a:not(.nostyle) {
    color: var(--text-color-link);
}

a.inverted-link:not(.nostyle) {
    color: var(--text-color-link-inverted);
}

a.nostyle {
    color: var(--text-color-default);
}

a:not(.nostyle):hover {
    border-bottom: 2px solid var(--text-color-link);
    font-weight: bold;
}

a:focus {
    outline: none;
}

/* END: links */

/* START: containers */
.site-container {
    padding: 0;
}

.section-regular-text {
    padding-left: 10px;
    border-left: 2px solid var(--background-color-medium-highlight);
    margin-bottom: 40px;
}

.section-large-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    grid-gap: 30px;
    margin-bottom: 20px;
}

.section-large-grid .grid-item {
    margin-bottom: 5px;
}

.section-large-separators {
    margin-top: 120px;
    margin-bottom: 120px;
}

.section-page-footer {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-evenly;
    margin-top: 40px;
    padding: 20px 5vw;
    background-color: var(--background-color-minor-highlight);
}

/* END: containers */

/* START: sidebar */
.glass-blur {
    background-color: var(--background-color-transparent-overlay);
    backdrop-filter: blur(10px);
}

.navigation-sidebar {
    position: fixed;
    top: 0;
    left: calc(-1 * var(--navigation-sidebar-width) - 30px);
    width: var(--navigation-sidebar-width);
    height: 100vh;

    padding: 40px 10px 10px 20px;

    z-index: 100;
    font-size: var(--font-size-larger);
    line-height: 40px;

    transition: all 0.3s cubic-bezier(0.99, 0.010000000000000009, 0.79, 0.37) 0s;
}

.navigation-sidebar.navigation-sidebar-open {
    left: 0;
}

.navigation-sidebar-icon-close {
    position: absolute;
    top: 10px;
    right: 24px;
    font-size: 24px;
}

.navigation-sidebar-icon-open {
    position: fixed;
    top: 10px;
    left: 24px;
    font-size: 24px;
    animation-delay: 2s;
    animation: navigation-sidebar-icon-open-bouncing 0.5s ease-in-out 1s;
}

@keyframes navigation-sidebar-icon-open-bouncing {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

.sidebar-dropdown {
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
}

.sidebar-dropdown:after {
    content: ' ▾';
}

.sidebar-dropdown:hover:after {
    content: ' ▴';
}

.sidebar-dropdown-content {
    display: none;
    position: absolute;
    min-width: 180px;
    padding: 10px 15px;
    margin: 5px 0 0 10px;
    z-index: 101;
}

.sidebar-dropdown:hover .sidebar-dropdown-content {
    display: block;
}

/* END: sidebar */

/* START: content-card */
.content-card {
    background-color: var(--background-color-minor-highlight);
    border-radius: 6px;
    transition: all 0.3s linear;
}

.content-card:hover {
    box-shadow: 0 5px 0 0 var(--background-color-medium-highlight);
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

.content-card img:nth-of-type(1) {
    width: 100%;
    height: auto;
    border-radius: 4px 4px 4px 4px;
    margin-bottom: -7px;
    filter: saturate(1) brightness(1);
    transition: filter 0.3s ease;
}

.content-card-cover img:nth-of-type(1) {
    max-height: 250px;
    object-fit: cover;
}

.content-card:hover img:nth-of-type(1) {
    filter: saturate(1.2) brightness(1.1);
}

.content-card div {
    padding: 8px 8px 12px 13px;
}

/* START: rainbow hover effect */
.rainbow-hover-active {
    background: linear-gradient(86deg, #e700ff, #ff0090, #ff0000, #ff6700, #ffb600, #1cc600, #2c41ec);
    background-size: 2000% 2000%;

    -webkit-animation: rainbow-gradient-animation 40s ease infinite;
    -moz-animation: rainbow-gradient-animation 40s ease infinite;
    animation: rainbow-gradient-animation 40s ease infinite;
}

@-webkit-keyframes rainbow-gradient-animation {
    0% {
        background-position: 0 51%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0 51%
    }
}

@-moz-keyframes rainbow-gradient-animation {
    0% {
        background-position: 0 51%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0 51%
    }
}

@keyframes rainbow-gradient-animation {
    0% {
        background-position: 0 51%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0 51%
    }
}

/* END: rainbow hover effect */

/* START: fade-in effect */
.fade-in {
    animation: fade-in 0.5s ease-in-out;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* END: fade-in effect */

/* START: root */
:root {
    --default-font-family: 'Open Sans', 'Roboto', sans-serif;
    --font-size-default: 18px;
    --font-size-larger: 20px;

    --header-font-family: 'Roboto Slab', serif;
    --h1-font-size: min(55px, max(45px, 5vw));
    --h2-font-size: min(40px, max(30px, 4vw));
    --h3-font-size: min(40px, max(20px, 2.4vw));
    --h4-font-size: min(22px, max(18px, 2vw));

    --navigation-sidebar-width: max(250px, min(350px, 25vw));
}

/*@media (prefers-color-scheme: dark) {*/
:root {
    --text-color-default: #fff;
    --text-color-default-inverted: #181818;
    --text-color-link: #86a7ff;
    --text-color-link-inverted: #235aff;
    --background-color-default: #22222f;
    --background-color-default-inverted: #e9e9ee;
    --background-color-minor-highlight: #343449;
    --background-color-medium-highlight: #8585b0;
    --background-color-strong-highlight: #4848ff;
    --background-color-contrast-highlight: #dda02b;
    --background-color-transparent-overlay: rgba(58, 58, 77, 0.62);
    --drop-shadow-color-default: #0f0f11;
    --drop-shadow-color-contrast: rgba(180, 143, 0, 0.71);
}

/*}*/

/*@media (prefers-color-scheme: light) {
    :root {
        --text-color-default: #000;
        --text-color-default-inverted: #fff;
        --text-color-link: #7393ff;
        --text-color-link-inverted: #7393ff;
        --background-color-default: #fff;
        --background-color-default-inverted: #282828;
        --background-color-minor-highlight: #7cd5df;
        --background-color-medium-highlight: #989898;
        --background-color-strong-highlight: #3e80ff;
        --background-color-contrast-highlight: #3e80ff;
        --background-color-transparent-overlay: rgba(133, 133, 176, 0.42);
        --drop-shadow-color-default: #bdbdbd;
        --drop-shadow-color-contrast: rgba(180, 143, 0, 0.71);
    }
}*/

/* mobile */
@media screen and (max-width: 768px) {
    :root {
        --font-size-default: 16px;
        --font-size-larger: 19px;
    }

    .site-container {
        margin: 5%;
    }
}

/* desktop */
@media screen and (min-width: 768px) {
    :root {
        --font-size-default: 17px;
        --font-size-larger: 20px;
    }

    .site-container {
        margin: 50px 10%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
    .site-container {
        margin: 50px 5%;
    }
}

/* END: root */