/* -------------------- Fonts -------------------- */
@font-face {
   font-family: "Donika Hand";
   src: url("/assets/fonts/DonikaHand.otf") format("opentype");
   src: url("/assets/fonts/DonikaHand.ttf") format("truetype");
   font-weight: 400;
}

@font-face {
   font-family: "Donika Hand";
   src: url("/assets/fonts/DonikaHand-Bold.woff") format("woff");
   font-weight: 600;
}



.special-elite-regular {
   font-family: "Special Elite", system-ui;
   font-weight: 400;
   font-style: normal;
}

/************** General Resets **************/
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-weight: 400;
}

:root {
   --text-colour: #222222;
   --accent-colour: rgb(255, 0, 106);
   --bg-colour: #f7f7f7;

   --paper-colour: #D4B186;
   --lined-paper: url(/assets/lined-paper-2.png);
   --sketch-paper: url(/assets/sketch-paper-texture.png);
   --brown-cardstock: url(/assets/brown-cardstock-texture.png);
}

strong {
   font-weight: 600;
   letter-spacing: 7%;
}

::selection {
   color: var(--text-colour);
   background-color: var(--paper-colour);
}

/************** General Styles **************/
body {
   background-color: var(--bg-colour);
   background-size: 250px;
   background-image: var(--sketch-paper);
   font-family: "Donika Hand";
   color: var(--text-colour);
   overflow-x: hidden;
   width: 100vw;
}

/*
body::after {
   background-image: var(--sketch-paper);
   background-size: 400px;
   content: "";
   opacity: 0.2;
   height: 100%;
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 100;
   pointer-events: none;
}
*/
a {
   color: var(--text-colour);
   text-decoration: none;
}

.inline-link {
   text-decoration: underline;
   transition: color 0.15s ease;
}

.inline-link:hover {
   color: var(--accent-colour);
}

.back-button {
   font-size: 2.5rem;
   padding: 40px;
   text-decoration: none;
}

/* TAPE BACK BUTTON */
.back-btn {
   display: block;
   position: relative;
   width: 230px;
   height: 65px;
}

.back-btn>svg {
   position: absolute;
   top: 0;
   right: 0;
}

.back-btn>div {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 200px;
   height: 47px;
   background-color: var(--paper-colour);
   background-image: var(--brown-cardstock);


}

.back-btn>div>* {
   font-size: 55px;
   line-height: 47px;
   letter-spacing: 15%;
   text-align: center;
}

.back-btn:hover {
   transform: rotate(-3deg);
}

/* -------------------------- */

.hidden {
   display: none;
}

/************** Homepage **************/
.homepage {
   position: relative;
   width: 100%;
   min-height: 100vh;
   height: fit-content;
   padding: 2rem;
   /*background-image: url(/assets/imgs/home/news-top-1024.png), url(/assets/imgs/home/blank-news-925.png);*/
   background-size: min(60%, 1000px);
   background-position: right top, left bottom;
   background-repeat: no-repeat, no-repeat;
}

/* Page Headline */
.top-left {
   position: relative;
   width: fit-content;
   height: fit-content;
   padding: 1.25rem;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
}

.flair {
   grid-column: 1;
   grid-row: 1;
   width: clamp(500px, 100%, 790px);
}

.homepage-heading {
   grid-column: 1;
   grid-row: 1;
   /*padding: 2.5rem 0 0 2.5rem;*/
   padding-left: 2.5rem;
}

.headline {
   padding-top: 4.25rem;
}

.headline h1 {
   font-size: clamp(5rem, 14vw, 8rem);
   letter-spacing: 10%;
   line-height: 65%;
}

.headline h3 {
   font-size: clamp(2.25rem, 6.5vw, 3.75rem);
   letter-spacing: -3%;
   line-height: 65%;
}

.headline h4 {
   font-size: clamp(1.75rem, 3.5vw, 2rem);
   letter-spacing: -5%;
}

.links {
   width: auto;
}

.link-icon {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   display: inline-block;
   margin: 5px 5px 5px 5px;
   transition: transform 0.3s ease;
   will-change: transform;

}

.link-icon:hover {
   transform: translateY(-4px);
}

.link-icon img {
   width: 100%;
}

/* The Brown Tape Note */
.tape-note-container {
   position: absolute;
   padding: 1rem 4rem 0 0;
   right: 0;
   top: 0;
}

.tape-note {
   position: relative;
   height: 100px;
   width: 375px;
}

.brown-note {
   position: absolute;
   width: 275px;
   height: 50px;
   perspective: 1000px;
   top: 20%;
   left: 0;
}

.note-content {
   position: relative;
   height: 100%;
   width: 100%;
   transition: transform 0.7s ease;
   transform-style: preserve-3d;
}

.brown-note:hover .note-content {
   transform: rotateY(-180deg);
   cursor: default;
}

.note-front,
.note-back {
   position: absolute;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   width: 100%;
   height: 100%;
   padding: 0.75rem;
   font-size: 1.35rem;
   letter-spacing: 10%;
   text-align: center;
   background-color: var(--paper-colour);
   background-image: var(--brown-cardstock);
}

.note-front>p,
.note-back>p {
   line-height: 26px;
}

.note-back {
   transform: rotateY(-180deg);
}

.tape {
   position: absolute;
   top: 0;
   right: 0;
}

/* Polaroid & About Me transition*/
.polaroid {
   position: absolute;
   left: clamp(5rem, 15%, 400px);
   top: max(40%, 400px);
   width: 365px;
}

#about-me {
   border: 0;
   background-color: #00000000;
   transform: rotate(-4deg);
   transition: transform 0.5s ease;
}

#about-me>img {
   width: 100%;
}

#about-me:hover {
   transform: rotate(0deg);
   backface-visibility: hidden;
   transform-style: preserve-3d;
   cursor: pointer;
   z-index: 1;
}

/* Navigation Menu */
.menu-container {
   display: flex;
   align-items: center;
   justify-content: end;
   margin-right: min(20%, 700px);
   /*background: url(./assets/imgs/home/paper1.png) no-repeat center/99%;*/
}

.menu {
   display: flex;
   flex-direction: column;
   gap: 2rem;
   align-items: start;
   list-style: none;
}

.menu>li {
   display: flex;
   align-items: center;
   gap: 25px;
}

.highlight {
   position: relative;
   display: flex;
   align-items: center;
}

.highlight>a {
   font-size: 3.5rem;
   line-height: 3.5rem;
   opacity: 90%;
   text-align: center;
   text-transform: lowercase;
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: perspective(1px) translateZ(0);
   transform: perspective(1px) translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   position: relative;
   overflow: hidden;
}


.highlight>a:before {
   content: "";
   position: absolute;
   z-index: -1;
   left: 0;
   right: 100%;
   bottom: 0;
   background-color: #EF9D9DCC;
   height: 3px;
   -webkit-transition: right 0.4s ease-out;
   transition: right 0.4s ease-out;
   opacity: 65%;
}

.highlight:before {
   content: "";
   position: absolute;
   z-index: 0;
   left: 0;
   right: 100%;
   bottom: 0;
   background-color: #EF9D9D65;
   height: 3.5rem;
   -webkit-transition: right 0.4s ease-out;
   transition: right 0.4s ease-out;
   opacity: 65%;
}

.highlight:hover:before {
   right: 0;
}

.highlight>a:hover:before {
   right: 0;
}

/* Blue Highlight Hover*/
.highlight.blue>a:before {
   background-color: #9DD4EFCC;
}

.highlight.blue:before {
   background-color: #9dd4ef65;
}

/* Green Highlight Hover*/
.highlight.green>a:before {
   background-color: #96EB8FCC;
}

.highlight.green:before {
   background-color: #96EB8F65;
}

/* Yellow Highlight Hover*/
.highlight.yellow>a:before {
   background-color: #ECEF9DCC;
}

.highlight.yellow:before {
   background-color: #ECEF9D65;
}

/* Pink Highlight Hover*/
.highlight.pink>a:before {
   background-color: #EF9DE7CC;
}

.highlight.pink:before {
   background-color: #EF9DE765;
}

/* Highlight Circles */
.circle {
   height: 50px;
   width: 50px;
   border-radius: 50%;
   opacity: 65%;
}

.circle.red {
   background-color: #EF9D9DCC;
}

.circle.blue {
   background-color: #9DD4EFCC;
}

.circle.green {
   background-color: #96EB8FCC;
}

.circle.yellow {
   background-color: #ECEF9DCC;
}

.circle.pink {
   background-color: #EF9DE7CC;
}

/************** About Me Modal **************/
.dialog-content {
   display: flex;
   justify-content: center;
   width: 100%;
}


.about-content * {
   font-family: "Donika Hand", monospace;
   text-indent: 0;
}

.about-content h2 {
   font-size: 3.5rem;
   font-weight: 600;
   letter-spacing: 3%;
   text-transform: uppercase;
   line-height: 3rem;
}

.about-content p {
   font-size: 2rem;
}

.about-bold {
   font-size: 3.5rem;
   font-weight: 600;
   letter-spacing: 3%;
   text-transform: uppercase;
}

.about-content {
   padding: 1em;
}

.about-content div {
   padding-bottom: 20px;
   max-width: 850px;
}

.about-ul {
   width: 85%;
   margin-left: 40px;
   line-height: 2.5rem;
}

.about-ul li {
   list-style-type: circle;
   font-size: 1.75rem;
}

.about-ul li strong {
   font-size: 1.85rem;
}

.contact-ul>* {
   text-decoration: underline;
   font-size: 1.75rem;
   list-style-type: none;
}

.contact-ul {
   margin-left: 1em;
   display: flex;
   gap: 2%;
}

/************* 404 Page *************/
.container-404 {
   margin-top: 2.75rem;
   display: flex;
   align-items: center;
}

.content-404 {
   text-align: center;
   margin: auto;
}

.container-404 h1 {
   font-size: clamp(1.5rem, 3vw + 1rem, 4rem);
}

.container-404 h2 {
   font-size: clamp(0.5rem, 2vw + 1rem, 2.5rem);
   margin-bottom: 5rem;
}

.nav-404 {
   margin: auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
   gap: 2rem;
   width: 80%;

}

.nav-404 a {
   font-size: 2rem;
   padding: 0.5rem 1.25rem;
   background: var(--brown-cardstock);
   transition: transform 0.2s ease;
   text-transform: uppercase;
   letter-spacing: 5%;
}

.nav-404 a:hover {
   transform: rotate(-4deg);
}

.torn-piece {
   width: 100vw;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
}

.torn-piece>* {
   grid-row: 1;
   grid-column: 1;
}

.paper {
   width: 100%;
   overflow-x: hidden;
}

.paper svg {
   margin-left: -20px;
   width: 105vw;
   min-width: 1920px;
   min-height: 310px;
}

#broken {
   padding-top: 80px;
   text-align: center;
   font-size: 3rem;
   text-decoration: line-through 7px;
   z-index: 2;
}

@media(min-width: 2000px) {
   .menu-container {
      left: 55%;
      transform: none;
   }
}

/* -------------------- Mobile Overwrites -------------------- */
@media(max-width: 768px) {
   .homepage {
      padding: 0 0 245px 0;
      max-width: 100vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-size: 80%;
   }

   .tape-note-container {
      position: static;
      padding-right: 2rem;
      align-self: flex-end;
   }

   .top-left {
      position: static;
      padding: 0;
      margin-top: 85px;
   }

   .flair {
      width: 97%;
   }

   .homepage-heading {
      padding: 0;
   }

   .headline {
      padding-top: 10%;
      text-align: center;
   }

   .headline h1 {
      font-size: 14vw;
   }

   .headline h3 {
      font-size: 6.5vw;
   }

   .headline h4 {
      font-size: 3.25vw;
   }

   .links {
      display: flex;
      justify-content: center;
   }

   .nav-link {
      font-size: 3rem;
   }

   .polaroid {
      position: static;
      margin-top: 50px;
      max-width: 250px;
   }

   #about-me img {
      max-width: 250px;
   }

   dialog {
      min-width: 100vw;
      text-align: left;
   }

   .about-content {
      margin-bottom: 100px;
   }

   .menu-container {
      position: static;
      transform: none;
      max-width: 485px;
      max-height: 600px;
      margin: 0;
   }

   .menu {
      gap: 30px;
   }

   .highlight>a {
      font-size: 2.5rem;
   }

   .highlight:before {
      height: 48px;
   }

   .highlight:hover:before {
      right: 70px;
   }

   .circle {
      height: 50px;
      width: 50px;
   }
}