@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;

  padding: 24px;
  padding-top: 12px;
  background-color: rgb(39, 39, 39);

  /* font */
  font-family: "Archivo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
  color: rgb(243, 243, 243);
}

main {
  max-width: 70ch;
  margin: 0 auto;
  text-align: start;
}

h1 .accent {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 3px;
  text-decoration-color: rgb(140, 127, 246);
  text-decoration-style: wavy;
}

li {
  padding: 3px;
}

/* links */
a:link {
  color: rgb(161, 203, 255);
}
a:visited {
  color: rgb(191, 155, 254);
}

/* classes */
.accent {
  /* gradient generated by https://cssgradient.io */
  background: #579CFC;
  background: -webkit-linear-gradient(130deg,rgba(87, 156, 252, 1) 0%, rgba(215, 117, 251, 1) 90%);
  background: -moz-linear-gradient(130deg,rgba(87, 156, 252, 1) 0%, rgba(215, 117, 251, 1) 90%);
  background: linear-gradient(130deg,rgba(87, 156, 252, 1) 0%, rgba(215, 117, 251, 1) 90%);
  filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr="#579CFC",
    endColorstr="#D775FB",
    GradientType=0
  );
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
.extra-info {
  font-size: small;
  color: rgb(151, 151, 151);
}

.lil-button { /* vs code didnt let me use numbers for 88x31 :/ */
    image-rendering: pixelated;
    image-rendering: -webkit-optimize-contrast;
}

/* footer */
footer {
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: start;
  font-size: small;
  margin-top: auto;
}

.not-by-ai {
  height: 42px;
}

pagering-link { 
  display: inline-block;
  vertical-align: top;
}