:root {
--bodybackground: #534640;
--bodyfontcolor: white;
--bodyfontsize: 0.8em;
--bodylinkcolor: white;

--headerbackground: #746965;
--headerborder: 1px solid white;
--headerfontcolor: white;

--videoinfoboxcolor: white;
--videoinfoboxlinkcolor: lightgrey;
--videoinfoboxbackgroundcolor: #534640;

--seasonboxlinkcolor: white;
--seasonboxlinkfontsize: 1.4em;
--movielistboxentryfontcolor: white;
--movielistboxentrydatecolor: lightgrey;
}

body {
#display:flex;
flex-flow : column wrap;
justify-content:center;
align-items: center;
font-family:'spinnaker';
color: var(--bodyfontcolor);
background-color: var(--bodybackground);
font-size: var(--bodyfontsize);
padding:0px;
}

body a,link { 
text-decoration: none;
color: var(--bodylinkcolor);
}

* { 
box-sizing: border-box;
}


#videotypelinks {
border: var(--headerborder);
border-top:5px solid white;
border-radius: 0em 0em 2em 2em;
display:flex;
flex-direction: row;
width:60%;
align-content:center;
justify-content: center;
align-items: center;
margin:auto;
#margin-top:15px;
padding-right:10px;
padding-left:10px;
background-color: var(--videoinfoboxbackgroundcolor);
height:40px;
}

.videotypelinksitem {
flex-grow:1;
text-align:center;
font-size: calc(var(--bodyfontsize) * 1.4);
padding-top:8px;
padding-bottom:8px;
padding:0px;
#border:1px solid black;

}


.videotypelinksitem:nth-of-type(2) {
#background-color: red;
}


.videotypelinksitem:active {
background-color: red;
}

#startseite {
display:flex;
border: 1px solid white;
border-top: 0px;
border-radius: 0em 0em 2em 2em;
justify-content: center;
align-items: center;
width:90%;
padding: 10px;
margin:auto;
align-content:center;
flex-wrap:wrap;
font-weight:bold;
font-size: 1em;
}

#startseite input[type="submit"], #startseite input[type="reset"] {
   font-size: 1.3em; 
   padding: 5px 12px;
   width: 100px !important;
   color: black;
   border: 1px solid silver;
 background-image: linear-gradient(to top, gainsboro 0%, white 90%);
   border-radius: 20px;
}

#startseite input[type="text"] {
	width:100%;
	margin-bottom: 20px;
}



#videoinfobox {
display:flex;
border: 1px solid white;
border-top: 15px solid white;
border-radius: 0em 0em 2em 2em;
justify-content: center;
width:90%;
padding: 10px;
margin:auto;
#align-content:center;
align-items: center;
flex-direction: column;
flex-wrap:wrap;
font-weight:bold;
font-size: calc(var(--bodyfontsize) * 1.4);
color: var(--videoinfoboxcolor);
background-color: var(--videoinfoboxbackgroundcolor);
}

#videoinfobox div { margin:5px;}

#videoinfobox #date {
font-size: calc(var(--bodyfontsize) * 0.8);
}
#videoinfobox .year {
font-size: calc(var(--bodyfontsize) * 0.9);
}
#videoinfobox a,link { 
color: var(--videoinfoboxlinkcolor); 
font-size: calc(var(--bodyfontsize) * 0.9);
}
#videoinfobox .videoname a,link {
font-size: calc(var(--bodyfontsize) * 1.4);
color: var(--videoinfoboxcolor);
}
.pagenav a:link, .pagenav a:visited {
font-size: calc(var(--bodyfontsize) * 0.8) !important;
_border:2px solid black !important;
color: red !important;
}

#seasonbox {
#background-color:blue;
font-family:'sinkin';
display:flex;
border: 0px solid white;
margin-top:15px;
border-radius: 1em 1em 0em 0em;
justify-content: center;
width:90%;
margin:auto;
#align-content:center;
align-items: center;
flex-direction: column;
flex-wrap:nowrap;
font-weight:bold;
font-size: calc(var(--bodyfontsize) * 1.0);
color:grey;
line-height: 1.6em;
padding-top:15px;
color:black;
}
#seasonbox .date {
font-size: 0.9em;
margin: 0px;
}

#seasonbox a,link { 
color: var(--seasonboxlinkcolor); 
font-size: var(--seasonboxlinkfontsize);
}

#seasonboxheader {
display:flex;
#flex-columns: 50% 50%;
border: 1px solid white;
background-color:white;
#border-bottom: 15px solid white;
border-radius: 1em 1em 1em 1em;
justify-content: space-between;
width:100%;
#height:25px;
padding-top: 5px;
margin:auto;
#margin-bottom: 10px;
align-content:center;
align-items: center;
flex-direction: column;
flex-wrap:nowrap;
#font-weight:bold;
font-size: calc(var(--bodyfontsize) * 1.8);
line-height: calc(var(--bodyfontsize) * 1.9);
color:black;
}

#seasonboxheader a,link  { 
font-size:25px;
}

#seasonboxsubheader {
display:flex;
width:60% ;
margin:auto;
margin-bottom: 10px ;
border-radius: 0em 0em 1em 1em ;
background-color:#E8E9E9;
flex-direction: row;
flex-wrap:nowrap;
align-content:center;
align-items: center;
justify-content: center;
font-size: calc(var(--bodyfontsize) * 1.0);
padding-top:2px ;
color:black;
#height: calc(var(--bodyfontsize) * 2.2px);

}
#seasonboxsubheader a,link { 
color:darkgrey; 
font-size: calc(var(--bodyfontsize) * 1.8); 

}
 
#seasonboxepisodes {
display:flex;
width:100%;
margin:auto;
flex-direction: column;
flex-wrap:nowrap;
align-content:left;
align-items: left;
justify-content: flex-start;
#background-color:blue;
color:lightgrey;
line-height: calc(var(--bodyfontsize) * 2.4);
letter-spacing: 0.2em;
}

#settingsbox {
display:flex;

border: 1px solid white;
border-top: 0px;
border-radius: 0em 0em 2em 2em;
justify-content: center;
width:90%;
padding: 10px;
margin:auto;
#align-content:center;
align-items: center;
flex-direction: column;
flex-wrap:wrap;
font-weight:bold;
font-size: 1.2em;
}




header {
border: var(--headerborder);
border-radius: 2em;
background-color: var(--headerbackground);
padding:10px;
font-size: calc(var(--bodyfontsize) * 1.7);
color: var(--headerfontcolor);
width:100%;
display:flex;
justify-content:center;
font-weight:bold;
}


#movielink a,link{ color:lightgrey;}
#serienlink a,link{ color: lightgrey;}

aside a,link { 
font-size:10px;
color: grey;
}

#movielistbox {
padding-top:15px;
}
#movielistboxentry {
color: var(--movielistboxentryfontcolor);
font-size: calc(var(--bodyfontsize) * 1.5);
padding-bottom:15px;
}
#movielistboxentry .date,.episodecount {
font-size: calc(var(--bodyfontsize) * 1.0);
color: var(--movielistboxentrydatecolor);
#color:black;
}


#editbox {
display:flex;

border: 1px solid white;
border-top: 0px;
border-radius: 0em 0em 2em 2em;
justify-content: center;
width:90%;
padding: 10px;
margin:auto;
#align-content:center;
align-items: left;
flex-direction: column;
flex-wrap:wrap;
font-weight:bold;
font-size: 1.2em;
}


#editbox input,label {
padding-bottom: 10px;
display:block;
}
#editbox input {
width:100%;
}
#editbox button {
align-items: center;
}