body{
  background-image: url("../assets/bg/twinklies.gif");
  image-rendering: pixelated;
}

header, #description, .video{
  background-color: grey;
  border: 5px outset darkgrey;
  margin: 10px;
  padding: 10px;
  font-family: vcr; 
  font-size: 1.5em;
  text-align: center;
}

#description{
  font-size: 1em;
}

#container{
  position: fixed;
  width: 100vw;
  height: 100vh;
}

#main{
  position: absolute;
  width: 1280px;
  height: 900px;
  top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#screenbg, #screenborder{
  position: absolute;
  top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#screenbg{
  width: 950px;
  height: 700px;
  top: calc(50% - 5px); /* wrm heb ik deze bg zo klein gemaakt ffs */
  border: 1px solid lime;
}

#screencontent{
  position: absolute;
  width: 900px;
  height: 700px;
  z-index: 3;
  top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 1px red solid;
}

#backbutton{
  position: absolute;
  top: 1vw;
  left: 1vw;
}

#backbutton img{
  width: 5vw;
  height: 5vw;
}

#screenbg, #screenborder{
  position: absolute;
}

#videocontainer{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px red solid;
  width: 100%;
  height: 450px;
  overflow-y: scroll;
}

.video{
  height: 250px;
}

iframe{
  width: 100%;
  height: 100%;
}