html {
  box-sizing: border-box;
  font-size: 18px;
  height: 100%;
  background: #000;
  color: #E6D9FF; }

*, *::before, *::after {
  box-sizing: inherit; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0; }

h1, h2, h3, h4, h5, h6 {
  color: #9affdd; }

.container {
  padding: 0 1rem; }

a:any-link {
  color: inherit;
  text-decoration: underline; }

h1 a:any-link, h2 a:any-link, h3 a:any-link, h4 a:any-link, h5 a:any-link, h6 a:any-link {
  text-decoration: none; }

a:hover {
  color: #9173E5; }

th {
  border-color: rgba(12, 147, 127, 0.5) !important; }

td, hr {
  border-color: rgba(12, 147, 127, 0.25) !important; }

a.header-link {
  display: inline-block;
  font-size: 1rem;
  color: #9affdd;
  opacity: 0.25; }
  a.header-link span {
    display: none; }
  a.header-link::after {
    display: inline-block;
    content: '';
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: url("../img/ionicons/link-outline.svg");
    mask-image: url("../img/ionicons/link-outline.svg"); }
  a.header-link:hover, a.header-link:focus {
    opacity: 1;
    outline: 0; }

a.footnote-backref {
  display: inline-block;
  color: #9affdd;
  opacity: 0.25;
  /* hide the unstyled back-arrow */
  width: 1em;
  height: 1em;
  overflow: hidden; }
  a.footnote-backref::before {
    display: inline-block;
    content: '';
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: url("../img/ionicons/return-up-back-outline.svg");
    mask-image: url("../img/ionicons/return-up-back-outline.svg"); }
  a.footnote-backref:hover, a.footnote-backref:focus {
    opacity: 0.5;
    outline: 0; }

main.container {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem; }

@media (min-width: 60rem) {
  .container {
    width: 60rem;
    max-width: 100%;
    margin: auto; } }

@media (min-width: 40rem) {
  #home {
    display: grid;
    gap: 1rem;
    grid-template-columns: 2fr 1fr; }
    #home aside {
      border-left: 1px solid rgba(12, 147, 127, 0.25);
      padding-left: 1rem; }
      #home aside #sponsor,
      #home aside #stream {
        border-top: 1px solid rgba(12, 147, 127, 0.25);
        padding-top: 1rem; }
        #home aside #sponsor img,
        #home aside #stream img {
          margin-top: 0.5rem;
          display: block; }
      #home aside #sponsor {
        margin-bottom: 1rem; } }

#navbar {
  background: #0D061C; }

#navbar .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  #navbar .container h1 {
    margin: 0;
    min-width: 2.5rem;
    height: 2.5rem;
    background: url("../img/logomark.svg");
    background-size: contain;
    margin: 0.25rem 0; }
    #navbar .container h1 span {
      display: none; }
  #navbar .container summary {
    user-select: none;
    font-size: 2rem;
    cursor: pointer;
    color: #9affdd; }
    #navbar .container summary .menu-toggle {
      display: flex; }
    #navbar .container summary:hover .menu-toggle::after {
      color: #0C937F; }
    #navbar .container summary .menu-toggle::after {
      display: inline-block;
      content: '';
      width: 1em;
      height: 1em;
      background-color: currentColor;
      -webkit-mask-image: url("../img/ionicons/menu-outline.svg");
      mask-image: url("../img/ionicons/menu-outline.svg"); }
    #navbar .container summary .menu-toggle span {
      display: none; }
    #navbar .container summary::marker, #navbar .container summary::-webkit-details-marker {
      display: none;
      content: ''; }
  #navbar .container details[open] .menu-toggle::after {
    -webkit-mask-image: url("../img/ionicons/close-outline.svg");
    mask-image: url("../img/ionicons/close-outline.svg"); }
  #navbar .container details nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding-top: 1rem;
    background: #0D061C;
    z-index: 1; }
    #navbar .container details nav ul {
      text-align: right; }
  #navbar .container nav {
    font-size: 1.25rem; }
    #navbar .container nav ul {
      list-style: none;
      padding: 0 1rem; }
      #navbar .container nav ul a {
        text-decoration: none; }
  #navbar .container #inline-nav {
    display: none; }
    #navbar .container #inline-nav ul {
      display: flex;
      align-items: center;
      margin: 0;
      padding: 0;
      gap: 2rem; }
      #navbar .container #inline-nav ul li {
        display: inline; }

@media (min-width: 40rem) {
  #navbar details {
    display: none; }
  #navbar #inline-nav {
    display: initial !important; } }

#hero {
  height: 40vw;
  min-height: 15rem;
  max-height: min(40rem, 60vh);
  background: linear-gradient(transparent 50%, #0D061C), url("../img/hero-bg.jpg") center center/cover fixed; }
  #hero h1 {
    width: 100%;
    height: 100%;
    margin: 0; }
    #hero h1 span {
      display: none; }
    #hero h1:after {
      content: '';
      display: block;
      width: calc(100% - 2rem);
      max-width: 58rem;
      margin: 0 auto;
      height: 100%;
      background: no-repeat url("../img/logo.svg") center center/contain; }

.alert {
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid transparent;
  margin-bottom: 1rem; }
  .alert .icon {
    padding: 0.125em;
    font-size: 1.5rem; }
    .alert .icon::after {
      display: inline-block;
      content: '';
      width: 1em;
      height: 1em;
      background-color: currentColor; }
  .alert .content {
    padding: 1em; }
    .alert .content :last-child {
      margin-bottom: 0; }
  .alert.warning {
    background: #140412;
    color: #FF33A3; }
    .alert.warning .icon {
      background: #FF33A3; }
    .alert.warning .icon::after {
      -webkit-mask-image: url("../img/ionicons/warning-outline.svg");
      mask-image: url("../img/ionicons/warning-outline.svg");
      color: #140412;
      margin: 0.25rem; }
    .alert.warning h1, .alert.warning h2, .alert.warning h3, .alert.warning h4, .alert.warning h5, .alert.warning h6,
    .alert.warning a.header-link {
      color: inherit; }

@media (min-width: 40rem) {
  .alert {
    display: flex; }
    .alert .icon {
      padding: 0.25em;
      font-size: 2rem; } }

.button {
  display: block;
  text-align: center;
  padding: 0.5rem 2rem;
  background: rgba(12, 147, 127, 0.2);
  border: 2px solid #9affdd;
  color: #9affdd !important;
  border-radius: 3px;
  font-size: 1.75rem;
  text-decoration: none !important; }

.button:not(.disabled) {
  cursor: pointer; }

.button.disabled {
  user-select: none; }

.button:not(.disabled):hover {
  background: #9affdd;
  color: #000 !important; }

.button.warning {
  background: #140412;
  border-color: #FF33A3;
  color: #FF33A3 !important; }

.news-item {
  display: flex; }
  .news-item img {
    width: 4rem;
    height: 4rem;
    margin-top: 0.25rem;
    margin-right: 1rem; }
  .news-item article time {
    color: #9173E5; }

.avatar {
  background: url("../img/ionicons/person.svg") center no-repeat, #3d147f;
  background-size: 75%, auto; }

.ical-link {
  margin-left: 0.5rem; }
  .ical-link span {
    display: none; }
  .ical-link::after {
    display: inline-block;
    content: '';
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: url("../img/ionicons/calendar-outline.svg");
    mask-image: url("../img/ionicons/calendar-outline.svg");
    color: #9affdd; }
  .ical-link:hover, .ical-link:focus {
    opacity: 0.5;
    outline: 0; }

footer {
  padding: 1rem 0;
  background: #0D061C;
  color: #0C937F;
  flex: 1; }
  @media (min-width: 60rem) {
    footer .container {
      display: grid;
      gap: 1rem;
      grid-auto-columns: 1fr;
      grid-auto-flow: column; } }
  footer ul {
    list-style: none;
    padding: 0; }
  footer ul#social {
    margin-top: 1rem;
    text-align: center;
    font-size: 2rem; }
    footer ul#social li {
      display: inline; }
    footer ul#social li a span {
      display: none; }
    footer ul#social li a {
      display: inline-block;
      width: 2rem;
      height: 2rem;
      margin: 0 1.25rem;
      color: #0C937F !important; }
    footer ul#social li a:hover,
    footer ul#social li a:focus {
      color: #9affdd !important;
      outline: 0; }
    footer ul#social li a::after {
      display: inline-block;
      content: '';
      width: 1em;
      height: 1em;
      background-color: currentColor; }
    footer ul#social li a[href*="demoparty.net"]::after {
      -webkit-mask-image: url("../img/demoparty-net.svg");
      mask-image: url("../img/demoparty-net.svg"); }
    footer ul#social li a[href*="discord"]::after {
      -webkit-mask-image: url("../img/ionicons/logo-discord.svg");
      mask-image: url("../img/ionicons/logo-discord.svg"); }
    footer ul#social li a[href*="icosahedron.website"]::after {
      -webkit-mask-image: url("../img/ionicons/logo-mastodon.svg");
      mask-image: url("../img/ionicons/logo-mastodon.svg"); }
    footer ul#social li a[href*="twitter"]::after {
      -webkit-mask-image: url("../img/ionicons/logo-twitter.svg");
      mask-image: url("../img/ionicons/logo-twitter.svg"); }
    footer ul#social li a[href*="youtube"]::after {
      -webkit-mask-image: url("../img/ionicons/logo-youtube.svg");
      mask-image: url("../img/ionicons/logo-youtube.svg"); }
    footer ul#social li a[href*="facebook"]::after {
      -webkit-mask-image: url("../img/ionicons/logo-facebook.svg");
      mask-image: url("../img/ionicons/logo-facebook.svg"); }
    footer ul#social li a[href*="instagram"]::after {
      -webkit-mask-image: url("../img/ionicons/logo-instagram.svg");
      mask-image: url("../img/ionicons/logo-instagram.svg"); }
  footer #copyright {
    text-align: center;
    color: #701DF2; }
  footer a {
    color: inherit !important; }
  footer a:hover {
    color: #9affdd !important; }

.category-general,
.category-event,
.category-deadline,
.category-compos {
  color: #000; }

.category-general {
  background: #E6D9FF; }

.category-event {
  background: #9affdd; }

.category-deadline {
  background: #ff2d85; }

.category-compos {
  background: #fff500; }
