@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap");

body {
  font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background-color: #222222;
  color: white;
}

a {
  color: #36a7e9
}

a:visited {
  color: #1481c9;
}

header#title-block-header {
  
  color: white;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  font-weight: bold;
  
  /* uncomment following for an inset header */
  
  /* position: absolute;
  margin-right: 160px;
  top: 0;
  left: 0;
  padding: 10px;
  z-index: 1000;  */

}

header#title-block-header h1,
header#title-block-header p {
  margin-block-start: 0;
}

header#title-block-header h1 {
  text-transform: uppercase;
  font-weight: 900;
  margin-block-end: 0.2em;
}

header#title-block-header p {
  margin-block-end: 0;
}


/* shrink header elements at lower widths */
@media (max-width: 45em) {
  
  header#title-block-header {
    margin-right: 140px;
  }
  
  header#title-block-header h1 
  {
    font-size: 130%;
  }

  header#title-block-header p 
  {
    font-size: 100%;
    font-weight: bold;
  }

  .inputForm {
    transform: scale(0.9);
    transform-origin: bottom left;
  }
}

@media (max-width: 34em) {
  
  header#title-block-header {
    margin-right: 120px;
  }
  
  header#title-block-header h1 
  {
    font-size: 120%;
  }

  header#title-block-header p 
  {
    font-size: 80%;
    font-weight: bold;
  }
}


.embedcode {
  font-size: 60%;
  padding: 1em;
  border-inline-start: 1px solid #36a7e9;
  background-color: #36a7e911;
  color: #36a7e9;
}

.embedcode div.sourceCode {
  margin: 0;
}

.embedcode pre {
  margin: 0;
}

.embedcode pre > code.sourceCode {
  font-family: "JetBrains Mono", monospace;
  white-space: pre-wrap;
}

#region-select form {
  margin: 0 auto 1em auto;
  box-shadow: 0 5px 15px -11px #ffffffbb;
}

#region-select select {
  background-color: transparent;
  border: none;
  font-weight: bold;
  /* font-size: 110%; */
  text-align: center;
}

#region-select select option {
  background-color: #222222;
  color: white;
}

.credit {
  font-size: 85%;
  color: grey;
}

@media only screen and (min-width: 30em) {
  #region-select form {
    margin-bottom: var(--length3);
    border-width: 0 0 1px 0;
  }
  
}

@media (min-width: 34em) {
  #region-select select {
    font-size: 125%;
  }

  .credit {
    font-size: 100%;
  }
}

@media (min-width: 45em) {
  #region-select select {
    font-size: 140%;
  }

  .credit {
    font-size: 120%;
  }
}