body { position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; font-family: "Lato", sans-serif; display: flex; flex-direction: column; align-items: center; background-color: black; } #main { width: 100%; height: 100%; align-self: center; max-height: calc(100vh - 70px); } #container { height: calc(100vh - 70px); width: 100vw; } #player { width: 100%; height: 100%; display: block; } #nav { width: 100%; background: #37528c; border: 0; border-color: darkgray; border-bottom: 2px #37528c; border-style: solid; box-shadow: 0 5px 5px #37528c; display: flex; flex-direction: row; justify-content: space-around; align-items: center; align-self: flex-start; color: white; min-height: 45px; margin-bottom: 15px; } #title { transition-duration: 0.5s; } #title:hover { opacity: 0.5; cursor: pointer; } #title img { display: inline-block; height: 32px; margin-top: 5px; } #file-picker { margin-top: 7px; } #file-picker select, #file-picker input { margin: 0 5px; } #local-file-container { display: inline-block; vertical-align: middle; } #sample-swfs-container { display: none; vertical-align: middle; } #author-container { display: none; font-size: 13px; text-align: left; } #author { padding-left: 5px; color: #ffad33; } @media only screen and (max-width: 800px) { #local-file-container, #sample-swfs-container { display: block; } #nav { min-height: 65px; } #player { height: calc(100vh - 90px) !important; } } @media only screen and (max-width: 600px) { #local-file-container { display: none; } #sample-swfs-label { display: none; } #author-container { font-size: 12px; text-align: center; } #nav { min-height: 85px; flex-direction: column; padding-bottom: 2px; } }