@font-face {
   font-style: normal;
   font-weight: normal;
   src: url('./assets/fonts/adelphe-trouble-florealregular-webfont.woff2')
         format('woff2'),
      url('./assets/fonts/adelphe-trouble-florealregular-webfont.woff')
         format('woff');
   font-family: 'adelphe_troubleflorealRg';
}

@font-face {
   font-style: normal;
   font-weight: normal;
   src: url('./assets/fonts/wondertype-regular-webfont.woff2') format('woff2'),
      url('./assets/fonts/wondertype-regular-webfont.woff') format('woff');
   font-family: 'wondertyperegular';
}

:root {
   --color-black: #000;
   --color-brown: #724c33;
   --color-brick: #9d414f;
   --color-ochre: #c97f3a;
   --color-primary: var(--color-brown);
   --color-secondary: var(--color-brick);
   --max-width: 500px;
   --max-text-width: 450px;
}

::selection {
   background-color: var(--color-brown);
   color: #fff;
}

body {
   margin: 0;
   height: 100vh;
   color: var(--color-primary);
   font-size: 20px;
   line-height: 1.15;
   font-family: 'adelphe_troubleflorealRg', serif;
}

a,
a:hover,
a:visited {
   cursor: pointer;
   color: var(--color-primary);
   text-decoration: none;
}

input {
   display: none;
}

@media (hover: hover) {
   a:hover {
      border-bottom: 1px solid var(--color-black);
      color: var(--color-black);
   }
}

p {
   margin: 0;
   margin-bottom: 0.5em;
}

/* content section */
.content {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 3;
   width: 100vw;
   height: 100vh;
   pointer-events: none;
}

.content-wrapper {
   display: flex;
   position: relative;
   flex-direction: column;
   justify-content: space-between;
   transition: all 300ms ease-in-out;
   margin: auto;
   padding: 2rem 1rem;
   width: calc(100% - 2rem);
   max-width: var(--max-width);
   height: calc(100% - 4rem);
   pointer-events: none;
}

.site-title {
   flex: 0 1 10%;
   margin: 0;
   font-size: 12vw;
   line-height: 1;
   font-family: 'wondertyperegular', serif;
}

.contact {
   flex: 0 1 15%;
   margin: 0;
   padding: 0;
   pointer-events: all;
   list-style-type: none;
}

.text {
   position: absolute;
   top: 0;
   left: 0;
   flex: 0 1 75%;
   margin: 1em 0;
   max-width: var(--max-text-width);
}

/* _buttons */
.buttons {
   width: fit-content;
}

.open-panel,
.close-panel {
   cursor: pointer;
   margin-bottom: 5px;
   border-bottom: 1px solid transparent;
}

@media (hover: hover) {
   .open-panel:hover,
   .close-panel:hover {
      border-bottom: 1px solid var(--color-black);
      color: var(--color-black);
   }
}

/* _backdrop */
.backdrop {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 2;
   width: 100vw;
   height: 100vh;
}

input#panel:checked + main .backdrop {
   display: block;
}

/* slider section */
.slider {
   display: flex;
   position: relative;
   align-items: center;
   z-index: 1;
   width: 100vw;
   height: calc(100vh - 2rem);
}

.image-scroller {
   width: 100vw;
   height: 400px;
   overflow: hidden;
}

.image-track {
   display: flex;
   align-items: center;
   width: fit-content;
   height: inherit;
}

.image-track .slide {
   background-color: var(--color-secondary);
   width: fit-content;
   height: fit-content;
}

.image-track .slide img {
   display: block;
   mix-blend-mode: screen;
   width: 300px;
   height: inherit;
   user-select: none;
}

/* checkbox actions and states */
.open-panel {
   display: block;
}

.buttons .close-panel {
   display: none;
}

.text .close-panel {
   display: none;
   margin-bottom: 1em;
   width: fit-content;
}

input#panel:checked + main .open-panel {
   display: none;
}

.text {
   opacity: 0;
   transition: opacity 300ms ease-in-out;
   overflow-x: hidden;
   overflow-y: scroll;
   pointer-events: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.text::-webkit-scrollbar {
   display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.text {
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
}

input#panel:checked + main .text {
   opacity: 1;
   pointer-events: all;
}

.slider {
   opacity: 0.9;
   transition: opacity 300ms ease-in-out;
   cursor: default;
}

input#panel:checked + main .slider {
   opacity: 0.25;
}

/* responsive */
@media (width <= 480px) {
   .text {
      display: none;
      margin: 0;
      padding: 2rem 1rem;
      height: calc(100vh - 2rem);
   }

   .slider {
      transition: opacity 0ms linear;
   }

   input#panel:checked + main .site-title {
      display: none;
   }

   input#panel:checked + main .text {
      display: block;
   }

   input#panel:checked + main .contact {
      display: none;
   }

   input#panel:checked + main .text .close-panel {
      display: block;
   }
}

@media (width >= 480px) {
   .site-title {
      font-size: 60px;
   }

   .text {
      position: relative;
      top: unset;
      left: unset;
   }

   /* .text::after {
      display: block;
      position: absolute;
      bottom: -5px;
      left: 0;
      background-image: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
      width: 100%;
      height: 5px;
      content: '';
   } */

   .image-scroller {
      height: 700px;
   }

   .image-track .slide img {
      width: 500px;
   }

   .text .close-panel {
      display: none;
   }

   input#panel:checked + main .buttons .close-panel {
      display: block;
   }
}

@media (width >= 992px) {
   :root {
      --max-width: 1000px;
   }

   .text {
      flex: 0 0 auto;
   }

   .text .close-panel {
      display: none;
   }
}