*{
  box-sizing: border-box;
  position:relative;
}

body, html {
    height: 100%;
}

body{
  margin: 0;
  background: #000000;
  color: #ffffff;
  font-size: 16px;
  font-family: 'Source Code Pro', monospace;
  font-weight:300;
}

h1{font-size:20px;font-weight:700;margin:.5rem 0;}
h2{font-size:16px;font-weight:700;margin:.5rem 0;}
p{margin:.5rem 0;}
a {font-weight:300;color:#f0131b;text-decoration: none;}
strong{font-weight:700;}
.center{text-align:center;}
img{display:block;max-width:100%;}

.white-links a{color:#ffffff;font-weight:700;}
a.button{
  display:inline-block;
  padding:.5rem .75rem;
  background:#ffffff;
  color:#000000;
  font-weight:700;
  margin-bottom:1rem;
}

.link{
  display:block;
  color:#000000;
  background:#ffffff;
  margin-bottom:.5rem;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  text-transform: uppercase;
  border:2px solid black;
}
.link.featured{
  color:#ffffff;
  background:#f0131b;
}
.link span{
  display:block;
  width:auto;
  padding:0 1rem;
  line-height:50px;
}
.link:hover span{
  background:#000000;
  color:#ffffff;
}
.link img{
  height:50px;
  width:auto;
  padding:.5rem 1rem;
}

.social{
  display:flex;
  justify-content: center;
}
.social a{
  display:block;
  width:30px;
  padding:.4rem;
  cursor:pointer;
}

#main{
  width:100%;
  max-width:500px;
  margin:0px auto;
  padding:0 2rem;
  left:0;
  right:0;
}

header{
  text-align:center;
  width:100%;
  max-width:500px;
  margin:0px auto;
  padding:2rem 2rem 0;
  left:0;
  right:0;
}
footer{
  font-size:14px;
  text-align:center;
  width:100%;
  margin:0px auto;
  padding:2rem;
  left:0;
  right:0;
}

.video-container {
    position: relative;
    padding-bottom: 45.977%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}