/*
Theme Name: Schoeler
Theme URI:
Author: Studiopositiv
Author URI: https://studiopositiv.de/
Description:
Version: 1.0
License: Proprietary
License URI:
Text Domain: schoeler
*/

@import url("https://use.typekit.net/kpy4nzv.css");

@font-face {
    font-display: swap;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/open-sans-v44-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
    font-display: swap;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/open-sans-v44-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    --primary-color: #8c1b97;
    --secondary-color: #e0d9c7;
    --accent-color: #181818;
}

html {
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    text-wrap: pretty;
}

@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
}

::view-transition-old(root) {
    animation-name: fade-out;
}

::view-transition-new(root) {
    animation-name: fade-in;
}

@keyframes fade-out {
    to {
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 28px;
    background-color: var(--secondary-color);
    color: var(--accent-color);
    padding: 60px 20px 140px 20px;
    margin: 0 auto;
    max-width: 1000px;
}

body.home {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

h1 {
    font-family: "halyard-display", sans-serif;
    font-weight: 700;
    font-style: normal;
    margin-top: 0;
    margin-bottom: 40px;
}

h1 small {
    font-weight: 400;
}

h1:has(+ h2) {
    margin-bottom: 0;
}

h1 + h2 {
    margin-top: 10px;
    font-weight: normal;
}

h2 {
    font-size: 16px;
    font-weight: bold;
}

nav {
    margin-top: 80px;
}

.navigation-chapter a {
    display: block;
    padding: 40px 0;
    border-top: 1px solid var(--secondary-color);
}

.navigation-chapter a:link,
.navigation-chapter a:visited {
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 20px;
}

.navigation-chapter a:hover,
.navigation-chapter a:active,
.navigation-chapter a:focus {
    color: var(--accent-color);
}

.navigation-chapter .title {
    font-weight: 700;
}

.chapter {
    font-size: 20px;
    color: var(--primary-color);
    margin-top: 20px;
    margin-bottom: 20px;
}

.navigation-chapter .chapter {
    color: var(--accent-color);
    margin-bottom: 10px;
}

.navigation-back {
    text-align: right;
    line-height: 0;
}

img {
    transition: transform 0.3s ease-in-out;
}

.navigation-back:hover img {
    transform: rotate(90deg);
}

.navigation-paginator {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.navigation-paginator a {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 16px;
    font-weight: 700;
}

.navigation-paginator a:link,
.navigation-paginator a:visited {
    color: var(--accent-color);
    text-decoration: none;
}

.navigation-paginator a:hover {
    color: var(--primary-color);
}