body{
  font:20px/1.3em ankacoder;
  padding:2vw;
  background: #333;
  color:white;
}
header{
  height:100vh;
  text-align: center;
}
header img{
  height: 60vh;
  max-height: 500px;
  margin:7vh 0;
}
header h1{
  display: none;
}
header .scrolldown{
  font-size: 1.5em;
  animation-name: float;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  cursor:pointer;
}
#grid{
  display: flex;
  flex-wrap: wrap;
}
.video{
  flex: 1 1 auto;
  background: #222;
  padding: 1vw;
  margin-top: 1vw;
  width: 46vw;
}
.video h1{
  margin-top:1vw;
  color:red;
  font-family: liberation_sans;
  font-weight: bold;
  text-transform: uppercase;
}
.video h2{
}
.video:nth-child(odd){
  margin-right: 1vw;
}
.video iframe{
  width:45vw;
  height: calc(45vw / 1.777);
}
.video .desc{
  display: none;
}
.video .desc-btn{
  cursor:pointer;
  transition: all .2s linear;
}
.video .desc-btn:hover{
  color:red;
}
.video .desc-btn::after{
  content: " ▼";
  font-size:.7em;
}
.video.showdesc .desc-btn::after{
  content: " ▲";
  font-size:.7em;
}
.video.showdesc .desc{
  display: block;
}
a{color:inherit;}
footer{
  margin:2vw;
  text-align: center;
}
@keyframes float {
    0%   {margin-top:2vh;}
    50%  {margin-top:4vh;}
    100% {margin-top:2vh;}
}

@media only screen and (max-width: 1100px) {
  header img{
    width:80%;
    height: auto;
    margin:12vh 0;
  }
  .video{
    flex:1 1 100%;
    margin-bottom: 20px;
  }
  .video:nth-child(odd){
    margin-right: 0;
  }
  .video iframe{
    width:100%;
    height: calc(92vw / 1.777);
  }
}

::selection {background:red;color:black;}
::-moz-selection {background:red;color:black;}