@font-face {
  font-family: "Beekeepers";
  src: url("https://plague-doctors.netlify.app/fonts/TT2020Base-Regular.woff2")
    format("woff2");
}
@font-face {
  font-family: "Beekeepers Italic";
  src: url("https://plague-doctors.netlify.app/fonts/TT2020Base-Italic.woff2")
    format("woff2");
}
@font-face {
  font-family: "Capture It";
  src: url("https://plague-doctors.netlify.app/fonts/Capture_it.woff")
    format("woff");
}
@font-face {
  font-family: "Capture It Inverted";
  src: url("https://plague-doctors.netlify.app/fonts/Capture_it_2.woff")
    format("woff");
}

:root {
  color-scheme: dark;

  --dark-gray: #221f20;
  --medium-gray: #bfbfbf;
  --white: #fff;

  --cyberpunk-bubblegum: #cf4673;
  --bland-mustard: #d9c84b;
  --minty-teal: #6ac4b0;
  --peoples-purple: #491d88;
  --relaxing-nectarine: #e07c31;
  --exciting-dark-blue: #143b86;
}

body {
  background-color: #000;
  color: #fff;
  font-family: Ubuntu, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Beekeepers;
}

.heading-italic {
  font-family: Beekeepers Italic;
}

.title-font {
  font-family: Capture It;
  letter-spacing: 1px;
  font-weight: normal;
}

.title-font-inverted {
  font-family: Capture It Inverted;
  letter-spacing: 1px;
  font-weight: normal;
}

a {
  color: #6ac4b0;
  text-decoration: none;
}

a:visited {
  color: #6ac4b0;
  text-decoration: none;
}

textarea,
select,
input {
  padding: 8px;
  margin: 4px 8px;
}

input[type="file"],
button {
  border: none;
  padding: 8px;
  border-radius: 16px;
  margin: 4px 8px;
}

/* STYLES FOR ALL THEMED PAGES */

option {
}

/* STYLES FOR PURPLE PAGE */

.purple-page button,
.purple-page select,
.purple-page option {
  background: linear-gradient(
    180deg,
    #180830 0%,
    #491d88 23.96%,
    #491d88 76.04%,
    #180830 100%
  );
  border: 2px solid #000000;
  border-radius: 16px;
  padding: 8px;
}

.purple-page option {
  background-color: #491d88;
  color: #fff;
}

/* STYLES FOR YELLOW PAGE */

.yellow-page button,
.yellow-page select {
  background: linear-gradient(
    180deg,
    #ac9c38 0%,
    #d9c84b 23.96%,
    #d9c84b 76.04%,
    #ac9c38 100%
  );
  border: 2px solid #98892c;
  color: #554a02;
  border-radius: 16px;
  padding: 8px;
}

.yellow-page option {
  background-color: #d9c84b;
  color: #554a02;
}