@font-face {
  font-family: 'museoblack'; /* A name you choose */
  src: url('/css/museoblack.otf') format('opentype'); /* Path relative to the CSS file */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Controls how the font loads to prevent invisible text */
}

@import url("https://use.typekit.net/fnl7ooy.css");

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.logo {
height: 100px;
width: 300px;

}

* {
font-family: museo-sans, sans-serif;
font-weight: 300;
font-style: normal;
}

.introtext{
  font-size: 20px;
}

.helpertext {
  font-size: 15px;
  color: grey;
}

.helpertextp {
  font-size: 15px;
  color: #005c34;
}

h1 {
font-family: museo-sans-display
font-weight: 800;
font-style: normal;

}


.toggle {
  display: inline-flex;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
}

.toggle button {
  padding: 10px 20px;
  border: none;
  background: #eee;
  cursor: pointer;
}

#series {
  font-size: 20px;
}

#ppv {
  font-size: 20px;
}

.toggle button.active {
  background: #005c34;
  color: #fff;
}

.section {
  display: none;
  margin-top: 20px;
}

.section.active {
  display: block;
}

/* Make the BoxCast widget box responsive */
/*#boxcast-widget-spire-academy-vs-orangeville-jpiif3n5nxdtwcqlodmy {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}*/

/* Force whatever BoxCast injects (usually an iframe) to fill it */
/*#boxcast-widget-spire-academy-vs-orangeville-jpiif3n5nxdtwcqlodmy iframe,
#boxcast-widget-spire-academy-vs-orangeville-jpiif3n5nxdtwcqlodmy > div,
#boxcast-widget-spire-academy-vs-orangeville-jpiif3n5nxdtwcqlodmy video {
  position: absolute !important;
  inset: 0 !important;
  width: 20% !important;
  height: 20% !important;
  border: 0 !important;
}*/

/**.ppv-select {
  position: relative;
  inset: 0 !important;
  width: 20% !important;
  height: 20% !important;
  border: 0 !important;
}*/

p {
  width: 75%;
  height: auto;
  margin: 0 auto;
}

.series-css {
  width: 75%;
  height: auto;
  margin: 0 auto;
}

.ppv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
  gap: 20px;
  justify-content: center;
}

.ppv-item {
  width: 100%;
}

.embed,
.ppv-grid,
.ppv-item {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 900px) {
  .ppv-grid {
    grid-template-columns: 1fr;
  }
}