/**
 * This website is licensed under CC 4.0 Attribution
 * so you're welcome to strip-mine this stylesheet.
 */
#ticker {
  font-family: 'DINdong', sans-serif;
}

#dindong {
  font-family: 'DINdong';
  background-color: cornflowerblue;
  color: cornsilk;
  font-size: 50px;
}

#weather {
  min-height: 15rem;
  padding: 0.3rem;
}

h1 {
  margin: 0 !important;
}

img.icon {
  display: none;
}

img.favicon {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  vertical-align: middle;
}

body {
  overflow-x: hidden;
}

body.ruined * {
  border-radius: 24px;
}

#hover-img {
  display: none;
}

#hover-a {
  display: none;
}

#webring {
  padding: 1em;
  text-align: center;
  background-color: #d9e5c9;
  font-family: 'Redaction 35', serif;
  font-size: smaller;
  color: #2f4f2f;

  a {
    color: #006400;
    text-decoration: underline;
  }

  #webring-links {
    div {
      display: block;
      margin-top: 16px;
      margin-bottom: 16px;
    }
  }
}


header {
  overflow-y: auto;
}

.ticker-outer {
  overflow: hidden;
  white-space: nowrap;
  width: 74px;
  border: 1px solid black;
  border-radius: 5px;
}

.ticker-inner {
  animation: ticker 3s ease-in-out infinite;

  * {
    padding-left: 4px;
    padding-right: 4px;
  }
}

@keyframes ticker {
  0%,
  10% {
    transform: translateX(0);
  }

  90%, 100% {
    transform: translateX(-83.5px);
  }
}

@keyframes blink {
  67% {
    opacity: 0;
  }
}

@keyframes grow {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(2);
  }
}

.spin {
  transition: transform 2s ease-in-out;
}

.spin:hover {
  transform: rotate(720deg);
}


.distort {
  -webkit-filter: url("#distort");
  filter: url("#distort");
}

#inner-receipt {
  font-size: smaller;
  font-family: "Fake Receipt";
  color: black;
  /* transform: rotate(-2deg); */
  background-color: #f0f0f0;
  max-width: 260px;
  /* mask: repeating-conic-gradient(from 135deg at 50% 0.3ch,#0000 0,#000 1deg 89deg,#0000 90deg 180deg) 50% -0.3ch/0.6ch; */
  mask: repeating-conic-gradient(from 135deg at 50% 0.6ch,#0000 0,#000 1deg 89deg,#0000 90deg 180deg) 50% -0.6ch/1.2ch;
  /* box-shadow: inset 0px 0px 2px 1px rgb(255 255 255),
inset 0px 0px 20px 3px rgba(0, 0, 0, 0.2),
1px 1px 5px 1px rgb(255, 255, 255, 0.3),
0px 0px 100px 6px rgba(0, 0, 0, 1); */
  padding: 24px;
  margin: 4px auto;
  /* add the slightest amount of shadow, on the bottom left */
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

header {
  direction: rtl;
}

header * {
  direction: ltr;
}

#inner-receipt hr {
  border: none;
  border-top: 2px dashed black;
  margin: 8px 0;
}

.jolty-marquee-vertical {
  /* animation: joltmarquee 5s 1 steps(30); */
}

@keyframes joltmarquee {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0%); }
}

div.cards, .annex {
  gap: 4px;
  padding: 4px;
}

div.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));
}

article {
  border: 1px dotted grey;
}

article.art.wide {
  grid-column: span 2;
}

@media (min-width: 640px) {
  .only-show-on-mobile {
    display: none !important;
  }

  article.listing.big {
    grid-column: span 2;
    grid-row: span 2;
  }

  article.art.big {
    grid-column: span 2;
    grid-row: span 2;
  }

  #model {
    width: 100%;
    height: 38ch;
  }
}

@media (max-width: 639px) {
  .only-show-on-desktop {
    display: none;
  }

  #model {
    width: 100%;
    height: 15ch;
  }
}

.bottom-align {   
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}


@keyframes tumble {
  0% {
    transform: translateZ(0) rotateY(0deg) 
  }
  50% {
    transform: translateZ(-30px) rotateY(180deg) rotateX(-18deg);
  }
  100% {
    transform: translateZ(-60px) rotateY(360deg) rotateX(-30deg);
  }
}

article.listing {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.5ch;
  /* backdrop-filter: blur(1px); */

  img:not(.notpreview), .preview {
    aspect-ratio: 4/3;
    object-fit: cover;
    z-index: 100;
  }

  :hover {
    img {
      /* animation: tumble 20s 1s infinite linear; */
    }
  }

  img.emoji {
    display: inline-block;
    width: 40px;
    height: 40px;
  }

  p.title {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  p.description {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  small {
    position: relative;
    bottom: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  time {
    display: block;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-top: auto;
  }
}

article.listing.dark {
  box-shadow: 0 0 0 2px black;
  clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 20px, 100% 100%, 0% 100%);
  background-color: black;
  color: white;

  time {
    color: #d4d4d4;
  }
}

footer {
  font-family: 'Fake Receipt', sans-serif;
  padding: 1px;
  overflow-y: auto;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  width: 100%;
  white-space: nowrap;
  gap: 1rem;
  border: 1px dotted grey;
}

#receipt {
  margin: 4px;
}

#watermark {
  display: initial;
  font-family: 'Crozet';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20vw;
  color: rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  pointer-events: none;
  /* Make sure it doesn't interfere with other elements */
  z-index: -1;
  /* Push it to the back */
}

@media (min-width: 640px) {

  #hover-a {
    font-size: 5rem;
    color: color(display-p3 1 0 1);
    display: initial;
    width: 100vw;
    /* animation: blink 1s step-end infinite; */
    word-wrap: break-all;
    position: absolute;
    bottom: 0;
    transform-origin: bottom left;
    pointer-events: none;
  }

  #hover-img {
    display: initial;
    position: absolute;
    width: 400px;
    border: 1px dotted grey;
    bottom: 0;
    right: 0;
    transform-origin: bottom right;
    z-index: 1000;
    pointer-events: none;
  }


  body {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "header main"
      "header main"
      "footer footer";
  }

  header {
    grid-area: header;
  }

  #receipt {
    grid-area: receipt;
  }

  main {
    grid-area: main;
    overflow-y: auto;
  }

  footer {
    grid-area: footer;
    position: sticky;
    bottom: 0;
  }
}

.vectorheart {
  background-color: green;
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: all 0.3s ease;
}

.annex {
  display: grid;
}

.annex-section {
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 16px;
  border: 1px dotted grey;
}

@media (min-width: 900px) {
  .annex {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .annex {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1600px) {
  .annex {
    grid-template-columns: repeat(4, 1fr);
  }
}

.raw {
  font-family: serif !important;
}


#velocity-design-comfort-scene {
  overflow: hidden;
  perspective: 50px; /* Distance of the viewer from the object */
  position: absolute; /* relative to #root */
  z-index: -1;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

#plane {
  background-color: white;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(50deg);
  transform-origin: center center;
}