:root {
  --background-color:#2b2b2b;
  --em-color:#fff;
  --color:#ddd;
  /* --font-stack:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; */
  --font-stack:"Crimson Pro", serif;
}

* {
  margin:0;
  border:0;
  box-sizing:border-box;
  padding:0
}

html {
  height:100%;
  background-color:var(--background-color);
  /* scrollbar-color:#c8c8c8 #dedede; */
  scrollbar-color:#60606060 #00000000;
  scrollbar-width:2px
}

body {
  background-color:var(--background-color);
  background-image: url("https://www.transparenttextures.com/patterns/black-linen.png");
  font-family:var(--font-stack);
  line-height:1.6;
  color:var(--color);
  min-height:100%;
  font-size:18px;
  padding:8px;
}

header {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  height:100vh;
}

main {
  max-width:650px;
  margin:auto;
  padding-bottom:50px;
}

p {
  margin-bottom:50px;
}

b, a, summary {
  color:var(--em-color);
  text-shadow:1px 1px 2px rgba(128,128,128,0.4), -1px 0 2px rgba(255,0,0,0.75), 1px 0 2px rgba(0,255,255,0.75);
}

a {
  font-weight:bold;
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:2px solid rgba(0,255,255,0.75)
}

a:hover {
  color:#ccc;
}

details {
  font-size:15px;
  line-height:1.4;
  margin-bottom:50px;
}

details div {
  background-color:#282828;
  background-image:url("https://www.transparenttextures.com/patterns/black-twill.png");
  padding:16px 8px 1px 16px;
}

details p {
  margin-bottom:20px;
}

summary {
  border-bottom:2px solid rgba(0,255,255,0.75);
  width:fit-content;
  font-weight:bold;
  margin-bottom:12px;
  font-size:18px;
}

summary:hover {
  color:#ccc;
  cursor:pointer;
}

#tag {
  margin-bottom:0;
}

#timeless {
  font-family:"Meow Script";
  text-transform:lowercase;
  color:var(--em-color);
  font-size:60px;
  font-weight:400;
  text-shadow:2px 2px 2px rgba(128,128,128,0.4), -2px 0 2px rgba(255,0,0,0.75), 2px 0 2px rgba(0,255,255,0.75);
  line-height:1.3
}

#arrow {
  width:18px;
  filter:drop-shadow(-2px 0 1px rgba(255,0,0,0.5)) drop-shadow(2px 0 1px rgba(0,255,255,0.5));
  animation:arrow 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

#footer {
  font-size:15px;
  height:100px;
}

#love {
  position:relative;
  top:4px;
  width:16px;
  margin:0 2px;
  filter:drop-shadow(-2px 0 1px rgba(255,0,0,0.5)) drop-shadow(2px 0 1px rgba(0,255,255,0.5));
}

.muted {
  color:#999;
}

::selection {
  background-color:#88888840;
}

@keyframes arrow {
  0%, 100% {
    transform:translateY(0)
  }
  50% {
    transform:translateY(6px)
  }
}