:root {
    --outline-color: rgba(111,184,255, .75);
}

@font-face {
    font-display: swap;
	font-family: "mignon";
	font-weight: normal;
    font-style: normal;
    src: url('./fonts/mignon.woff') format("woff");
}

@font-face {
    font-display: swap;
    font-family: "ExoLight";
    src: url('./fonts/ExoLight.woff') format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-display: swap;
    font-family: "Exo";
    src: url('./fonts/ExoRegular.woff') format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-display: fallback;
    font-family: "Inter";
    src: url("./fonts/InterRegular.woff2") format("woff2");
}

@font-face {
    font-display: fallback;
    font-family: "Inter";
    font-weight: 700;
    src: url("./fonts/InterMedium.woff2") format("woff2");
}

@supports (font-variation-settings: normal) {
    @font-face {
        font-display: swap;
        font-family: "ExoVariable";
        font-weight: 100 900;
        src: url("./fonts/Exo2.woff2") format("woff2 supports variations"),
             url("./fonts/Exo2.woff2") format("woff2-variations");
    }

    @font-face {
        font-display: swap;
        font-family: "ExoVariable";
        font-style: italic;
        font-weight: 100 900;
        src: url("./fonts/Exo2Italic.woff2") format("woff2 supports variations"),
             url("./fonts/Exo2Italic.woff2") format("woff2-variations");
    }

    @font-face {
        font-display: swap;
        font-family: "InterVariable";
        font-weight: 100 900;
        font-style: oblique 0deg 8deg;
        src: url("./fonts/Inter.woff2") format("woff2 supports variations"),
             url("./fonts/Inter.woff2") format("woff2-variations");
    }
}

*, *:before, *:after {
    background: transparent;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    vertical-align: baseline;
    font: inherit;
    font-family: inherit;
    font-size: 100%;
    line-height: 1;
    box-sizing: border-box;
}

/* a:focus:not([aria-disabled="true"]) {
    outline: 3px solid var(--outline-color);
    outline-offset: 2px;
    -moz-outline-radius: 3px;
    transition: outline .15s ease-in, outline-offset .15s ease-in;
} */

html[data-theme~="home"] {
    --root-bg: #fff;
    --heading-font: mignon, Palatino, "Palatino Linotype", "Hoefler Text", Times, "Times New Roman", serif;
    --root-font: Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
}

html[data-theme~="deep-blue"] {
    --root-bg: #132e47;
    --root-font: Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
    --root-color: #FFF;
    --heading-font: mignon, Palatino, "Palatino Linotype", "Hoefler Text", Times, "Times New Roman", serif;
    --link-color: #37a3d4;
    --header-before: #16212d;
    --header-after: #132e47;
    --chapter-title-shadow: #16212d;
    --books-bg: #122b42;
    --footnotes-bg: #122b42;
    --button-bg: #ff3e3c;
    --button-radius: 8px;
    --contents-bg: #122b42;
    --contents-hover-bg: #0f263b;
}

html[data-theme~="ink"] {
    --root-bg: #363843;
    --root-font: Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
    --root-color: #FFF;
    --heading-font: mignon, Palatino, "Palatino Linotype", "Hoefler Text", Times, "Times New Roman", serif;
    --link-color: #37a3d4;
    --header-before: #2b2f39;
    --header-after: #363843;
    --chapter-title-shadow: #232428;
    --books-bg: #2e303a;
    --footnotes-bg: #2e303a;
    --button-bg: #ff3e3c;
    --button-radius: 8px;
    --contents-bg: #2e303a;
    --contents-hover-bg: #252730;
}

html[data-theme~="white"] {
    --root-bg: #f4f4f2;
    --root-font: Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
    --root-color: #343534;
    --heading-font: mignon, Palatino, "Palatino Linotype", "Hoefler Text", Times, "Times New Roman", serif;
    --link-color: #d82229;
    --link-color-hover: #ff3e3c;
    --header-before: #fff;
    --header-after: #f4f4f2;
    --chapter-title-shadow: #fff;
    --books-bg: #eaeae8;
    --footnotes-bg: #eaeae8;
    --border-color: #b1b3b3;
    --button-bg: #ff3e3c;
    --button-radius: 8px;
    --contents-bg: #eaeae8;
    --contents-hover-bg: #e2e2df;
}

html[data-theme~="gray"] {
    --root-bg: #c4c7c7;
    --root-font: Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
    --root-color: #2b2b2b;
    --heading-font: mignon, Palatino, "Palatino Linotype", "Hoefler Text", Times, "Times New Roman", serif;
    --link-color: #e14f4e;
    --link-color-hover: #37a3d4;
    --header-before: #dadadc;
    --header-after: #c4c7c7;
    --chapter-title-shadow: #d9d9db;
    --books-bg: #b1b4b4;
    --footnotes-bg: #b1b4b4;
    --border-color: #b1b3b3;
    --button-bg: #ff3e3c;
    --button-radius: 8px;
    --contents-bg: #b1b4b4;
    --contents-hover-bg: #a6aaaa;
}

html[data-theme~="beige"] {
    --root-bg: #e8e6d9;
    --root-font: ExoLight, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
    --root-color: #2b2b2b;
    --heading-font: Exo, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
    --link-color: #e31146;
    --link-color-hover: #37a3d4;
    --header-before: #f7f5e8;
    --header-after: #e8e6d9;
    --chapter-title-shadow: #f7f5e8;
    --books-bg: #dfdccf;
    --footnotes-bg: #dfdccf;
    --border-color: #adadad;
    --button-bg: #e31146;
    --button-radius: 4px;
    --contents-bg: #dfdccf;
    --contents-hover-bg: #dad6c9;
}

html[data-theme~="light-blue"] {
    --root-bg: #ebf7ff;
    --root-font: ExoLight, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
    --root-color: #2b2b2b;
    --heading-font: Exo, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
    --link-color: #e31146;
    --link-color-hover: #37a3d4;
    --chapter-title-shadow: #e3f0fb;
    --books-bg: #e3f0fb;
    --footnotes-bg: #e3f0fb;
    --border-color: #B1C1CD;
    --button-bg: #e31146;
    --button-radius: 4px;
    --contents-bg: #e3f0fb;
    --contents-hover-bg: #d0dce6;
}

html[data-theme~="almost-white"] {
    --root-bg: #fffffe;
    --root-font: ExoLight, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
    --root-color: #2b2b2b;
    --heading-font: Exo, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
    --link-color: #e31146;
    --link-color-hover: #37a3d4;
    --chapter-title-shadow: #f9f9f6;
    --books-bg: #f9f9f6;
    --footnotes-bg: #f9f9f6;
    --border-color: #b1b3b3;
    --button-bg: #e31146;
    --button-radius: 4px;
    --contents-bg: #f9f9f6;
    --contents-hover-bg: #f3f3eb;
}

html[data-theme~="totally-white"] {
    --root-bg: #fff;
    --root-font: ExoLight, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
    --root-color: #2b2b2b;
    --heading-font: Exo, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
    --link-color: #e31146;
    --link-color-hover: #37a3d4;
    --chapter-title-shadow: #f4f4f4;
    --books-bg: #F9F8F5;
    --footnotes-bg: #F9F8F5;
    --border-color: #b1b3b3;
    --button-bg: #e31146;
    --button-radius: 4px;
    --contents-bg: #F9F8F5;
    --contents-hover-bg: #f1f0ea;
}

html[data-theme~="white-red-white"] {
    --root-bg: #fff;
    --root-font: ExoLight, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
    --root-color: #2b2b2b;
    --heading-font: Exo, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
    --link-color: #D8242A;
    --link-color-hover: #37a3d4;
    --chapter-title-shadow: #f4f4f4;
    --books-bg: #F9F8F5;
    --footnotes-bg: #F9F8F5;
    --border-color: #b1b3b3;
    --button-bg: #D8242A;
    --button-radius: 4px;
    --contents-bg: #F9F8F5;
    --contents-hover-bg: #f1f0ea;
}

html[data-theme~="y2021"] {
    --root-bg: #fff;
    --root-font: ExoLight, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
    --root-color: #2b2b2b;
    --heading-font: Exo, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
    --link-color: #DC2D1D;
    --link-color-hover: #37a3d4;
    --chapter-title-shadow: #f4f4f4;
    --books-bg: #F9F8F5;
    --footnotes-bg: #F9F8F5;
    --border-color: #b1b3b3;
    --button-bg: #DC2D1D;
    --button-radius: 4px;
    --contents-bg: #F9F8F5;
    --contents-hover-bg: #f1f0ea;
}

@supports (font-variation-settings: normal) {
    html[data-theme~="y2021"],
    html[data-theme~="beige"],
    html[data-theme~="light-blue"],
    html[data-theme~="almost-white"],
    html[data-theme~="totally-white"],
    html[data-theme~="white-red-white"] {
        --root-font: ExoVariable, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
        --heading-font: ExoVariable, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
        /* font-variation-settings: "wght" 320; */
        font-weight: 350;
    }

    .article i, .article em {
        font-style: italic;
        font-weight: 380;
    }
}

html {
    background-color: var(--root-bg, #f8f8f8);
    word-wrap: break-word;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    min-height: 100%;
    font-family: var(--root-font);
    font-size: 18px;
    color: var(--root-color);
    letter-spacing: -0.01em;
}

@media only screen and (min-width: 768px) {
    body {
        font-size: 19px;
    }
}

@media only screen and (min-width: 990px) {
    body {
        font-size: 20px;
    }
}

ol, ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td, th {
    padding: 0;
}

th {
    text-align: center;
    vertical-align: middle;
}

td {
    vertical-align: top;
}

svg:not(:root) {
    overflow: hidden;
}

img {
    max-width: 100%;
    -ms-interpolation-mode: bicubic;
    vertical-align: middle;
}

i, em {
    font-style: italic;
}

sub, sup {
    margin: 0 2px;
    font-size: .75em;
    font-weight: 500;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

hr {
    width: 100%;
    display: block;
}

input, button,
select, textarea {
    display: inline-block;
    position: relative;
    overflow: visible;
    vertical-align: top;
    text-transform: none;
    outline: none;
}

button {
    max-width: 100%;
    text-align: center;
    text-decoration: none !important;
    outline: none;
    cursor: pointer;
    white-space: nowrap;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    user-select: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

button[disabled],
input[disabled],
.disabled {
    cursor: default !important;
}

input::-ms-clear {
    display: none;
}


a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover, a:active {
    color: var(--link-color-hover);
    text-decoration: underline;
    outline: 0;
}

h1, h2, h3, h4, h5, h6 {
    position: relative;
    font-family: var(--heading-font);
    font-weight: normal;
    text-transform: uppercase;
    line-height: 1;
}

h1:first-letter,
h2:first-letter,
h3:first-letter,
h4:first-letter,
h5:first-letter,
h6:first-letter {
    font-size: 1.2em;
}

h1 {
    font-size: 6em;
}

h2 {
    font-size: 5.5em;
}

h3 {
    font-size: 3em;
}

h4 {
    font-size: 2em;
}

h5 {
    margin-bottom: 15px;
    font-size: 1.3em;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

h6 {
    font-size: 1.2em;
    line-height: 1.3;
}

blockquote {
    padding: 0 0 0 25px;
    border-left: 3px solid #DDD;
    font-style: italic;
}

p, li {
    line-height: 1.45;
}

.nowrap {
    white-space: nowrap;
}

a:hover, .button:hover, button:hover {
    transition: color 0.2s linear, background 0.1s linear, border-color 0.1s linear;
}

.home .button.contents {
    display: none;
}

.button {
    padding: 20px 25px;
    font-weight: 700;
    font-size: 0.6em;
    text-transform: uppercase;
    user-select: none;
    color: #fff;
    border-radius: 7px;
    z-index: 90;
}

.button:hover {
    text-decoration: none;
}

.button.lang {
    padding: 6px 12px;
    top: 13vmin;
    right: 13vmin;
    position: absolute;
    color: var(--root-color);
    font-size: 15px;
    font-weight: 590;
}

.button.lang:before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-language' width='40' height='40' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M4 5h7' /%3E%3Cpath d='M9 3v2c0 4.418 -2.239 8 -5 8' /%3E%3Cpath d='M5 9c-.003 2.144 2.952 3.908 6.7 4' /%3E%3Cpath d='M12 20l4 -9l4 9' /%3E%3Cpath d='M19.1 18h-6.2' /%3E%3C/svg%3E") no-repeat center left/cover;
    width: 28px;
    height: 28px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    content: "";
    transform: translateY(-0.12em);
}

.button.contents {
    background: var(--contents-bg) url("data:image/svg+xml,%3Csvg width='28' height='26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2h7.2C11.851 2 14 4.189 14 6.889V24c0-2.025-1.612-3.667-3.6-3.667H2V2Zm24 0h-7.2C16.149 2 14 4.189 14 6.889V24c0-2.025 1.612-3.667 3.6-3.667H26V2Z' stroke='currentColor' stroke-width='2.4' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center center/20px 18px;
    width: 70px;
    height: 70px;
    padding: 0;
    top: 9vmin;
    left: 9vmin;
    position: fixed;
    color: #475066;
    font-size: .85em;
    text-indent: -9999px;
    border-radius: 8px;
}

.button.contents:hover {
    background-color: var(--contents-hover-bg);
    color: #FFF;
}

.chapter.focus:after {
    animation: slide_left 1.5s linear;
    animation-fill-mode: forwards;
}

.hidden {
    display: none;
}

::selection {background: #D4D9DF}
::-moz-selection {background: #D4D9DF}

#header {
    padding: clamp(150px, 15vw, 300px) 0;
    min-height: 50vh;
    position: relative;
    display: grid;
    justify-content: center;
    align-items: flex-end;
    z-index: 99;
}

/* @media only screen and (min-width: 990px) {
    #header {
        height: 90vh;
    }
} */

#header:before {
    background: var(--header-before, transparent);
    -webkit-mask-image: url(./images/bg.svg);
    -moz-mask-image: url(./images/bg.svg);
    mask-image: url(./images/bg.svg);
    -webkit-mask-repeat: repeat-y;
    -webkit-mask-size: cover;
    -webkit-mask-position: bottom center;
    mask-repeat: repeat-y;
    mask-size: cover;
    mask-position: bottom center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    content: "";
    z-index: 50;
}

#header:after {
    background: var(--header-after, transparent);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2292%22%20height%3D%2263%22%20viewBox%3D%220%200%2092%2063%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3ERectangle%201%3C%2Ftitle%3E%3Cdefs%3E%3ClinearGradient%20x1%3D%2250%25%22%20y1%3D%220%25%22%20x2%3D%2250%25%22%20y2%3D%22100%25%22%20id%3D%22a%22%3E%3Cstop%20stop-color%3D%22%23FFF%22%20stop-opacity%3D%220%22%20offset%3D%220%25%22%2F%3E%3Cstop%20offset%3D%22100%25%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M0%20227h92v63H0z%22%20transform%3D%22translate(0%20-227)%22%20fill%3D%22url(%23a)%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2292%22%20height%3D%2263%22%20viewBox%3D%220%200%2092%2063%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3ERectangle%201%3C%2Ftitle%3E%3Cdefs%3E%3ClinearGradient%20x1%3D%2250%25%22%20y1%3D%220%25%22%20x2%3D%2250%25%22%20y2%3D%22100%25%22%20id%3D%22a%22%3E%3Cstop%20stop-color%3D%22%23FFF%22%20stop-opacity%3D%220%22%20offset%3D%220%25%22%2F%3E%3Cstop%20offset%3D%22100%25%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M0%20227h92v63H0z%22%20transform%3D%22translate(0%20-227)%22%20fill%3D%22url(%23a)%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    -webkit-mask-position: bottom center;
    mask-repeat: no-repeat;
    mask-size: cover;
    mask-position: bottom center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    content: "";
    z-index: 50;
}

#header .title {
    position: relative;
    font-size: clamp(0.425em, 1.5vw, 0.9em);
    text-align: center;
    z-index: 60;
    cursor: default !important;
}

#header .title_line {
    background: url("data:image/svg+xml,%3Csvg width='143' height='107' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill-rule='nonzero' fill='none'%3E%3Cpath d='M0 35.5c15.85-13.989 37.34-20.983 64.472-20.983 20.77 0 38.918-4.84 54.444-14.517v66.5c-15.526 9.656-33.583 14.484-54.17 14.484C37.43 80.984 15.849 87.99 0 102V35.5z' fill='%23FFF'/%3E%3Cpath d='M0 57.5c15.85-13.989 37.34-20.983 64.472-20.983 20.77 0 38.918-4.84 54.444-14.517v22.5c-15.526 9.656-33.583 14.484-54.17 14.484C37.43 58.984 15.849 65.99 0 80V57.5z' fill='%23F63048'/%3E%3Cg%3E%3Cpath d='M24.084 40.5c15.85-13.989 37.34-20.983 64.472-20.983 20.77 0 38.918-4.84 54.444-14.517v66.5c-15.526 9.656-33.583 14.484-54.17 14.484-27.315 0-48.897 7.005-64.746 21.016V40.5z' fill='%23EC2836'/%3E%3Cpath d='M24.084 84.5c15.85-13.989 37.34-20.983 64.472-20.983 20.77 0 38.918-4.84 54.444-14.517v22.5c-15.526 9.656-33.583 14.484-54.17 14.484-27.315 0-48.897 7.005-64.746 21.016V84.5z' fill='%231D9642'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat 76% 0 /auto 65px;
    padding-top: 59px;
    position: relative;
    font-family: var(--heading-font);
    font-weight: normal;
    text-transform: uppercase;
    line-height: 1;
    font-size: 5em;
    letter-spacing: 3px;
}

#header .title_line:first-letter {
    font-size: 1.2em;
}

#header .title_line:after {
    /* background: url(images/flags.png) no-repeat top left; */
    /* background: url("data:image/svg+xml,%3Csvg width='143' height='107' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill-rule='nonzero' fill='none'%3E%3Cpath d='M0 35.5c15.85-13.989 37.34-20.983 64.472-20.983 20.77 0 38.918-4.84 54.444-14.517v66.5c-15.526 9.656-33.583 14.484-54.17 14.484C37.43 80.984 15.849 87.99 0 102V35.5z' fill='%23FFF'/%3E%3Cpath d='M0 57.5c15.85-13.989 37.34-20.983 64.472-20.983 20.77 0 38.918-4.84 54.444-14.517v22.5c-15.526 9.656-33.583 14.484-54.17 14.484C37.43 58.984 15.849 65.99 0 80V57.5z' fill='%23F63048'/%3E%3Cg%3E%3Cpath d='M24.084 40.5c15.85-13.989 37.34-20.983 64.472-20.983 20.77 0 38.918-4.84 54.444-14.517v66.5c-15.526 9.656-33.583 14.484-54.17 14.484-27.315 0-48.897 7.005-64.746 21.016V40.5z' fill='%23EC2836'/%3E%3Cpath d='M24.084 84.5c15.85-13.989 37.34-20.983 64.472-20.983 20.77 0 38.918-4.84 54.444-14.517v22.5c-15.526 9.656-33.583 14.484-54.17 14.484-27.315 0-48.897 7.005-64.746 21.016V84.5z' fill='%231D9642'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center/cover; */
    width: 143px;
    height: 107px;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    /* margin-left: 0.7em; */
    position: absolute;
    content: "";
    transform: translateY(-90%);
}

#header .title_line a {
    color: currentColor;
    text-decoration: none;
}

#header .title_line small {
    margin-top: 20px;
    display: block;
    font-family: HelveticaNeueMedium, HelveticaNeue-Medium, Helvetica Neue Medium, Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
    font-size: 0.25em;
    font-weight: normal;
    color: #e14f4e;
    text-transform: uppercase;
    letter-spacing: 1.2em;
    line-height: 1;
}

#header .year {
    margin-top: 90px;
    display: block;
    font-family: var(--heading-font);
    font-size: 8em;
}

#header .home {
    position: relative;
    z-index: 99;
}
body.page #header {
    height: auto;
    font-size: 0.8em;
    margin-bottom: 40px;
}
body.page #header .lang {
    display: none;
}

body.page #header .title {
    margin: 120px 0 0;
    font-size: 0.5em;
}
body.page #header .year {
    margin-top: 24px;
}
body.page #header .title .category {
    display: none;
}

body.page nav {
    display: none !important;
}

#footer {
    margin: 0 8vw;
    padding: 60px 0;
    gap: 8px 0;
    display: grid;
    text-align: center;
    font-size: .85em;
    font-weight: 500;
    /* color: #3a3a3a; */
}

#footer a {
    color: currentColor;
}

.intro {
    width: 80vw;
    max-width: 1000px;
    margin: clamp(20px, 5vw, 80px) auto 200px;
    gap: 50px 10vw;
    display: grid;
    justify-items: center;
    justify-content: center;
}

@media only screen and (min-width: 900px) {
    .intro {
        grid-template-columns: 1fr auto;
        justify-content: space-between;
    }
}

.intro .about {
    gap: 15px;
    display: grid;
    /* text-align: center; */
}

.intro .download {
    gap: 20px;
    display: grid;
    align-content: flex-start;
    grid-template-columns: 1fr 1fr;
}

.intro .download .get_link {
    padding: 21px 35px;
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: #fff;
    font-size: 0.85em;
    border-radius: 6px;
    text-align: center;
    font-weight: 750;
    transition: top 0.2s linear;
    box-shadow: 0 1.2px 2.7px -7px rgba(0, 0, 0, 0.053),
                0 3px 6.9px -7px rgba(0, 0, 0, 0.075),
                0 6.2px 14.2px -7px rgba(0, 0, 0, 0.095),
                0 12.8px 29.2px -7px rgba(0, 0, 0, 0.117),
                0 35px 80px -7px rgba(0, 0, 0, 0.17);
}

.intro .download a[aria-disabled="true"] {
    background-color: #b3b3b3;
    cursor: default;
    pointer-events: none;
    box-shadow: none;
}

.intro .download a[href$=".pdf"] {
    background: #ff4f38;
}

.intro .download a[href$=".epub"] {
    background: #f38800;
}

.intro .download .get_link small {
    display: none;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    transform: translateY(100%);
    color: #DDD;
}

.intro .download > p {
    font-weight: 500;
    font-size: 15px;
    text-align: center;
    grid-column: 1 / -1;
    opacity: .5;
}

.chapter {
    padding: 0px 4vw clamp(75px, 15vw, 150px);
    position: relative;
    overflow: hidden;
    z-index: 10;
}

.chapter .chapter_title {
    width: 80vw;
    max-width: 1000px;
    margin: 0 auto clamp(50px, 10vw, 80px);
    font-size: clamp(32px, 10vw, 60px);
    position: relative;
    transform: translate(-.1em, 30%);
    z-index: 99;
}

.chapter:after {
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    content: attr(data-title);
    font-family: var(--heading-font);
    font-size: clamp(52px, 16vw, 100px);
    color: var(--chapter-title-shadow);
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    word-spacing: -0.1em;
    letter-spacing: 4px;
    opacity: 0;
}

.chapter ul {
    width: 80vw;
    max-width: 1000px;
    margin: 0 auto;
    gap: 35px 0;
    display: grid;
}

.chapter ul li {
    display: grid;
    gap: 10px 30px;
    grid-template-columns: 1fr;
    align-items: baseline;
    justify-items: flex-start;
    justify-content: space-between;
}

@media only screen and (min-width: 768px) {
    .chapter ul li {
        grid-template-columns: .7fr auto;
    }
}

.chapter ul li a {
    font-weight: 440;
}

.chapter ul li span {
    font-weight: 350;
}

.chapter ul li a, .chapter ul li span {
    line-height: 1.325;
}

.article {
    position: relative;
}

.article header {
    width: 80vw;
    max-width: 840px;
    margin: 125px auto 105px;
    /* margin: clamp(5px, 55vw, 150px) auto; */
    gap: 20px;
    display: grid;
}

.article header h1,
.authors header h1 {
    word-break: break-word;
    font-size: clamp(30px, 8vw, 52px);
    line-height: 1.15;
}

.article header p {
    font-size: clamp(16px, 5vw, 24px);
    line-height: 1.24;
}

.authors,
.article .section {
    width: 80vw;
    max-width: 700px;
    margin: 80px auto;
}

.article h2 {
    font-size: 1.3em;
    line-height: 1.35;
    letter-spacing: 0.02em;
}

.article ul,
.article ol {
    max-width: 700px;
    margin: 20px 0;
    gap: 10px 0;
    display: grid;
}

.article ul li {
    list-style: disc outside;
}

.article ol li {
    list-style: decimal outside;
}

.article li {
    line-height: 1.675;
}

.article ul li::marker {
    font-size: .7em;
}

.article ol li::marker {
    font-size: .85em;
}

.article a {
    text-decoration: underline;
}

.article a:hover {
    color: #fd595d;
    text-decoration: underline;
}

.article b,
.article strong,
.article table th {
    font-weight: 600;
}

.article .section p {
    margin: 35px 0;
    line-height: 1.65;
}

.article .section p:first-child {
    margin-top: 0;
}

.article .section p:last-child {
    margin-bottom: 0;
}

.article hr {
    width: 45%;
    margin: 30px auto;
    border-top: 1px solid var(--border-color);
}

.article figure {
    max-width: 1400px;
    margin: 60px auto;
    padding: 0 5vw;
    gap: 25px;
    display: grid;
    overflow-x: auto;
    justify-content: center;
    position: relative;
}

.article figure figcaption {
    width: 80vw;
    max-width: 700px;
    margin: 0 auto;
    font-size: 0.75em;
    line-height: 1.65;
}

.article figure figcaption p {
    margin: 8px 0;
}

.article figure img {
    background-color: #FFF;
    padding: 3vmax 2vmax;
    /* min-width: 52%; */
    display: inline-block;
    border-radius: 10px;
    box-shadow: 0 1.6px 1.6px -7px rgba(0, 0, 0, 0.01),
                0 4.5px 4.5px -7px rgba(0, 0, 0, 0.015),
                0 10.9px 10.9px -7px rgba(0, 0, 0, 0.02),
                0 36px 36px -7px rgba(0, 0, 0, 0.03);
}

.article figure .source img {
    padding: 0;
}

.article table {
    min-width: 45vw;
    font-size: 0.85em;
    text-align: center;
}

.article table thead th {
    padding: 18px 25px;
}

.article table th,
.article table td {
    max-width: 35vw;
    padding: 16px 25px;
    line-height: 1.25;
    border: 1px solid var(--border-color);
    transition: background 0.2s linear;
}

.article table tbody tr:hover th,
.article table tr:hover td {
    background: rgba(0, 0, 0, 0.03);
}

.article footer {
    background-color: var(--footnotes-bg);
    width: 96vw;
    max-width: 950px;
    margin: 100px auto 0;
    padding: 100px 0 calc(env(safe-area-inset-bottom) + 100px);
    font-size: 0.9em;
    word-break: break-word;
    border-radius: 35px;
}

.article footer ol {
    width: 80vw;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 30px 0;
    display: grid;
    counter-reset: list;
    font-size: .95em;
}

.article footer ol li {
    max-width: 95%;
    position: relative;
    list-style: none;
}

.article footer ol li:before {
    width: 25px;
    top: .25em;
    left: -35px;
    position: absolute;
    opacity: .25;
    font-size: 0.8em;
    font-weight: 540;
    text-align: right;
    counter-increment: list;
    content: counter(list);
}

.footnote-button {
    background-color: var(--button-bg);
    width: 26px;
    height: 26px;
    margin: 0 .45em 0 .7em;
    top: -0.125em;
    display: inline-block;
    position: relative;
    line-height: 25px;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    text-align: center;
    text-decoration: none !important;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.2s ease-in;
    z-index: 5;
    backface-visibility: hidden;
}

.footnote-button:before {
    content: attr(data-footnote-identifier);
    color: #fff;
    backface-visibility: hidden;
}

.footnote-button:hover,
.footnote-button.active {
    transition: all 0.1s linear;
    transform: scale(1.075);
}

.footnote-content {
    background: #FFF;
    position: fixed;
    margin: 25px auto;
    left: auto;
    bottom: auto;
    display: inline-block;
    color: #2b2b2b;
    border-radius: 10px;
    transform: scale(0.1) translateZ(0);
    transform-origin: 50% 0;
    transition-property: opacity, transform;
    transition-duration: 0.25s;
    opacity: 0;
    z-index: 10;
    box-shadow: 0 1.5px 2.9px -10px rgba(0, 0, 0, 0.047),
                0 3.7px 7.4px -10px rgba(0, 0, 0, 0.067),
                0 7.6px 15.1px -10px rgba(0, 0, 0, 0.083),
                0 15.7px 31px -10px rgba(0, 0, 0, 0.103),
                0 43px 85px -10px rgba(0, 0, 0, 0.15);
}

.footnote-main-wrapper {
    width: 90vw;
    max-width: 420px;
    position: relative;
    overflow: hidden;
    z-index: 14;
    transition-property: max-height;
    transition-duration: 0.25s;
}

.footnote-content-wrapper {
    max-height: 300px !important;
    padding: 25px 30px;
    overflow: auto;
    position: relative;
    font-size: .85em;
    border-radius: 12px;
    z-index: 8;
    -webkit-overflow-scrolling: touch;
}

.article .footnote p,
.article .footnote-content-wrapper p {
    margin: 25px 0 5px;
    padding: 0;
    line-height: 1.45;
}

.footnote p:first-child,
.footnote-content-wrapper p:first-child {
    margin-top: 0;
}

.footnote .source,
.footnote-content-wrapper .source {
    word-break: break-word;
    font-size: .925em;
    line-height: 1.45;
    font-weight: 540;
}

.footnote .source a,
.footnote-content-wrapper .source a {
    text-decoration: none;
}

.footnote .source a:hover,
.footnote-content-wrapper .source a:hover {
    text-decoration: underline;
}

.footnotes .source a img,
.footnote-content-wrapper .source a img {
    margin-right: 7px;
    display: inline-block;
}

.footnote-content.active {
    transform: scale(1) translateZ(0);
    opacity: 1;
}

.footnote-content.bottom {
    transform-origin: top;
}

.footnote-content.top {
    transform-origin: bottom;
}

.footnote-content.scrollable.fully-scrolled:after {
    opacity: 0;
    transition-delay: 0s;
}

.footnote-content::-webkit-scrollbar {
    display: none;
}

.tooltip {
    background: #FFF;
    width: 0.7em;
    height: 0.7em;
    position: absolute;
    border-top-left-radius: 0;
    border-radius: 2px;
    margin-left: -0.25em;
    z-index: 12;
    box-shadow: 0px 0px 50px -5px rgba(0, 0, 0, 0.25);
    transform: rotate(45deg);
}
.bottom .tooltip {
    top: -0.2em;
    bottom: auto;
}
.top .tooltip {
    bottom: -0.2em;
    top: auto;
}

.article figcaption .footnote-content-wrapper p,
.article figcaption .footnotes p {
    font-style: normal;
    text-align: left;
}

.authors {
    margin-bottom: 75px;
    gap: 75px 0;
    display: grid;
}

.authors .author {
    gap: 20px 50px;
    display: grid;
    grid-template-columns: 1fr;
    align-items: flex-start;
}

.authors .author img {
    width: 190px;
    height: 240px;
    border-radius: 1px;
    object-fit: cover;
    object-position: center;
    filter: saturate(0);
    transition: 0.5s ease-in-out;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02),
                0 6.7px 5.3px rgba(0, 0, 0, 0.028),
                0 12.5px 10px rgba(0, 0, 0, 0.035),
                0 22.3px 17.9px rgba(0, 0, 0, 0.042),
                0 41.8px 33.4px rgba(0, 0, 0, 0.05),
                0 100px 80px rgba(0, 0, 0, 0.07);
}

.authors .author:hover img {
    filter: saturate(1);
    transition: 0.5s ease-in-out;
}

.authors .author .author_about {
    gap: 10px 0;
    display: grid;
}

@media only screen and (min-width: 900px) {
    .authors {
        margin-bottom: 140px;
        gap: 140px 0;
    }

    .authors .author {
        grid-template-columns: auto 1fr;
    }
}

#books {
    background-color: var(--books-bg);
    padding: 90px 0;
    position: relative;
    text-align: center;
    overflow: hidden;
}

#books .yearbook_slider {
    white-space: nowrap;
    user-select: none;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

#books .yearbook_slider .yearbook_slide {
    position: relative;
    float: left;
    text-align: center;
}

#books .yearbook_slider .cover {
    width: 225px;
    height: 317px;
    display: inline-block;
    border-radius: 3px;
    position: relative;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.2s linear;
    box-shadow: 0 8.5px 5px -14px rgba(0, 0, 0, 0.056),
                0 11.1px 6.9px -14px rgba(0, 0, 0, 0.08),
                0 14px 9.4px -14px rgba(0, 0, 0, 0.104),
                0 24px 15px -14px rgba(0, 0, 0, 0.16);
    transform: translate3d(0, 0, 0);
}

#books .yearbook_slider .cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 3px;
}

#books .yearbook_slider .cover:hover {
    box-shadow: 2px 2px 45px rgba(0, 0, 0, 0.15);
    transform: scale(1.05);
}

.slick-list {
    padding: 80px 0;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-list,
.slick-track,
.slick-slide,
.slick-slide img {
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
    zoom: 1;
}

.slick-track:before,
.slick-track:after {
    content: "";
    display: table;
}
.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-initialized .slick-slide {
    display: block;
}
.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-prev,
.slick-next {
    background-color: #FFF;
    width: 62px;
    height: 62px;
    margin: auto;
    padding: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    border-radius: 100%;
    text-indent: -9999px;
    transform: scale(.9);
    transition: transform .15s ease-in;
    box-shadow: 0 1.7px 2.2px rgba(0, 0, 0, 0.037),
                0 4.1px 5.3px rgba(0, 0, 0, 0.046),
                0 7.6px 10px rgba(0, 0, 0, 0.05),
                0 13.6px 17.9px rgba(0, 0, 0, 0.052),
                0 25.5px 33.4px rgba(0, 0, 0, 0.055),
                0 61px 80px rgba(0, 0, 0, 0.07);
    z-index: 55;
}

.slick-prev {
    background: rgba(255, 255, 255, 0.98)
        url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgdmlld0JveD0iMCAwIDUxMiA1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlLz48ZyBkYXRhLW5hbWU9IjEiIGlkPSJfMSI+PHBhdGggZD0iTTM1Myw0NTBhMTUsMTUsMCwwLDEtMTAuNjEtNC4zOUwxNTcuNSwyNjAuNzFhMTUsMTUsMCwwLDEsMC0yMS4yMUwzNDIuMzksNTQuNmExNSwxNSwwLDEsMSwyMS4yMiwyMS4yMUwxODkuMzIsMjUwLjEsMzYzLjYxLDQyNC4zOUExNSwxNSwwLDAsMSwzNTMsNDUwWiIvPjwvZz48L3N2Zz4=")
        no-repeat center center/50% 50%;
    left: 3vw;
}

.slick-next {
    background: rgba(255, 255, 255, 0.98)
        url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgdmlld0JveD0iMCAwIDUxMiA1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlLz48ZyBkYXRhLW5hbWU9IjEiIGlkPSJfMSI+PHBhdGggZD0iTTIwMi4xLDQ1MGExNSwxNSwwLDAsMS0xMC42LTI1LjYxTDM2NS43OSwyNTAuMSwxOTEuNSw3NS44MUExNSwxNSwwLDAsMSwyMTIuNzEsNTQuNmwxODQuOSwxODQuOWExNSwxNSwwLDAsMSwwLDIxLjIxbC0xODQuOSwxODQuOUExNSwxNSwwLDAsMSwyMDIuMSw0NTBaIi8+PC9nPjwvc3ZnPg==")
        no-repeat center center/50% 50%;
    right: 3vw;
}

.slick-prev:hover,
.slick-next:hover {
    transform: scale(1);
    transition: transform .15s ease-in;
}

.slick-disabled {
    display: none !important;
}

.slick-dots {
    gap: 0 15px;
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
}

.slick-dots li button {
    background: var(--root-color);
    width: 10px;
    height: 10px;
    display: block;
    cursor: pointer;
    border-radius: 100%;
    text-indent: -9999em;
    opacity: 0.2;
    backface-visibility: hidden;
    transition: all 0.2s linear;
    -webkit-backface-visibility: hidden;
}

.slick-dots li.slick-active button {
    transform: scale(1.2);
    opacity: .9;
}

@media only screen and (min-width: 768px) {
    html[data-theme~="y2021"] .chapter:after,
    html[data-theme~="beige"] .chapter:after,
    html[data-theme~="light-blue"] .chapter:after,
    html[data-theme~="almost-white"] .chapter:after,
    html[data-theme~="totally-white"] .chapter:after,
    html[data-theme~="white-red-white"] .chapter:after {
        top: 12px;
    }
}

html[data-theme~="y2021"] .page #header,
html[data-theme~="beige"] .page #header,
html[data-theme~="light-blue"] .page #header,
html[data-theme~="almost-white"] .page #header,
html[data-theme~="totally-white"] .page #header,
html[data-theme~="white-red-white"] .page #header {
    height: 35vh;
    min-height: 230px;
}

html[data-theme~="y2021"] .page #header .title,
html[data-theme~="beige"] .page #header .title,
html[data-theme~="light-blue"] .page #header .title,
html[data-theme~="almost-white"] .page #header .title,
html[data-theme~="totally-white"] .page #header .title,
html[data-theme~="white-red-white"] .page #header .title {
    margin-top: 5vh;
    transform: scale(0.25);
}

@media only screen and (min-width: 768px) {
    html[data-theme~="y2021"] .page #header .title,
    html[data-theme~="beige"] .page #header .title,
    html[data-theme~="light-blue"] .page #header .title,
    html[data-theme~="almost-white"] .page #header .title,
    html[data-theme~="totally-white"] .page #header .title,
    html[data-theme~="white-red-white"] .page #header .title {
        transform: scale(0.5);
    }
}

html[data-theme~="y2021"] #header,
html[data-theme~="beige"] #header,
html[data-theme~="light-blue"] #header,
html[data-theme~="almost-white"] #header,
html[data-theme~="totally-white"] #header,
html[data-theme~="white-red-white"] #header {
    height: 70vh;
    padding: 0 15vw;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    align-items: flex-end;
}

@media only screen and (min-width: 320px) {
    html[data-theme~="y2021"] #header,
    html[data-theme~="beige"] #header,
    html[data-theme~="light-blue"] #header,
    html[data-theme~="almost-white"] #header,
    html[data-theme~="totally-white"] #header,
    html[data-theme~="white-red-white"] #header {
        height: 80vh;
        min-height: 560px;
    }
}

@media only screen and (min-width: 768px) {
    html[data-theme~="y2021"] #header,
    html[data-theme~="beige"] #header,
    html[data-theme~="light-blue"] #header,
    html[data-theme~="almost-white"] #header,
    html[data-theme~="totally-white"] #header,
    html[data-theme~="white-red-white"] #header {
        height: 85vh;
    }
}

html[data-theme~="y2021"] #header .lang,
html[data-theme~="beige"] #header .lang,
html[data-theme~="light-blue"] #header .lang,
html[data-theme~="almost-white"] #header .lang,
html[data-theme~="totally-white"] #header .lang,
html[data-theme~="white-red-white"] #header .lang {
    left: 4vw;
    right: auto;
}

@media only screen and (min-width: 990px) {
    html[data-theme~="y2021"] #header .lang,
    html[data-theme~="beige"] #header .lang,
    html[data-theme~="light-blue"] #header .lang,
    html[data-theme~="almost-white"] #header .lang,
    html[data-theme~="totally-white"] #header .lang,
    html[data-theme~="white-red-white"] #header .lang {
        left: 80px;
        right: auto;
    }
}

html[data-theme~="y2021"] #header .title,
html[data-theme~="beige"] #header .title,
html[data-theme~="light-blue"] #header .title,
html[data-theme~="almost-white"] #header .title,
html[data-theme~="totally-white"] #header .title,
html[data-theme~="white-red-white"] #header .title {
    transform: scale(0.3);
    transform-origin: right;
    margin-top: 30vh;
    padding-left: 120px;
    display: block;
    position: relative;
    text-transform: uppercase;
    font-family: ExoLight, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
    text-align: right;
}

html[data-theme~="white-red-white"] #header .title {
    color: #D8242A;
}

@media only screen and (min-width: 640px) {
    html[data-theme~="y2021"] #header .title,
    html[data-theme~="beige"] #header .title,
    html[data-theme~="light-blue"] #header .title,
    html[data-theme~="almost-white"] #header .title,
    html[data-theme~="totally-white"] #header .title,
    html[data-theme~="white-red-white"] #header .title {
        transform: scale(0.55);
    }
}
@media only screen and (min-width: 768px) {
    html[data-theme~="y2021"] #header .title,
    html[data-theme~="beige"] #header .title,
    html[data-theme~="light-blue"] #header .title,
    html[data-theme~="almost-white"] #header .title,
    html[data-theme~="white-red-white"] #header .title,
    html[data-theme~="totally-white"] #header .title {
        transform: scale(0.7);
    }
}
@media only screen and (min-width: 990px) {
    html[data-theme~="y2021"] #header .title,
    html[data-theme~="beige"] #header .title,
    html[data-theme~="light-blue"] #header .title,
    html[data-theme~="almost-white"] #header .title,
    html[data-theme~="totally-white"] #header .title,
    html[data-theme~="white-red-white"] #header .title {
        transform: scale(0.8);
    }
}

html[data-theme~="y2021"] #header .title .title_line,
html[data-theme~="beige"] #header .title .title_line,
html[data-theme~="light-blue"] #header .title .title_line,
html[data-theme~="almost-white"] #header .title .title_line,
html[data-theme~="totally-white"] #header .title .title_line,
html[data-theme~="white-red-white"] #header .title .title_line {
    background: none;
    font-family: ExoLight, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
    font-size: 90px;
}

html[data-theme~="y2021"] #header .title .title_line:first-letter,
html[data-theme~="beige"] #header .title .title_line:first-letter,
html[data-theme~="light-blue"] #header .title .title_line:first-letter,
html[data-theme~="almost-white"] #header .title .title_line:first-letter,
html[data-theme~="totally-white"] #header .title .title_line:first-letter,
html[data-theme~="white-red-white"] #header .title .title_line:first-letter {
    font-size: 90px;
}

html[data-theme~="y2021"] #header .title .title_line small,
html[data-theme~="beige"] #header .title .title_line small,
html[data-theme~="light-blue"] #header .title .title_line small,
html[data-theme~="almost-white"] #header .title .title_line small,
html[data-theme~="totally-white"] #header .title .title_line small,
html[data-theme~="white-red-white"] #header .title .title_line small {
    font-family: ExoLight, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, HelveticaNeue, Helvetica, Arial, Lucida Grande, sans-serif;
    font-size: 90px;
    letter-spacing: 0;
    color: #333;
}

html[data-theme~="white-red-white"] #header .title .title_line small {
    color: #D8242A;
}

html[data-theme~="y2021"] #header .title .title_line:after,
html[data-theme~="beige"] #header .title .title_line:after,
html[data-theme~="light-blue"] #header .title .title_line:after,
html[data-theme~="almost-white"] #header .title .title_line:after,
html[data-theme~="totally-white"] #header .title .title_line:after,
html[data-theme~="white-red-white"] #header .title .title_line:after {
    display: none;
}

html[data-theme~="y2021"] #header .title .year,
html[data-theme~="beige"] #header .title .year,
html[data-theme~="light-blue"] #header .title .year,
html[data-theme~="almost-white"] #header .title .year,
html[data-theme~="totally-white"] #header .title .year,
html[data-theme~="white-red-white"] #header .title .year {
    background-color: #e31146;
    width: 100px;
    height: 100px;
    color: #fff;
    margin-top: 0;
    display: inline-block;
    right: 0;
    bottom: -20vh;
    position: absolute;
    text-align: center;
    font-weight: 700;
    font-size: 30px;
    line-height: 100px;
    border-radius: 2px;
    font-family: ExoLight, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, HelveticaNeue, Helvetica, Arial,
        Lucida Grande, sans-serif;
}

html[data-theme~="white-red-white"] #header .title .year {
    background-color: #D8242A;
}

html[data-theme~="y2021"] #header .title .year {
    background-color: #DC2D1D;
}

html[data-theme~="beige"] #header .title:before,
html[data-theme~="light-blue"] #header .title:before,
html[data-theme~="almost-white"] #header .title:before,
html[data-theme~="totally-white"] #header .title:before {
    background: url("data:image/svg+xml,%3Csvg%20width%3D%22100%22%20height%3D%22210%22%20viewBox%3D%220%200%20100%20210%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3ELine%3C%2Ftitle%3E%3Cpath%20stroke%3D%22%23343232%22%20stroke-width%3D%22.5%22%20d%3D%22M96.81%200L1%20103.44%2099%20210%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22square%22%2F%3E%3C%2Fsvg%3E")
        no-repeat center center/cover;
    width: 346px;
    height: 739px;
    top: -300px;
    left: -55px;
    position: absolute;
    content: "";
}

html[data-theme~="y2021"] #header .book_title,
html[data-theme~="beige"] #header .book_title,
html[data-theme~="light-blue"] #header .book_title,
html[data-theme~="almost-white"] #header .book_title,
html[data-theme~="totally-white"] #header .book_title,
html[data-theme~="white-red-white"] #header .book_title {
    right: 15px;
    top: 110px;
    bottom: auto;
}

html[data-theme~="y2021"] #header .book_title strong,
html[data-theme~="beige"] #header .book_title strong,
html[data-theme~="light-blue"] #header .book_title strong,
html[data-theme~="almost-white"] #header .book_title strong,
html[data-theme~="totally-white"] #header .book_title strong,
html[data-theme~="white-red-white"] #header .book_title strong {
    margin-top: 0;
    display: block;
    font-family: ExoLight, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, HelveticaNeue, Helvetica, Arial,
        Lucida Grande, sans-serif;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    line-height: 1;
}

html[data-theme~="y2021"] #header .book_title strong:after,
html[data-theme~="beige"] #header .book_title strong:after,
html[data-theme~="light-blue"] #header .book_title strong:after,
html[data-theme~="almost-white"] #header .book_title strong:after,
html[data-theme~="totally-white"] #header .book_title strong:after,
html[data-theme~="white-red-white"] #header .book_title strong:after {
    display: none;
}

html[data-theme~="y2021"] #header .book_title strong small,
html[data-theme~="beige"] #header .book_title strong small,
html[data-theme~="light-blue"] #header .book_title strong small,
html[data-theme~="almost-white"] #header .book_title strong small,
html[data-theme~="totally-white"] #header .book_title strong small,
html[data-theme~="white-red-white"] #header .book_title strong small {
    margin-top: 5px;
    display: block;
    font-family: ExoLight, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, HelveticaNeue, Helvetica, Arial,
        Lucida Grande, sans-serif;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1;
}

html[data-theme~="y2021"] #header:before,
html[data-theme~="beige"] #header:before {
    display: none;
}

#home_page .yearbook_slider {
    padding: 100px 25px;
    gap: 100px 15vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

*[class="icon"],
.get_link,
.en,
#books li,
.title {
    user-select: none;
}

@keyframes slide_left {
    0% {
        left: -0.3em;
        opacity: 0;
    }
    100% {
        left: 0;
        opacity: 0.5;
    }
}

.chapter a {
    -webkit-tap-highlight-color: rgba(55, 163, 212, 0.1);
}

#header .en,
#header .contents {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
}

.get_link {
    -webkit-tap-highlight-color: transparent;
}