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

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

body {
    background: #dedd9a url('/2022/assets/background.png') center;
    background-size: cover;
    color: #2b2b2b;
    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: #363636;
}

#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: #FFEECC;
}

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

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

h3 {
    text-decoration: underline;
}

.text-frame {
    background-color: #FFFFFF88;
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 1rem;
}

[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: #2b2b2b;
  color: #d3dd9a;
  outline: none;
  font-weight: bold;
}

[role="tab"][aria-selected="true"] {
  border-top-color: #FFEECC;
  background: #d3dd9a;
  color: #2b2b2b;
}

[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 #2255ff;
  border-radius: 3px;
}

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

#spotify-playlist {
    min-height: 400px;
    min-width: 400px;
}
#youtube-playlist {
    min-height: 400px;
    min-width: 400px;
}
#chat-label {
    color: #000;
    background-color: #efefef88;
    padding: 0.25em;
    font-size: 14pt;
    border-radius: 3px;
}