@font-face {
  font-family: 'Tox Typewriter'; 
  src: url("/assets/fonts/Tox-Typewriter.ttf?#iefix") format("truetype");
}

@font-face {
  font-family: 'Kawit Italic'; 
  src: url("/assets/fonts/Kawit-Italic.ttf?#iefix") format("truetype");
}

body {
  background: #F0EBE4;
  background-image: url('assets/bg.png');
  background-position: center top;
  font-family: 'Tox Typewriter';
  font-size: 20pt;
  margin: 0;
  padding: 2rem;
  justify-content: center;
  align-items: center;
  animation: fadeIn 2s ease;
}

footer {
  margin-top: 50px;
  padding: 0 100px;  
}

.title {
  background-image: url('assets/title.png');
  background-size: 100% 100%;
  height: 125px;
  width: 500px;
  font-family: 'Kawit Italic';
  font-size: 64pt;
  text-align: center;
  transform: rotate(-10deg);
  z-index: 100;
  position: relative;
  left: -25px;
}

.title p {
  margin: 0;
  position: relative;
  top: -15px;
  left: -5px;
  opacity: 0.7;
  transform: rotate(2.5deg);
}

.description {
  background-image: url('assets/description-bg.png');
  background-size: 100% 100%;
  height: 310px;
  width: 350px;
  transform: rotate(5deg);
  position: relative;
  top: -20px;
  left: 20px;
  padding: 75px 50px;
  z-index: 0;
  font-size: 16pt;
  line-height: 2em;
}

p {
  line-height: 1.7em;
  margin-bottom: 50px;
}

.line {
  margin: 10px 0;
}

nav {
  background-image: url('assets/menu.png');
  background-size: cover;
  height: 500px;
  width: 420px;
  z-index: 100;
  padding-top: 60px;
  position: relative;
  /* position: sticky; */
  bottom: auto;
  left: auto;
  /* top: 20px; */
  /* filter: brightness(106%) contrast(103%) hue-rotate(300deg) saturate(101%); */
}

nav a {
  text-decoration: none;
  color: #6a4e42;
  font-weight: bold;
}

.background-svg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-30%);
  width: 150px;
  height: auto;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.nav-item:hover .background-svg {
  opacity: 1;
}

.background-svg:hover {
  cursor: pointer;
}

main {
  min-height: 1130px;
  position: relative;
  background-image: url('assets/main-bg.png');
  box-shadow: rgba(179,175,244, 1) 0px 2px 4px, rgba(179,175,244, 1) 0px 7px 13px -3px, rgba(179,175,244, 1) 0px -1px 0px inset;
  width: 60%;
  margin: 0 auto;
  padding: 50px 100px;
}

.homepage-main {
  display: grid;
  grid-template-areas: "main-left main-right";
  grid-template-columns: 2fr 2fr;
}

.main-left {
  border-right: 1px dashed black;  
  padding-right: 50px;
}

.main-left p {
  padding: 0;  
}

.nav-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3rem 0;
}

.nav-item a {
  z-index: 2;
}

header {
  position: relative;
}

.wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
}

.side-wrapper {
  position: relative;
  left: 60px;
  border-radius: 5px;
  /*box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;*/
}

.main-drawing {
  height: 400px;  
  position: relative;
  left: 400px;
  border-radius: 5px;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}

.text-fragment {
  position: absolute;
  width: 200px;
  right: 50px;
  top: 150px;
  transform: rotate(10deg);
}

.plant-left {
  position: absolute;
  width: 150px;
  z-index: 2;
  right: 30px;
  top: 180px;
}

.plant-right {
  position: absolute;
  width: 200px;
  right: -40px;
  top: -40px;
  z-index: 2;
}

.squiggle {
  position: absolute;
  width: 100px;
  right: -50px;
  top: 80px;
}

iframe {
  height: 450px;
}

.chatbox {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 100000;
  width: 300px;
  height: 450px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  margin: 50px;
  padding: 30px;
  background-color: white;
}

.top-tape {
  position: absolute;
  height: 4vmin;
  top: -20px;
  width: 90%;
  background-color: #dbd8be;
  border-right: 1px dotted #b7b49d;
  border-left: 1px dotted #b7b49d;
  opacity: 0.5;
  z-index:200000;left: 5%;
}

.to-do {
  background-image: url('assets/to-do.jpg');
  background-size: cover;
  padding: 20px 50px;
  position: absolute;
  right: 0;
  top: 50%;
  margin-right: 50px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.right-p {
  padding: 20px 50px;
}

/* Post-it */

.post-it {
  width: 300px;
  height: 300px;
  margin: auto;
  z-index: 100001;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  -ms-perspective: 800px;
  perspective: 800px;
  padding: 20px 20px;
  position: absolute;
  right: 0;
  margin-right: 20px;
}

.slice {
  background-size: 300px 300px;
  height: 30px;
  width: 300px;
  position: absolute;
  top: 30px;
  left: 0;
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.s1 { background-position: 0px 0; }
.s2 { background-position: 0 -30px; }
.s3 { background-position: 0 -60px; }
.s4 { background-position: 0 -90px; }
.s5 { background-position: 0 -120px; }
.s6 { background-position: 0 -150px; }
.s7 { background-position: 0 -180px; }
.s8 { background-position: 0 -210px; }
.s9 { background-position: 0 -240px; }
.s10 { background-position: 0 -270px; }

.post-it::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://absences.neocities.org/assets/hi.png);
  background-size: cover;
  background-position: center;
  z-index: 0;
  -webkit-transform: scaleY(-1) rotate(45deg);
  -ms-transform: scaleY(-1) rotate(45deg);
  transform: scale(0.5) scaleY(-1) rotate(45deg);
  transition: top 0.5s ease-in-out;
}

.post-it:hover::before {
  top: 150px;
  transition: top 0.5s ease-in-out;
}

.post-it:hover .slice {
  transition-delay: 200ms;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.post-it:hover .s10 { transform: rotateX(45deg) translateZ(10px); }
.post-it:hover .s9 { transform: rotateX(16deg) translateZ(4px); }
.post-it:hover .s8 { transform: rotateX(14deg) translateZ(4px); }
.post-it:hover .s7 { transform: rotateX(12deg) translateZ(3px); }
.post-it:hover .s6 { transform: rotateX(10deg) translateZ(3px); }
.post-it:hover .s5 { transform: rotateX(8deg) translateZ(2px); }
.post-it:hover .s4 { transform: rotateX(6deg) translateZ(2px); }
.post-it:hover .s3 {
  transition-delay: 50ms;
  transform: rotateX(4deg) translateZ(1px);
}
.post-it:hover .s2 {
  transition-delay: 0ms;
  transform: rotateX(2deg) translateZ(1px);
}

/* Gallery */

.gallery {
  display: grid;
  grid: 'auto auto auto';
  position: relative;
  z-index: 100;
  gap: 15px;
  width: 1050px;
}

.gallery-item {
  width: 350px;
  transition: 300ms ease-in-out, box-shadow 300ms ease-in-out, opacity 300ms ease-in-out;
  position: relative;
  z-index: 100;
  display: block;
}

.gallery-item:hover {
  cursor: pointer;
  transform: scale(1.05);
  filter: saturate(100%);  
} 

.gallery-figure {
  margin: 0;
  overflow: hidden;
  transition: 300ms ease-in-out, box-shadow 300ms ease-in-out, opacity 300ms ease-in-out;
  z-index: 100;
  width: 350px;
  height: 450px;
}

.gallery:hover .gallery-figure:not(:hover) {
  opacity: 0.7;
  filter: saturate(25%);
}

.gallery-figure:hover {
  transition: 300ms ease-in-out, box-shadow 300ms ease-in-out;
  opacity: 1;
}

.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  color: white;
}

#modalBackground {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1900;
}

.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
  opacity: 1;
  display: flex;
  background: url('assets/black-bg.jpg');
  background-size: cover;
}

.close {
  color: white;
  font-size: 64pt;
  font-weight: bold;
  z-index: 2002;
  margin: 20px;
  position: absolute;
  right: 0;
  top: 0;
  line-height: 0.5;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.gallery-slide {
  display: none;
  margin: 0 auto;
  z-index: 2001;
  opacity: 1;
}

.cursor {
  cursor: pointer;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  /*width: auto;*/
  padding: 16px;
  /*margin-top: -50px;*/
  color: white;
  font-weight: bold;
  font-size: 48pt;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  z-index: 2003;
  height: 100%;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.gallery-slide img {
  width: auto;
  height: 900px;
  margin: 0 auto;
  z-index: 2004;
  position: relative;
  opacity: 1;
  display: block;
}

.numbertext {
  position: absolute;
  z-index: 2005;
  float: left;
  margin: 25px;
  background-color: black;
  padding: 0 5px;
}

.side-brush, .side-watercolor {
  position: fixed;
  height: 300px;
}

.side-brush {
  right: 70px;
  bottom: 125px;
  transform: rotate(30deg);
  z-index: 2;  
  filter: brightness(127%) contrast(80%) grayscale(22%) hue-rotate(305deg) saturate(75%);
}

.side-watercolor {
  border-radius: 10px;
  transform: rotate(20deg);
  right: 50px;
  bottom: 50px;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  z-index: 3;
}