@charset "UTF-8";
/* link gallery styles will now go here, separate from the main index page */
@font-face {
  font-family: "Besley";
  font-display: swap;
  src: url("/_assets/fonts/Besley/Besley-VariableFont_wght.woff2") format("woff2"), url("/_assets/fonts/Besley/Besley.woff") format("woff"), url("/_assets/fonts/Besley/Besley-VariableFont_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Inconsolata";
  font-display: swap;
  src: url("/_assets/fonts/Inconsolata/Inconsolata-VariableFont_wdth-wght.woff2") format("woff2"), url("/_assets/fonts/Inconsolata/Inconsolata.woff") format("woff"), url("/_assets/fonts/Inconsolata/Inconsolata-VariableFont_wdth-wght.ttf") format("truetype");
}
@font-face {
  font-family: "Instrument Sans";
  font-display: swap;
  src: url("/_assets/fonts/Instrument_Sans/InstrumentSans-VariableFont_wdth-wght.woff2") format("woff2"), url("/_assets/fonts/Instrument_Sans/InstrumentSans.woff") format("woff"), url("/_assets/fonts/Instrument_Sans/InstrumentSans-VariableFont_wdth-wght.ttf") format("truetype");
}
:root {
  --font-1: "Instrument Sans", sans-serif;
  --font-2: "Besley", serif;
  --font-3: "Inconsolata", monospace;
  --font-color-light: #4e494e;
  --h1-light: #5a5463;
  --h2-light: #712357;
  --h3-light: #631863;
  --link-color-light: darkmagenta;
  --link-hover-bg-color-light: rgba(216, 112, 147, .5);
  --document-color-light: thistle;
  --page-color-light: #fff6f6;
  --section-card-light: rgb(255, 239, 239);
  --footer-font: rgb(97, 58, 97);
  --page-bg-dark: rgb(13, 13, 14);
  --page-border-dark: #503281;
  --section-card-dark: hsl(255, 5%, 16%);
  --dark-mode-links: rgb(255, 192, 216);
  --link-hover-bg-dark: rgb(170, 92, 118);
  --dark-mode-h: rgb(223, 154, 236);
  --dark-button-bg: #463646;
}

* {
  scrollbar-color: rgb(184, 140, 184) transparent;
  scrollbar-width: thin;
}

body {
  color: white;
  background-color: rgb(56, 49, 56);
  transition: background-color 0.25s ease-out;
}

a {
  color: plum;
}

header nav {
  margin: auto;
  padding-left: 1em;
  padding-right: 1em;
  font-size: 1.15em;
  font-weight: normal;
  letter-spacing: 1px;
}
header nav ul {
  margin: 0;
  padding: 0;
  padding-top: 0.5em;
  padding-bottom: 1em;
}
header nav li {
  display: inline-block;
  margin-right: 0.5em;
  margin-bottom: 0;
  padding-bottom: 0;
  white-space: nowrap;
}
header nav li:last-child::after {
  content: "✧";
  font-size: 1.3em;
  margin-left: 0.5em;
  color: pink;
  font-weight: normal;
}
header nav li::before {
  content: "✧";
  font-size: 1.3em;
  margin-right: 0.5em;
  color: pink;
  font-weight: normal;
}
header nav a {
  text-decoration: none;
  padding: 0px 5px 3px 5px;
}
header nav::-webkit-scrollbar-thumb {
  background-color: rgba(161, 117, 197, 0.451);
}

footer {
  margin: 3em auto;
  text-align: center;
  font-size: 1em;
  display: flex;
  flex-direction: column;
  row-gap: 1em;
}
footer ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
  padding-left: 0;
  list-style: none;
  justify-content: center;
  align-items: center;
  row-gap: 1em;
}
footer ul:last-of-type {
  -moz-column-gap: 1em;
       column-gap: 1em;
}
footer li:not(ul:last-of-type li)::before {
  content: "⬩";
  font-size: 1.25em;
  margin: 0 1em;
}
footer li:not(ul:last-of-type li):first-of-type::before {
  content: none;
}
footer a img {
  text-decoration: none;
}

button {
  cursor: pointer;
}

::-moz-selection {
  background-color: rgb(248, 208, 170);
  color: black;
}

::selection {
  background-color: rgb(248, 208, 170);
  color: black;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(164, 118, 170);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: plum;
}

@keyframes fadeInSlide {
  0% {
    opacity: 0;
    transform: translatey(-10px);
  }
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}
@keyframes fadeInPage {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
:root {
  --button-code-txt: rgb(255, 244, 244);
  --warning-bg: #e3d7e9;
  --gif-controls-bg: pink;
  --gif-controls-hover-bg: rgb(255, 222, 151);
  --gif-controls-active-bg: rgb(238, 226, 235);
  --gif-controls-focus-bg: rgb(248, 220, 248);
  --gif-controls-font: #210a42;
  --gif-controls-border: 1px solid purple;
}

body {
  font-family: var(--font-1);
  font-size: 1.1em;
  line-height: 1.5em;
  margin: auto;
}

/* animations */
section {
  transition: transform 0.3s;
}
section:hover {
  transform: translatey(-5px);
}

.loader {
  display: block;
  position: absolute;
  width: 100%;
  min-width: none;
  max-width: none;
  overflow: hidden;
  top: 30vh;
  left: auto;
  right: auto;
  margin: auto;
  font-size: x-large;
  text-align: center;
  z-index: 1;
  /*p {
      filter: drop-shadow(.1em .1em 5px rgb(255, 215, 222)) drop-shadow(-.1em -.1em 5px rgb(255, 215, 222));
  }*/
}
.loader button {
  display: block;
  font-family: inherit;
  margin: 3vh auto;
  padding: 0.5em;
  border: 1px solid;
}

.layout {
  opacity: 0;
}

.layout {
  border: 1px solid;
  box-shadow: 5px 5px 10px rgba(128, 0, 128, 0.1);
  margin: 5% auto auto;
  max-width: 1200px;
}

main {
  margin: auto;
  -moz-columns: 3;
       columns: 3;
  -moz-column-gap: 0;
       column-gap: 0;
  background-size: 200px !important;
  padding-top: 8vh;
  padding-bottom: 10vh;
  padding-left: 1%;
  padding-right: 1%;
}

header {
  background-color: inherit;
}
header hgroup {
  display: flex;
  flex-direction: row;
}
header hgroup p {
  letter-spacing: 0.05em;
  align-self: center;
}
header nav #link-gallery {
  font-weight: 600;
}
header nav #link-gallery a {
  -webkit-text-decoration: wavy underline 1px;
          text-decoration: wavy underline 1px;
}

.header-top {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5vh 5%;
}

h1 {
  font-size: 2em;
  line-height: 1.5em;
  letter-spacing: 0.05em;
  font-family: var(--font-2);
  font-weight: 500;
  margin-right: 2em;
}
h1::before {
  content: "₊ ⊹";
  font-weight: 100;
  color: thistle;
  margin-right: 0.25em;
}

h2 {
  margin: 0;
  border-bottom: 1px solid;
  padding-bottom: 0.5em;
  font-size: 1.25em;
  letter-spacing: 0.05em;
  font-weight: 500;
}
h2::before {
  margin-right: 0.5em;
}

section {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10vh;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  padding: 1em;
  height: -moz-min-content;
  height: min-content;
  max-width: 270px;
  border-radius: 15px 15px 15px 15px;
  border: 1px solid;
}

.buttons {
  display: none;
  width: 80%;
  max-width: 300px;
  padding: 0;
  border-radius: 0;
}
.buttons h2 {
  padding: 1em;
}
.buttons p {
  padding-left: 2em;
  padding-right: 2em;
}

.warning h2 {
  border-color: rgb(204, 148, 204);
}

.my-button {
  max-width: 300px;
}

.code {
  word-break: break-all;
  border: 1px solid gray;
  text-align: left;
  resize: vertical;
  margin: auto;
  overflow-y: scroll;
  padding: 0.5em;
  line-height: 1em;
}

.button-gallery {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
  text-align: center;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  margin-left: auto;
  margin-right: auto;
}

a {
  background-color: transparent;
  text-decoration-style: dashed;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration: none;
}

img {
  image-rendering: pixelated;
}

p img {
  display: block;
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
}

hr {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border: 1px dashed plum;
}

time {
  font-weight: 600;
}
time:not(footer time) {
  display: block;
}

@media all and (max-width: 1200px) {
  .layout {
    border-left: none;
    border-right: none;
  }
}
@media all and (max-width: 1100px) {
  nav {
    font-size: 1.1em;
  }
  main {
    -moz-columns: 2;
         columns: 2;
    padding-top: 6vh;
    font-size: 1.1em;
  }
  section {
    margin-bottom: 7vh;
    max-width: 300px;
  }
  .warning {
    max-width: 275px;
  }
  .buttons {
    max-width: 350px;
    padding: 0 0 1em;
  }
}
@media all and (max-width: 900px) {
  body {
    font-size: 1em;
  }
  header hgroup {
    flex-direction: column;
  }
  header hgroup p {
    align-self: flex-start;
  }
  .header-top {
    margin-bottom: 1em;
  }
  h1 {
    font-size: 2em;
  }
  h1:before {
    display: none;
  }
  main {
    -moz-columns: 2;
         columns: 2;
  }
}
@media all and (max-width: 768px) {
  header {
    position: relative;
  }
  .header-top {
    padding-left: 7vw;
    padding-right: 7vw;
  }
  #themeSwitch {
    margin-top: 2vh;
    margin-bottom: auto;
  }
  h1 {
    margin-right: auto;
  }
  nav {
    overflow-x: auto;
    white-space: nowrap;
    padding-left: 5%;
    font-size: 1em;
  }
  nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 192, 203, 0.445);
  }
  main {
    display: flex;
    flex-direction: column;
    -moz-columns: 1;
         columns: 1;
    padding-top: 10vh;
    padding-bottom: 2vh;
  }
  section {
    max-width: 100vw;
    margin-bottom: 10vh;
  }
  footer {
    width: 90%;
  }
}
@media all and (max-width: 700px) {
  .layout {
    margin-top: 0;
    max-width: none;
    border-top: none;
    border-left: none;
    border-right: none;
  }
}
@media all and (max-width: 600px) {
  main {
    -moz-columns: 1;
         columns: 1;
  }
}/*# sourceMappingURL=link-gallery.css.map */