@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap");

html {
  --banana-cream: #fff05aff;
  --brick-ember: #d10505ff;
  --deep-twilight: #110f75ff;
  --green: #0d7400ff;
  --carbon-black: #191919ff;
  font-family: "Crimson Pro";
}

body {
  background-color: black;
}

a {
  color: white;
}

h1 {
  font-size: 50px;
}

header {
  border: 3px dashed var(--banana-cream);
  padding: 10px;
  margin: 10px;
  color: var(--banana-cream);
  width: 70%;
}

footer {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  color: white;
}

footer a {
  color: var(--banana-cream) !important;
  text-decoration: none;
}

#wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 95vh;
  max-height: 95vh;
}

#main {
  background-color: black;
  color: white;
  padding: 20px;
  border: 10px ridge var(--deep-twilight);
  width: 750px;
  height: 400px;
  overflow-y: scroll;
  position: relative;
  padding-bottom: 100px;
}

#columns {
  display: flex;
}

#body {
  margin-top: 20px;
}

#stats {
  padding: 20px;
  width: 200px;
  min-width: 200px;
}
#stats h2 {
  font-size: 16px;
  text-transform: capitalize;
  background-color: var(--banana-cream);
  color: var(--carbon-black);
  padding: 5px;
}

#stats .stat {
  padding: 5px;
}

.zig-zag-line {
  --a: 90deg; /* control the angle */
  --s: 30px; /* size of the zig-zag */
  --b: 7px; /* control the thickness */

  background: #bf4d28;
  height: calc(var(--b) + var(--s) / (2 * tan(var(--a) / 2)));
  width: 100%;
  --_g: var(--s) repeat-x
    conic-gradient(
      from calc(var(--a) / -2) at bottom,
      #0000,
      #000 1deg calc(var(--a) - 1deg),
      #0000 var(--a)
    );
  mask: 50% calc(-1 * var(--b)) / var(--_g) exclude, 50% / var(--_g);
}

@media only screen and (max-width: 700px) {
  #content {
    flex-direction: column;
  }

  #main {
    width: 100%;
  }

  #frame-pic,
  #spotify {
    display: none;
  }
}

#userboxes {
  padding: 3px;
  text-align: center;
}

#userboxes img {
  width: 225px;
}

#stamps {
  text-align: center;
}

#stamps img {
  width: 100px;
}