@font-face {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    src: url(/src/fonts/roboto.woff2) format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display', serif;
    font-style: normal;
    src: url(/src/fonts/playfair-display.woff2) format('woff2');
    font-display: swap;
}

:root {
    /* Expressive Spatial */
    --motion-expressive-fast-spatial: 350ms cubic-bezier(0.42, 1.67, 0.21, 0.90);
    --motion-expressive-default-spatial: 500ms cubic-bezier(0.38, 1.21, 0.22, 1.00);
    --motion-expressive-slow-spatial: 650ms cubic-bezier(0.39, 1.29, 0.35, 0.98);

    /* Expressive Effects */
    --motion-expressive-fast-effects: 150ms cubic-bezier(0.31, 0.94, 0.34, 1.00);
    --motion-expressive-default-effects: 200ms cubic-bezier(0.34, 0.80, 0.34, 1.00);
    --motion-expressive-slow-effects: 300ms cubic-bezier(0.34, 0.88, 0.34, 1.00);

    /* Standard Spatial */
    --motion-standard-fast-spatial: 350ms cubic-bezier(0.27, 1.06, 0.18, 1.00);
    --motion-standard-default-spatial: 500ms cubic-bezier(0.27, 1.06, 0.18, 1.00);
    --motion-standard-slow-spatial: 750ms cubic-bezier(0.27, 1.06, 0.18, 1.00);

    /* Standard Effects */
    --motion-standard-fast-effects: 150ms cubic-bezier(0.31, 0.94, 0.34, 1.00);
    --motion-standard-default-effects: 200ms cubic-bezier(0.34, 0.80, 0.34, 1.00);
    --motion-standard-slow-effects: 300ms cubic-bezier(0.34, 0.88, 0.34, 1.00);
}

::selection {
    background-color: var(--md-sys-color-on-surface);
    color: var(--md-sys-color-surface);
}

* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Playfair Display";
    font-weight: 600 !important;
}

html {
    color-scheme: var(--color-scheme);
}

body {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);

    font-family: "Roboto", sans-serif;
    margin-block-start: 94px;
    margin-block-end: 150px;
}

section {
    display: none;
    flex-direction: column;
}

section.active {
    display: flex;
}

hr {
    border: 1px solid var(--md-sys-color-outline-variant);
}

a {
    display: inline-block;
    position: relative;
    color: var(--md-sys-color-primary);
    text-decoration: none;
    padding: 1px;
    z-index: 1;
}

a::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 102%;
    height: 2px;
    background-color: var(--md-sys-color-primary);
    transition: all var(--motion-expressive-default-effects);
    opacity: 0.6;
    border-radius: 6px;
    z-index: -1;
}

a:hover {
    color: var(--md-sys-color-on-primary);
    z-index: 2;
}

a:hover::before {
    opacity: 1;
    background-color: var(--md-sys-color-primary);
    height: 22px;
    z-index: -1;
}

.content {
    transition: all var(--motion-expressive-default-effects);

    & .top-bar {
        transition: all var(--motion-expressive-default-effects);
    }
}

@media (min-width: 768px) {
    .content {
        margin-inline-start: 250px;
    }
}