html {
  cursor:url('../img/cursor.svg'),url('../img/cursor.png'),auto;
}
:root {
  --color-1:#c0caea;
  --color-2:#ffeccf;
  --color-3:#0b27fa;
  --color-4:#5d06c6;
  --color-5:#ececec;
  --color-6:#0e1732;
  --color-7:#daace9;
  --padding:3rem;
  --app-height:100%;
}
@font-face {
  font-family:"Syne";
  src:url("./Syne-VariableFont_wght.ttf");
}
@font-face {
  font-family:"Syne Mono";
  src:url("./SyneMono-Regular.ttf");
}
@font-face {
  font-family:"Syne Tactile";
  src:url("./SyneTactile-Regular.ttf");
}
@font-face {
  font-family:"Stack Sans Headline";
  src:url("./StackSansHeadline-VariableFont_wght.ttf");
}
h3 {
  font-family:"Stack Sans Headline",sans-serif;
  font-size:1.5rem;
  font-weight:500;
  line-height:1.25;
  letter-spacing:normal;
}
h1 {
  font-family:"Stack Sans Headline",sans-serif;
  font-weight:500;
  font-size:2.25rem;
  line-height:1.1111;
  letter-spacing:normal;
  position:relative;
}
body {
  font-family:"Syne",sans-serif;
  letter-spacing:0.2px;
  font-size:1.0416666666666666rem;
  font-weight:500;
  line-height:1.2;
}
#about,
a {
  font-family:"Syne Mono",sans-serif;
  font-weight:400;
  line-height:1.2;
  letter-spacing:normal;
}
header,
figcaption {
  font-family:"Syne Mono",sans-serif;
  font-weight:400;
  font-size:0.8333rem;
  line-height:1.5;
  letter-spacing:normal;
}
i {
  font-family:"Syne Tactile",serif;
  font-weight:400;
  line-height:1.2;
  letter-spacing:normal;
}
body {
  background-color:var(--color-5);
  color:var(--color-3);
  padding:0;
  margin:0;
}
a {
  cursor:url('../img/pointer.svg'),url('../img/pointer.png'),auto;
}
.screen {
  background-color:var(--color-6);
  mix-blend-mode:screen;
}
.screen img {
  background-color:transparent;
  mix-blend-mode:screen;
}
.flipbook .dive {
  width:calc(100% - 2 * var(--padding));
  padding:calc(3 * var(--padding)) var(--padding);
  max-height:calc(100vh - 6 * var(--padding));
  position:relative;
  display:flex;
  flex-direction:row;
}
.flipbook .dive img {
  width:auto;
  object-fit:contain;
}
.flipbook .dive.image-right {
  justify-content:right;
}
figure {
  margin:0;
}
figure:not(:last-child) {
  margin-bottom:calc(2 * var(--padding));
}
.flipbook > * {
  display:block;
  object-fit:cover;
  width:50vw;
  height:100vh;
}
.flipbook > * img {
  object-fit:cover;
  width:100%;
  height:100%;
  background-color:var(--color-5);
}
.flipbook img.contain {
  object-fit:contain;
}
.floating-itr {
  position:absolute;
  left:4rem;
  width:50% !important;
  object-fit:contain !important;
  mix-blend-mode:normal !important;
  background-color:transparent !important;
  transform:translateY(6rem);
}
h1 {
  margin:0 0;
}
header {
  color:var(--color-4);
}
i {
  color:var(--color-4);
  font-style:normal;
}
.image-left {
  position:relative;
  left:calc(-1 * var(--padding));
}
.image-right {
  position:relative;
  right:calc(-1 * var(--padding));
}
.flipbook .image-padding {
  width:calc(100% - 2 * var(--padding));
  padding:var(--padding);
  max-height:calc(100vh - 2 * var(--padding));
}
.image-double-padding {
  width:calc(100% - 4 * var(--padding));
  padding:calc(2 * var(--padding));
}
.image-portrait {
  aspect-ratio:4/5;
}
.image-top img {
  height:unset;
  margin-top:var(--padding);
}
.image-vertical-padding {
  padding:calc(50vh - 110px - 3 * var(--padding)) 0;
}
#menutoggle.on + #menu,
#about.on {
  opacity:1;
  visibility:visible;
}
#menu,
#about {
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  opacity:0;
  visibility:hidden;
  transition:opacity .4s;
  z-index:50;
  padding:calc(2 * var(--padding) + 1rem) var(--padding);
  width:calc(50% - 2 * var(--padding));
  background-color:var(--color-1);
  overflow-y:scroll;
  scrollbar-width:none;
}
#menu i,
#about i {
  color:var(--color-3);
}
.navy-bg,
.navy-bg img {
  background-color:var(--color-6);
  color:var(--color-5);
}
.navy-bg i,
.navy-bg img i {
  color:var(--color-7);
}
.navy-bg a,
.navy-bg img a {
  color:inherit;
}
.navy-bg header {
  color:var(--color-2);
}
section {
  padding:calc(2 * var(--padding) + 1rem) var(--padding);
  overflow-y:scroll;
  scrollbar-width:none;
}
section img {
  margin-top:var(--padding);
}
section figure img {
  margin:0;
}
::-webkit-scrollbar {
  width:0;
  background:transparent;
  display:none;
}
#menu {
  color:var(--color-4);
}
#about {
  left:50vw;
  background-color:var(--color-2);
}
#about p,
section p {
  max-width:30rem;
}
p {
  margin-bottom:1.25rem;
}
p:not(header > h1 + *):first-of-type {
  margin-top:0;
}
img + p,
figure + p {
  margin-top:0;
}
p:has(+ img),
p:has(+ figure) {
  margin-bottom:0;
}
div:has(+ img) section {
  margin-bottom:var(--padding);
}
.home nav svg,
.an-invitation-to-reading nav svg {
  stroke:var(--color-2);
  filter:drop-shadow(#00f6 0 0 0.125rem);
}
nav svg {
  fill:none;
  stroke:var(--color-4);
  filter:none;
  stroke-miterlimit:10;
  stroke-width:0.05rem;
  position:fixed;
  z-index:100;
  margin:calc(var(--padding) - 0.5rem);
}
::selection {
  color:white;
  background-color:orange;
}
.small-gallery {
  display:flex;
  gap:2rem;
  margin-top:calc(40vh - 3 * var(--padding));
}
.small-gallery img {
  aspect-ratio:3 / 2;
  object-fit:cover;
  margin-top:0;
}
.top,
.bottom {
  position:fixed;
  width:50%;
  height:100%;
  padding:0;
  margin:0;
  overflow-y:scroll;
  scrollbar-width:none;
}
.bottom {
  left:50vw;
}
video {
  width:100%;
}
#menu-icon {
  top:0;
  left:0;
}
#home-icon {
  top:0;
  right:0;
}
#left-icon {
  bottom:0.4rem;
  left:0;
}
#right-icon {
  bottom:0.4rem;
  right:0;
}
ul {
  list-style:none;
  margin:0;
  padding:0;
}
ul h3 {
  display:inline-block;
  padding:0;
  margin:0;
  color:blueviolet;
}
ul i {
  opacity:0;
  display:inline-block;
  color:blue;
  transition:0.125s opacity,0.5s letter-spacing linear;
  letter-spacing:-0.5rem;
}
ul li:hover i {
  opacity:1;
  letter-spacing:0.0125rem;
}
@media screen and (min-width:768px) {
  .hide-on-desktop {
    display:none !important;
  }
}
@media screen and (min-width:768px) {
  .flipbook figure:has(> video) {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:0;
    height:calc(100vh - 2 * var(--padding));
  }
}
@media screen and (min-width:768px) {
  img:not(.hide-on-mobile) + p,
  figure:not(.hide-on-mobile) + p {
    margin-top:1.25rem;
  }
}
@media screen and (min-width:768px) {
  p:has(+ img:not(.hide-on-mobile)),
  p:has(+ figure:not(.hide-on-mobile)) {
    margin-bottom:1.25rem;
  }
}
@media screen and (min-width:768px) {
  section {
    min-height:calc(100vh - 4 * var(--padding) - 2rem);
  }
}
@media screen and (max-width:767px) {
  :root {
    --padding:1.25rem;
  }
}
@media screen and (max-width:767px) {
  #about {
    left:0;
  }
}
@media screen and (max-width:767px) {
  body {
    font-size:0.8333rem;
    line-height:1.5;
  }
}
@media screen and (max-width:767px) {
  .bottom:not(.home > *) {
    width:100%;
    left:0;
    padding:calc(3 * var(--padding) + 1rem) 0;
  }
}
@media screen and (max-width:767px) {
  div:has(> .navy-bg) + div section {
    padding-top:calc(2 * var(--padding));
  }
}
@media screen and (max-width:767px) {
  .flipbook figure.full-height:has(> video) {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:0;
    height:calc(100vh - 2 * var(--padding));
  }
}
@media screen and (max-width:767px) {
  .flipbook > *:last-child {
    min-height:calc(100vh + 2rem);
  }
}
@media screen and (max-width:767px) {
  #homepage .flipbook > *:last-child {
    min-height:50vh;
  }
}
@media screen and (max-width:767px) {
  .flipbook > *:last-child figure:last-child {
    padding-bottom:calc(6 * var(--padding));
  }
}
@media screen and (max-width:767px) {
  .flipbook > * {
    display:block;
    width:100vw;
    height:auto;
  }
}
@media screen and (max-width:767px) {
  .flipbook > .image-padding {
    width:calc(100vw - 2 * var(--padding));
  }
}
@media screen and (max-width:767px) {
  .flipbook .dive {
    width:100vw;
    padding:calc(2 * var(--padding)) 0;
    right:0;
  }
}
@media screen and (max-width:767px) {
  .flipbook .dive img {
    width:50%;
  }
}
@media screen and (max-width:767px) {
  .floating-itr {
    left:12rem;
    width:35% !important;
    transform:translateY(-21.5rem);
  }
}
@media screen and (max-width:767px) {
  .full-height {
    min-height:100vh;
  }
}
@media screen and (max-width:767px) {
  .hide-on-mobile {
    display:none;
  }
}
@media screen and (max-width:767px) {
  .home .bottom {
    top:calc(var(--app-height) * 0.499);
    left:0;
  }
}
@media screen and (max-width:767px) {
  .home .flipbook > * {
    display:block;
    width:100vw;
    height:50vh;
  }
}
@media screen and (max-width:767px) {
  .home .top,
  .home .bottom {
    width:100%;
    height:50%;
  }
}
@media screen and (max-width:767px) {
  p:first-of-type {
    margin-top:0.8333rem;
  }
}
@media screen and (max-width:767px) {
  .navy-bg {
    padding:calc(2 * var(--padding)) var(--padding);
  }
}
@media screen and (max-width:767px) {
  div + div:has(> .navy-bg) {
    margin-top:var(--padding);
  }
}
@media screen and (max-width:767px) {
  section {
    padding:0 var(--padding);
  }
}
@media screen and (max-width:767px) {
  section > img,
  section > figure {
    margin:calc(2 * var(--padding)) 0;
  }
}
@media screen and (max-width:767px) {
  .small-gallery {
    flex-direction:column;
    margin-top:calc(2 * var(--padding));
    gap:var(--padding);
    max-width:60%;
    padding-left:40%;
    margin-bottom:14rem;
  }
}
@media screen and (max-width:767px) {
  .top:not(.home > *) {
    display:none;
  }
}
@media screen and (max-width:767px) {
  .home .top {
    bottom:calc(var(--app-height) * 0.499);
  }
}
@media screen and (max-width:767px) {
  #menu,
  #about {
    padding:calc(4 * var(--padding)) var(--padding);
    width:calc(100% - 2 * var(--padding));
  }
}
@media screen and (max-width:767px) {
  ul i {
    display:none;
  }
}