@font-face {
  font-family: "Noto Sans";
  src:
    local("Noto Sans"),
    url("/static/fonts/NotoSans-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Comic Shanns";
  src:
    local("Comic Shanns Regular"),
    url("/static/fonts/comic shanns.otf") format("opentype"),
    url("/static/fonts/comic shanns 2.ttf") format("truetype");
}

@font-face {
  font-family: "Comic Mono";
  src:
    local("Comic Mono"),
    url("/static/fonts/ComicMono.ttf") format("ttf"),
    url("https://dtinth.github.io/comic-mono-font/ComicMono.ttf") format("truetype")
}

:root {
  --first-colour: #16111a;
  --second-colour: #21042c;
  --third-colour: #2E236C;
  --fourth-colour: #F5EFFF;

  --border: #27272a;
}

html {
    background-color: var(--first-colour);
    font-family: "Comic Mono", "Comic Shanns", "Comic Sans", "Comic Sans MS", "Chalkboard", "ChalkboardSE-Regular", "Noto Sans", sans-serif;
    font-size: larger;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body {
    /* margin: 0 auto; */
    /* width: 100%; */
    /* max-width: 40em; */
    padding: 2em;
    /* padding: 1rem; */
    /* line-height: 1.5; */
    color: var(--fourth-colour);
}

@media screen and (max-width: 899px) {
  body {
      width: 95%;
      padding-top: 0.5em;
      padding-left: 0;
      padding-right: 0;
      flex-wrap: wrap;
  }
}


a {
  color: var(--fourth-colour);
  text-decoration: underline 2px;
  text-underline-offset: 2px;
  text-decoration-color: #00000000;
}


a:hover {
  text-decoration-color: #fff;
  transition: text-decoration-color 0.25s;
}

/* h1 { */
    /* margin: 1rem 0; */
    /* font-size: 2.5rem; */
/* } */

/* footer { */
  /* display: flex; */
  /* gap: 1rem; */
  /* margin-top: 2rem; */
  /* background-color: var(--third-colour); */
  /* border-radius: 4px; */
  /* padding: 0.5rem; */
/* } */

.badge {
    image-rendering: pixelated;
    min-width: 88px;
    min-height: 31px;
    padding: 4px;
}

.linked-buttons {
    outline-style: dashed;
    width:fit-content;
    display: inline-flex;
}

.container {
  background-color: var(--second-colour);
  border-radius: 8px;
  padding: 16px;
  display:flex;
  flex-direction: column;
  /* flex: content; */
}

.greetButton {
  color: var(--fourth-colour);
  background-color: var(--second-colour);
  border-color: var(--second-colour);
  transition-duration: 0.4s;
}

.greetButton:hover {
  color: var(--third-colour);
  background-color: var(--fourth-colour);
  border-color: var(--fourth-colour);
}