index.css

/*see https://css-tricks.com/perfect-full-page-background-image/*/
/*html {*/
/*    background: url("DJI_0380.MP4") no-repeat center center fixed;*/
/*    background-color: #272727;*/
/*    -webkit-background-size: cover;*/
/*    -moz-background-size: cover;*/
/*    -o-background-size: cover;*/
/*    background-size: cover;*/
/*}*/

@font-face {
    font-family: 'sf_pro_displaythin';
    src: url("fonts/sf-pro-display-thin-webfont.woff2") format("woff2"), url("fonts/sf-pro-display-thin-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

html {
    background-color: #272727;
}

/*see https://css-tricks.com/full-page-background-video-styles/*/
video {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
}

#content {
    position: relative;
    height: 98vh;
    text-align: center;
    display: grid;
    align-items: center;
    font-family: sf_pro_displaythin;
    font-size: 2em;
    color: white;
    text-shadow: 0.01em 0.01em 1px #272727;
}

#update-videos {
    margin-top: -10vh;
    margin-left: 90vw;
    border: none;
    background-color: transparent;
}

#update-videos:hover {
    cursor: pointer;
}

#hello {
    margin-top: 0;
}

#time {
    margin-top: -30vh;
}

#searchbar {
    margin-top: -20vh;
}

input {
    outline: 0;
    border-width: 0 0 2px;
    border-color: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 0.75em;
    background-color: transparent;
}

input:focus {
    border-color: white;
}

#shortcuts {
    margin-bottom: -10vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}