/* Theme settings for the site - colors, fonts, etc. */

@font-face {
    font-family: "Courgette";
    font-style: normal;
    font-weight: 400;
    src: url('/assets/Courgette-Regular.ttf') format("truetype");
}

body {
    background: #b5c6f1 url('/assets/background-tiling.png');
    background-size: cover;
    color: #0b0b0b;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
}

@media print {
    background: none;
}

#main-nav > ul {
    background-color: #2b3a67;
}

#main-nav > ul > li > a {
    font-family: "Courgette", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
    text-decoration: none;
    font-size: 1.5rem;
    color: #fcfdaf;
}

#main-nav > ul > li.disabled > a {
    color: #b9b8d3;
}

.key-point {
    font-style: italic;
}

h3 {
    text-decoration: underline;
}


.text-frame {
    background-color: #f5ee9eee;
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 1rem;
}
@media (prefers-reduced-transparency) {
  .text-frame {
      background-color: #f5ee9e;
  }
}

[role="tab"],
[role="tab"]:focus,
[role="tab"]:hover {
  border: 1px solid hsl(219deg 1% 72%);
  border-bottom: 2px solid hsl(219deg 1% 72%);
  border-radius: 5px 5px 0 0;
  overflow: visible;
  background: #2b3a67;
  color: #f5ee9e;
  outline: none;
  font-weight: bold;
}

[role="tab"][aria-selected="true"] {
  border-top-color: #fcfdaf;
  background: #f5ee9e;
  color: #2b3a67;
}

[role="tab"][aria-selected="false"] {
  border-bottom: 1px solid hsl(219deg 1% 72%);
}

[role="tab"]:hover span.focus,
[role="tab"]:focus span.focus,
[role="tab"]:active span.focus {
  padding: 2px 4px;
  border: 2px solid #496a81;
  border-radius: 3px;
}

[role="tabpanel"] {
  border-radius: 0 5px 5px;
  background-color: #fcfdaf;
}

#spotify-playlist {
    min-height: 400px;
    min-width: 400px;
}
#youtube-playlist {
    min-height: 400px;
    min-width: 400px;
}
#chat-label {
    color: #000;
    background-color: #fcfdafcc;
    padding: 0.25em;
    font-size: 14pt;
    border-radius: 3px;
}
@media (prefers-reduced-transparency) {
  .text-frame {
      background-color: #f5ee9e;
  }
}