/* If I want to fix the font warning later: https://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/ */

/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw0aXpsog.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw9aXpsog.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw2aXpsog.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw3aXpsog.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aXo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* General, all-page layout */
body {
  background-color: #261e2e;
  color: #e3e3e3;
  font-family: 'Courier New', monospace;
  padding: 0;
  margin-bottom: 0;
}
html {
  cursor: url("/img/moon-cursor-50x36.png") 0 0, auto;
  padding: 0;
  margin-bottom: 0;
}
a:link {
  color: #cf9eff;
}
a:visited {
  color: #a99cb8;
}
a:hover,
.clickable:hover {
  color: #dfbfff;
}
a:hover,
button:hover {
  /* Eventually I'll make this different */
  cursor: url("/img/moon-cursor-50x36.png") 0 0, auto;
}
.todo {
  list-style-type: "\2610";
}
.todo li {
  padding-left: 0.5em;
}
.todo .done {
  text-decoration: line-through;
  list-style-type: "\2611";
}
#content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 10%;
  margin-right: 10%;
  min-height: 99vh;
  margin-bottom: 0;
}
#middle {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
#infobar, #title, #nav, #footer, #main {
  background-color: #29242e;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
}
#infobar, #main {
  padding: 14px;
}
#title, #nav, #footer {
  padding: 5px 15px;
}
#title {
  font-size: 4.5vw;
}
#nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 2.2vw;
}
summary, h1, h2, h3, h4 {
  letter-spacing: 0.06rem;
}
#main p {
  font-family: 'Montserrat', 'Trebuchet MS', sans-serif;
  line-height: 1.35;
}
#main {
  flex-grow: 1;
  font-size: 1.1rem;
}
#infobar {
  max-width: 200px;
  flex-basis: 200px;
}
.glitch-time {
  background-image:url('/img/pixel-glitch-darkmode.gif');
}

.glitch-time::before {
  content: 'glitch';
  animation: animate infinite 3s;
}

@keyframes animate {
  0% {
    content: '\0000a0\0000a0day\0000a0';
  }
  20% {
    content: '\0000a0time\0000a0';
  }
  40% {
    content: 'year\0000a0\0000a0';
  }
  60% {
    content: '\0000a0\0000a0week';
  }
  80% {
    content: 'glitch';
  }
}

@media (prefers-reduced-motion: reduce) {
  .glitch-time {
    background-image:url('/img/pixel-glitch-darkmode-static.png');
  }
  .glitch-time::before {
    content: 'glitch';
    animation: none;
  }
}

/* Blog formatting */
#taglistdiv .collapsed {
  display: none;
}

.indicator {
  margin-right: 1ex;
}

/* Now Page formatting */
#nowbox {
  width: 90%;
  display: inline-block;
  height: 0; /* https://stackoverflow.com/a/13625843/2319752 why does this work??? */
  padding-bottom: 90%;
  border: 1px solid #e3e3e3;
  position: relative;
}
#nowbox .axislabel,
#nowbox .point {
  position: absolute;
  font-size: 1.6vw;
  z-index: auto;
}

#nowbox .left,
#nowbox .right {
  top: 50%;
  transform: translateY(-50%);
}

#nowbox .left {
  left: 1em;
}

#nowbox .right {
  right: 1em;
}

#nowbox .top,
#nowbox .bottom {
  left: 50%;
  transform: translateX(-50%);
}

#nowbox .top {
  top: 1em;
}

#nowbox .bottom {
  bottom: 1em;
}


/* #nowbox .point[alt] {
  display: inline-flex;
} */

#nowbox .point[alt]:focus::after {
  content: attr(alt);
  position: absolute;
  top: 90%;
  transform: translateX(-50%);
  border: 1px solid;
  width: 25vw;
  padding: 3px;
  font-size: small;
  background-color:#735D00;
  color:#ECECDA;
  z-index:1;
}


/* Fun little neopets-style scroll boxes */
.kitschtainer {
  max-width: 500px;
  height: 350px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  overflow: hidden;
  padding: 10px;
}
.kitschtainer-contents {
  overflow-y: auto;
}
.kitschtainer > div {
  width: 80%;
  padding: 0 15px;
}
.kitschtainer-header {
  text-align: right;
}

/* You can make a new one by making new classes and swapping the paint */
.starry {
  background-image: url("/img/starry-tile-off-color-large.png");
  background-color: #221d3f;
}
.starry > div {
  background-color: rgba(17, 3, 31, 0.8);
}
.ghostly {
  background-image: url("/img/tiling-ghosts-inverted-large.png");
  background-color: #221d3f;
}
.ghostly > div {
  background-color: rgba(17, 3, 31, 0.85);
}

/* Custom formatting for the expandable recipe box */
/* Omg what if I made this a little actual recipe box tho!!! with tabs!!! */
#recipebox {
  display: flex;
  flex-direction: column-reverse;
  margin-top: 10px;
  width: 90%;
}
#recipebox .recipe {
  min-width: 350px;
}
#recipebox .recipebody {
  overflow: hidden;
  background-color: #f1d592;
  color: black;
  transition: height 0.4s ease-in-out;
  margin-bottom: 40px;
}
#recipebox .recipeheader {
  /* clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
  clip-path: path(nonzero, "M 0 32 H 100 Q 98 24 96 16 C 92 0 92 0 84 0 H 16 C 8 0 8 0 4 16 L 0 32"); */
  background-color: #f1d592;
  padding: 3px 15px;
  color: black;
  font-family: 'Courier New', monospace;
  width: 350px;
  border: none;
  clip-path: url("#foldertab");
}
/* Can't quite get position-relative to work rn.
.recipe {
  position: relative;
  margin-top: -60px;
  margin-left: 20px;
}
#recipebox :first-child {
  margin-top: 0;
  margin-left: 0;
}
*/
/* Margin setup I was using for display: flex; (row aligned to flex-end)
.recipe {
  margin-left: -300px;
}
#recipebox :first-child {
  margin-left: 0;
}
*/
#recipebox .recipe:not(:last-child) {
  margin-top: -50px;
  filter: drop-shadow(5px -5px 2px rgba(50, 50, 0, 0.5));
}
/* Some cool very new CSS to allow specific transforms added
on top of the stuff in transform:; which gets overridden if you try to add new stuff.
But it turns out my existing margin stuff is good enough!!

.recipe.collapsed:hover {
  translate: 0 -50px;
}
*/
/* So the drop-shadow automatically makes the recipe div non-rectangular. This is close:
.recipe.collapsed .recipebody:hover,
.recipe.collapsed .recipeheader:hover + .recipebody
Except it doesn't take the svg clip-mask's alpha values into account.
I could put another dummy container in the middle, maybe, for the clickable/hoverable
area and then put the dropshaow on the actual top-level recipe. I think.
*/
#recipebox .recipe.collapsed:hover .recipebody {
  height: 6rem;
}
#recipebox .collapsed .recipebody {
  height: 1px;
  border-bottom: 15px solid #f1d592;
  margin-bottom: -15px;
}
#recipebox .expanded .recipebody,
#recipebox .recipe.collapsed:hover .recipebody {
  padding: 20px;
  border-bottom: 0;
}
#recipebox a:link {
  color: #291240;
}
#recipebox a:visited {
  color: #261e2e;
}
#recipebox a:hover {
  color: #765696;
  cursor: url("/img/moon-cursor-50x36.png") 0 0, auto;
}
#recipebox a {
  font-weight: bold;
}
#recipebox .ingredients li {
  /* max-height: 1.3em; */
  list-style-type: "\223E";
  padding-left: 0.5em;
}
#recipebox .ingredients {
  padding-left: 1.5em;
}
#recipebox .blurb,
#recipebox .ingredients,
#recipebox .instructions {
  line-height: 1.3em;
    background: repeating-linear-gradient(
    to bottom, transparent, transparent 1.2em, #8e6d2e 1.3em
  );
  font-family: 'Courier New', monospace;
}
/* Failed attempts at lined stuff the old-fashioned way */
/* span.lined {
  border-bottom: 1px solid black;
  width: 100%;
} */

/* Formatting for the simple recipe box */

#simplerecipes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: 5%;
  margin-right: 5%;
}
#simplerecipes .recipe,
.wikibox,
.standarddetails {
  background-color: #29242e;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  padding-top: 0;
}
#simplerecipes .recipebody,
.wikibox .spoilers,
.standarddetails .detailscontent {
  padding: 10px;
}
#simplerecipes .recipeheader,
.wikibox summary,
.standarddetails summary {
  background-color: #161326;
  margin-top: 0;
  border-radius: 6px;
  padding: 3px 15px;
  color: #e3e3e3;
  font-family: 'Courier New', monospace;
  font-weight: bold;
}
#simplerecipes .recipeheader {
  font-size: x-large;
}
#simplerecipes .recipe[open] > .recipeheader, #simplerecipes .recipeheader:hover,
.wikibox summary:hover, .wikibox[open] > summary,
.standarddetails summary:hover, .standarddetails[open] > summary {
  background-color: #1e1b33;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;  
}

/* Coding my own pixel art tool I guess! */
.canvascontainer {
  display: inline-block; /* shrink to fit */
  border: 1px solid #000000;
  font-size: 0;
}
#pixelartarea {
  padding: 0;
  margin: 0;
  touch-action: none;
}
#pixelartapp {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}


/* Light mode */
@media (prefers-color-scheme: light) {
  body {
    /* background-color: #f8c40a; */
    color: #1b1224;
  }
  #main, #infobar, #title, #nav, #footer {
    background-color: #bfb3cb;
    border-color: #99812c;
  }
  .kitschtainer > div {
    background-color: rgba(236, 228, 245, 0.95);
  }
  a:link {
    color: #740de0;
  }
  a:visited {
    color: #6b3f99;
  }
  a:hover,
  .clickable:hover {
    color: #3e1070;
  }
  .glitch-time {
    background-image:url('/img/pixel-glitch-lightmode-static.png');
  }
  #simplerecipes .recipe,
  .wikibox,
  .standarddetails {
    background-color: #f7ecbe;
    border-color: #99812c;
  }
  #simplerecipes .recipeheader,
  .wikibox summary,
  .standarddetails summary {
    background-color: #f2d15a;
    color: #524106;
  }
  #simplerecipes .recipe[open] > .recipeheader, #simplerecipes .recipeheader:hover,
  .wikibox summary:hover, .wikibox[open] > summary,
  .standarddetails summary:hover, .standarddetails[open] > summary {
    background-color: #e0c14f;
  }
}

/* Stuff for mobile & small screens--move nav bar to top */
@media only screen and (max-width: 600px) {
  #middle,
  #pixelartapp {
    flex-direction: column;
  }
  #infobar img {
    max-height: 20px;
    width: auto;
  }
  #infobar .optional {
    display: none;
    overflow: hidden;
  }
  #infobar {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    max-width: none;
    gap: 8px;
    font-size: 10pt;
    flex-basis: auto;
  }
  #infobar > * {
    margin: 0;
  }
}