@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Lato");
@font-face {
  font-family: "Taste";
  src: url("../fonts/Taste Book.otf");
  font-weight: normal;
  font-style: normal;
}
h1, h2 {
  font-family: "Taste";
}

body {
  font-family: "Lato", "Open Sans", "Avenir", "Product Sans", "Helvetica", "Arial", sans-serif;
}

html {
  font-size: min(26px, max(18px, 2.8vmin));
}

body {
  padding: 0;
  margin: 0;
}

.gallery {
  list-style: none;
  display: flex;
  padding: 1vw;
  gap: 1vw;
  justify-content: stretch;
  flex-wrap: wrap;
}
.gallery li {
  display: block;
  flex: 10em 1 0;
  height: 12em;
  margin: 0;
  padding: 0;
  position: relative;
}
.gallery li a {
  position: absolute;
  inset: 0;
  padding: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffdd66;
}
.gallery li a:hover {
  background: #5500aa;
}
.gallery li a img {
  max-width: 100%;
  max-height: 100%;
}

#full::backdrop {
  background-color: rgba(85, 0, 170, 0.5);
  backdrop-filter: blur(1rem);
}
#full button, #full a {
  display: block;
  position: absolute;
  top: 2rem;
  min-width: 2rem;
  height: 2rem;
  border-radius: 2rem;
  appearance: none;
  background: transparent;
  background: white;
  font: inherit;
  border: none;
  box-sizing: border-box;
  border: 1px solid black;
}
#full button:hover, #full a:hover {
  background: #ffdd66;
}
#full #download {
  padding: 0.3rem 1rem;
  right: 5rem;
  color: inherit !important;
  text-decoration: none;
}
#full #close {
  right: 2rem;
  font-size: 0;
  line-height: 2rem;
  padding: 0;
}
#full #close::after {
  line-height: 1.65rem;
  font-size: 2rem;
  content: "×";
}
#full #previous {
  left: 2rem;
  top: calc(50% - 1rem);
  font-size: 0;
  line-height: 2rem;
  padding: 0;
}
#full #previous::after {
  line-height: 1.65rem;
  font-size: 2rem;
  content: "<";
}
#full #next {
  right: 2rem;
  top: calc(50% - 1rem);
  font-size: 0;
  line-height: 2rem;
  padding: 0;
}
#full #next::after {
  line-height: 1.65rem;
  font-size: 2rem;
  content: ">";
}
#full #full-img {
  max-width: 80vw;
  max-height: 80vh;
}
#full.loading {
  min-width: 50vw;
  min-height: 50vw;
}
#full.loading #full-img {
  display: none;
}
#full.loading::after {
  position: absolute;
  display: block;
  top: calc(50% - 0.5em);
  width: calc(100% - 2em);
  text-align: center;
  content: "Loading...";
}

body > p {
  max-width: 40em;
  margin: 1em auto;
  padding: 0 1em;
}
body > p a {
  color: #5500aa;
}
body > p a:hover {
  background: #ffdd66;
}

header {
  background: #5500aa;
  padding: 3em;
}
header h1 {
  font-size: 3em;
  margin: 0;
}
header a {
  color: #ffdd66 !important;
  text-decoration: none;
}
header a:hover {
  text-decoration: underline;
}
header a + a::before {
  content: "/";
  display: inline-block;
  margin: 0 0.5em;
  text-decoration: none !important;
}

footer {
  background-color: #5500aa;
  color: #ffdd66;
  padding: 1em 3em;
}