:root {
  --jumbotron-padding-y: 3rem;
  font-family: 'Mona Sans', sans;
  font-size: 14pt;
  font-weight: 500;
  background-color: black;
  color: white;
}

body{
  min-height: 100vh;
  margin: 0;
}

a {
  text-decoration: none;
}
footer > *:hover {
  text-decoration: underline;
}

.h-flex{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
  /*align-items: center;*/
}

.v-flex{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: 1rem;
  margin-bottom: 3rem;
}

.title-flex{
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 1.5rem;
}


.title-flex > img{
  flex-grow: 2;
  padding: 1.5rem;
  height:256px;
  max-height: 30vw;
  max-width: 90vw;
  transform: translateY(min(max(0px,calc((600px - 100vw) * 0.2)), 20px));
}

.title-left{
  font-size: x-large;
  display: flex;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  align-content: flex-start;
  min-width: 300px;
}
.title-left > p{
  font-family: 'VCR OCD Faux', monospace;
  margin-left: 1rem;
  margin-top: -0.2rem;
  padding-left: 1.5rem;
  max-height: 1em;
}
.title-right{
  font-family: 'VCR OCD Faux', monospace;
  font-size: x-large;
  text-align: right;
  padding: 1.5rem;
  margin-top: -0.2rem;
  min-width: 250px;
}

.ticker-title {
  display: flex;
  flex-direction: row;
  color: black;
  margin-bottom: 2rem;
}

@media (prefers-reduced-motion: no-preference) {
  header > div > img{
    animation: switchon 0.3s ease-out;
  }

  .ticker-title {
    animation: title 20s infinite linear;
  }

}

@keyframes switchon {
  0% {
    filter: brightness(0.0) blur(50px);
  }
  10%{
    transform: scale(0.9, 0.2);
  }
  100% {
    transform: scale(1,1);
    filter: brightness(1.0) blur(0px);
  }
}
@keyframes title {
  0% {transform: translateX(0);}
  100% {transform: translateX(-1000px);}
}

.ticker-title > * {
  font-family: 'VCR OCD Faux', monospace;
  font-size: x-large;
  background-color: var(--blue);
  text-align: center;
  padding: 0;
  min-width: 500px;
  padding-top: .2rem;
  padding-bottom: .2rem;
}

.sr-silent{
  speak: none;
}

.blue{
  background-color: var(--cyan);
}
.blue > .tile-title{
  color: black;
}
.blue:hover, .blue:active, .blue:focus{
  background-color: white;
}
.blue:hover>h3, .blue:active>h3, .blue:focus>h3{
  background-color: var(--darkblue);
  color: white;
}
.green{
  background-color: var(--green);
}
.green > .tile-title{
  color: black;
}
.green:hover, .green:active, .green:focus{
  background-color: white;
}
.green:hover>h3, .green:active>h3, .green:focus>h3{
  background-color: var(--darkcyan);
  color: white;
}
.magenta{
  background-color: var(--magenta);
}
.magenta > .tile-title{
  color: black;
}
.magenta:hover, .magenta:active, .magenta:focus{
  background-color: white;
}
.magenta:hover>h3, .magenta:active>h3, .magenta:focus>h3{
  background-color: var(--darkmagenta);
  color: white;
}
.yellow{
  background-color: var(--yellow);
}
.yellow > .tile-title{
  color: black;
}
.yellow:hover, .yellow:active, .yellow:focus{
  background-color: white;
}
.yellow:hover>h3, .yellow:active>h3, .yellow:focus>h3{
  background-color: var(--darkmagenta);
  color: white;
}

.landing-tile{
  display: flex;
  flex-direction: column;
  width: 300px;
  max-width: 41vw;
  margin: 0.5rem;
}

@media (max-width:350px) {
  .landing-tile {
    min-width: 95vw;
  }
}

.landing-tile > *{
  margin: 0;
}

.landing-tile > img{
  max-width: inherit;
}

.tile-title{
  padding-left: 8px;
  color: white;
  font-size: x-large;
}

.tile-text{
  padding: 8px;
  background-color: black;
  flex-grow: 8;
  border-bottom: solid;
}

a > .landing-tile > .tile-text {
  color: var(--white);
}

div:hover>.tile-text{
  background-color: white;
  color: black;
}

@media (max-width:600px) {
  
  .tile-title , .ticker-title > * {
    font-size: large;
  }
  .tile-text {
    font-size: 11pt;
  }
}

footer {
  font-family: 'VCR OCD Faux', monospace;
  font-size: x-large;
  border-top: 10px solid;
  border-color: var(--blue);
  margin-top: 3rem;
  padding-left: 3rem;
  padding-top: 1rem;
  color: white;
}

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

h2 {
    padding-left: 2em;
    padding-right: 2em;
}