body {
    font-family: 'Inconsolata', monospace;
    padding: 0;
    margin: 0;
    font-weight: 200;
    background: black;
    color: white;
    overflow: hidden;
}
a {
    color: white;
}
p {
    margin-top: 0;
}
#nav {
    background: black;
    position: fixed;
    width: 100%;
    top: 0;
    text-align: center;
    font-size: 36px;
    padding: 10px 0;
    text-decoration: none;
    z-index: 99999;
}

#nav svg {
    transform: scale(1);
}
#nav b {
    font-weight: 300;
    display: inline-block;
    text-align:center;
    width: 40px;
    text-decoration: none;
}
#nav span, #nav a {
    text-decoration: none;
    display: inline-block;
    text-align: center;
    padding: 0 8px;
}
#scroll {
    width: 100%;
    margin-top: 70px;
    margin-bottom: 0;
    /*height: calc(100vh - 70px);*/
    /*height: 800px;*/
    overflow: auto;
}
#content {
    margin-right: 15%;
    margin-left: 15%;
    /*padding-bottom: 20px;*/
    text-align: center;
    font-size: 20px;
    height: 100%;

    -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 0.5s; /* Firefox < 16 */
    -ms-animation: fadein 0.5s; /* Internet Explorer */
    -o-animation: fadein 0.5s; /* Opera < 12.1 */
    animation: fadein 0.5s;
}
#content.close {

    -webkit-animation: fadeout 0.5s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadeout 0.5s; /* Firefox < 16 */
    -ms-animation: fadeout 0.5s; /* Internet Explorer */
    -o-animation: fadeout 0.5s; /* Opera < 12.1 */
    animation: fadeout 0.5s;
    opacity: 0;

}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}



@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Firefox < 16 */
@-moz-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Internet Explorer */
@-ms-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Opera < 12.1 */
@-o-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}
.video {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}

.audio iframe {
    width: 100% !important;
}

.video iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
#content img {
    max-width: 100%;
    max-height: 80vh;
}

@media screen and (max-width: 1024px) {
    #nav {
        /*font-size: 16px;*/
    }
    #content {
        margin-right: 30px;
        margin-left: 30px;
        font-size: 18px;
    }
}
@media screen and (max-width: 768px) {
    #nav {
        /*font-size: 16px;*/
    }
    #content {
        text-align: center;
        margin-right: 20px;
        margin-left: 20px;
        font-size: 18px;
    }
}
@media screen and (max-width: 300px) {
    #nav {
        font-size: 32px;
    }
    #content {
        text-align: center;
        margin-right: 10px;
        margin-left: 10px;
        font-size: 18px;
    }
}