html, body, viewport {
  background-color: #333;
  margin: 0px;
  padding: 0px;
  width: 100%;
  overflow-x:hidden;
}

a, a:visited, a:hover, a:active {
  color: inherit;
}

/***** Header *****/

#header {
  text-align: center;
  vertical-align: middle;
  padding: 5vh;
}

#header>img {
  /* height: 20vh; */
  width: 100%;
  max-width: 700px;
}

/***** Stripes *****/

.stripe {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 5vh;
  height: 20vh;
  box-shadow: 0px 10px 10px black;
  /* min-width: 720px; */
}

.stripe > img {
  height: inherit;
}

.stripe > .rect-img-at-left {
  position: absolute;
  left: 0;
}

.stripe > .square-img-at-left {
  position: absolute;
  left: 5vh;
}

.stripe > .rect-img-at-right {
  position: absolute;
  right: 5vh;
}

.stripe > .text-at-right {
  position: absolute;
  right: 6vh;
}

/***** Chessed Up *****/ 

.chessedup-stripe {
  background: #294C9F;
}

.chessedup-stripe > span {
  font-family: PermanentMarker, sans-serif;
  font-size: 4em;
  color: #FFD966;
  text-shadow: 3px 3px 3px black, -1px -1px 1px #00000052;
}

/***** Super Sparty Bros vs Coronavirus *****/ 

.ssb-stripe {
  background: blue;
}

.ssb-stripe>span {
  font: 2em adventure, sans-serif;
  color: white;
  text-shadow: 3px 3px 1px black;
}

/***** Switch *****/ 

.switch-stripe {
  background: #222222;
}

.switch-stripe > span {
  font-family: courier, serif;
  font-size: 4em;
  color: lightgreen;
}

/***** Lettres *****/ 

.lettres-stripe {
  background: #222222;
}

.lettres-stripe > span {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif, serif;
  font-size: 4em;
  color: white;
}

/***** Peg Solitaire *****/ 

.pegsolitaire-stripe {
  background-image: url(/img/pegsolitaire-stripe-bg.jpg);
  background-repeat: repeat-x;
}

.pegsolitaire-stripe > span {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif, serif;
  font-weight: bold;
  font-size: 3em;
  color: #048d11;
  text-shadow: 1px 1px 1px #00000044, -1px -1px 1px #00000044, -1px 1px 1px #00000044, 1px -1px 1px #00000044
}

/***** Tribute *****/ 

.tribute-stripe {
  background: linear-gradient(to top, #6E2C00 4%, #fdbb2d 4%, #b21f1f 12%, #1a2a6c 22%);;
}

.tribute-stripe > span {
  font-family: ryeregular, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif, serif;
  font-size: 4em;
  color: goldenrod;
}


/***** Social Media *****/
#socialmedia {
  display: flex;
  justify-content: center;
  align-items: center;

}

#socialmedia img {
  width: 50px;
  margin-bottom: 3.5vh;
}

/***** Footer *****/
#footer {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1.5em;
  row-gap: 1em;
  flex-wrap: wrap;
  position: relative;
  margin: 0vh 3vh 5vh 3vh;
  /* height: 10vh; */
  font-family: Heebo, sans-serif;
  font-size: 2.75vh;
  text-align: center;
}

/***** Lab *****/

#lab {
  background-color: black;
  color: #dbe0dc;
  margin: 0 0 0 0;
  height: 100vh;
  font-family: 'Courier New', Courier, monospace, sans-serif;
  font-size: 2.75vh;
  line-height: 1.3;
}

#lab > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 10vh;
}

#lab h2 {
  color: #0eda48;
}

/***** Press Kits *****/

#presskits {
  background-color: rgb(255, 255, 255);
  color: black;
  margin: 0 0 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.25vh;
  padding: 7vh;
  /* text-align: center; */
  /* line-height: 1.3; */
}

#presskits h2 {
  color: #676e69;
}

#presskits h3 {
  background-color: #676e69;
  color: #ffffff;
  padding: 10px;
}

#presskits h4 {
  background-color: #dbe4de;
  color: #000000;
  padding: 10px;
  font-weight: normal;
}

#presskits table {
  border-spacing: 15px 4px;
  margin: 10px 0px;
}

#presskits th {
  text-align: left;
}

#presskits .download-box {
  background-color: #ffff99;
  padding: 15px;
  display: block;
}

#presskits .download-box span {
  display: block;
  /* color: #333333; */
}

.imagecontainer {
  background-image: url('/img/background-for-transparency.png');
  background-repeat: repeat;
  background-size: 5px;
  margin: 10px;
  border-color: black;
  border-width: 1px;
  /* border-style: solid; */
  padding: 5px;
  text-align: center;
}

.imagecontainer img {
  max-width: 80%;
}

/***** Misc *****/

.video-container {
  text-align: center;
  margin: 10px;;
}

.video-container video {
  max-width: 50%;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.456);
}

.video-container span {
  display: block;
  padding: 10px;
}

.whitelink, .whitelink:active, .whitelink:visited {
  color: white;
  text-decoration: none;
}

.whitelink:hover {
  text-decoration: underline;
  color: white;
}

.coloredlink, .coloredlink:active, .coloredlink:visited {
  color: rgb(0, 80, 192);
  font-weight: bold;
  text-decoration: none;
}

.coloredlink:hover {
  text-decoration: underline;
  color: rgb(0, 80, 192);
}

@font-face {
  font-family: PermanentMarker;
  src: url(/chessedup/fonts/PermanentMarker-Regular.ttf);
}

@font-face {
  font-family: 'ryeregular';
  src: url('/tribute/fonts/rye-regular-webfont.woff2') format('woff2'),
    url('/tribute/fonts/rye-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}