* { margin: 0; padding: 0 }
body {
background-image: radial-gradient(black, black, navy);

  color: yellow; 
  text-align:center;
  background-attachment: fixed;
}

#video{ height:100%; }
#overlay{ position:absolute; height:100%; width:100%; 
left:0px; top:0px; display:flex; justify-content:end; flex-direction: column; }

#desc{ width:600px; height:200px; max-height:400px; 
overflow-y: scroll; display:inline-block;
  border: double 2px white;
  background-image: radial-gradient(#3979dd,transparent);
}

#desc > a {color:white; }

#holder{
width:100%;
display:inline-block;
}
#player{position:relative; display:inline-block; height:100%; }
#subtitles{ color:yellow; position:relative; background-color:black; width:fit-content; align-self: center; }

.button{
border:1px white;
background-image:url("hud.png");
background-size: 576px 64px;
background-color:transparent;
aspect-ratio:1; height:64px
}

header{
text-align: left;
  width: 100%;
  border-bottom-color: #350034;
  min-height: 40px;
  border-bottom-style: solid;
  border-bottom-width: 10px;
  background-image: linear-gradient(171deg, #6800a3, #260547);
}

.link {
display: inline-block;
	width:max-content;
    text-align: center;
    align-content: center;
  padding: 6px;
  background-color: #1235;
  margin: 5px;
  border-style: groove;
  color:gold;
  border-color: #fffc #fff5 #fff9;
}


#seek{height: 12px; background-color:black; }
#bar{background-color:white; height:100%; width:0%; }

#buttons{ 
background-color:brown;
display: flex;
  width: 100%;
  align-content: center;
  justify-content: space-evenly;
}

#restart{
background-position-x:64px;
}

#rewind{
background-position-x:-192px;
}

#play{
background-position-x:-64px;
}

#forward{
background-position-x:-128px;
}

#subKey{
background-position-x:-256px;
}

#download{
background-position-x:128px;
}
#fullscreen{
background-position-x:-320px;
}