*{
box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
padding: 0;
margin: 0;
outline: none;
border: 0;
}

html,body{
height: 100%;
width: 100%;
font-size: 17px;
font-family: sans-serif;
}

header{
position: fixed;
width: 100%;
bottom: 0;
left: 0;
height: 3em;
z-index: 1000;
}

#logo{
height: 1.5em;
position: fixed;
bottom: 0.5em;
left: 1em;
}

#home{
padding: 0em;
float: right;
font-size: 3em;
line-height: 100%;
width: 1em;
position: fixed;
text-align: center;
bottom: 0;
right: 0;
text-decoration: none;
font-weight: bold;
}

#menu{
margin-right: 4em;
margin-bottom: 0.4em;
padding: 0em;
float: right;
font-size: 1.5em;
line-height: 100%;
width: 1em;
position: fixed;
text-align: center;
bottom: 0;
right: 0;
text-decoration: none;
font-weight: bold;
}


main{
position: fixed;
height: calc(100% - 3em);
left: 0;
top: 0;
width: 50%;
display: flex;
flex-flow: column;
}

main h1{
flex-shrink: 1;
font-size: 1em;
padding: 1em 1em .5em;
}

main ul{
list-style-type: none;
padding: 0.5em;
}
main ul li ul{
width: 100%;
}
main li{
padding: 0.5em;
}

main ol li{
margin-left: 2em;
}

article{
position: fixed;
right: 0;
top: 0;
height: calc(100% - 3em);
width: 50%;
display: flex;
flex-flow: row;
flex-wrap: wrap;
transition: all 1s ease;
align-items: stretch;
justify-content: center;
padding-top: .5em;
overflow-y: auto;
}

article a{
flex: 2 calc(80% / 2);
max-width: calc(80% / 2);
padding: 0.5em;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
transition: all 1s ease;
border: 0.25em solid #808080;
margin: 0 .5em .5em;
}

article video{
flex: 1;
height: 100%;
width:100%;
}

nav{
position: fixed;
bottom: 3em;
right: -100%;
overflow: auto;
height: calc(100% - 3em);
width: calc(100% / 3);
z-index: 0;

display: flex;
flex-flow: row;
flex-wrap: wrap;
align-items: stretch;
justify-content: flex-start;
transition: all 1s ease;
}
nav a{
flex: 1 calc(100% / 2);
max-width: calc(100% / 2 - .4em);
padding: 0.5em;
text-align: center;
font-size: 1.5vw;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
#home:hover ~ nav, nav:hover,#menu:hover ~ nav{
right: 0;
}