@import url('https://fonts.googleapis.com/css?family=Roboto:100&display=swap');
@import url('https://fonts.googleapis.com/css?family=Caveat+Brush&display=swap');
@import url('https://fonts.googleapis.com/css?family=Chivo:400,400i&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
@import url('https://unpkg.com/css.gg@2.0.0/icons/css/close.css');


@font-face {
    font-family: Franklin;
    src: url(../fonts/Franklin.ttf);
}

@font-face {
    font-family: Cooper;
    src: url(../fonts/Cooper.ttf);
}

*{
    margin:0;
    padding:0;
}

.darkmodelink{
    color:white;
}

.lightmodelink{
    color:black;
}

html,body{
    height: 100%;
}

body{
    font-family: "Inter", sans-serif;
    font-size: .8rem;
    /*background-color: #b8b8b8;*/
    background-color: #ffffff;
}

.empty-first{
    margin-top:1em;
}

.row-grid{
    display:grid;
    grid-template-rows: 5vh 10vh auto;
    min-height: 100%;
}

.grid-container{
    display:flex;
    flex-direction: column;
}

body::-webkit-scrollbar {
    width: 0 !important;
}

.image-holder{
    display:flex;
    flex-direction: row;
    margin-top:1em;
    max-width: 100%;
}

.video-holder{
    display:flex;
    flex-direction: row;
    margin-top:1em;
    width: 100%;
    height: 100%;
}

.single-picture{
    width:50%;
}

.video{
    position: relative;
    width: 100%;
    padding-top: 177.78%; 
}

.single-video-with-annotation{
    display: flex;
    flex-direction: column;
    width:50%;
    height: 100%;
}

.video-annotation{
    margin: 1em 0 0 0;
    height: 100%;
    font-size: .8em;
    width: 100%;
}

.subpage-video{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.player{ margin: 0; padding: 0; }

.full-picture{
    width:100%;
}

.subpage-title{
    text-decoration: underline;
    margin-left: 0.5em;
    margin-right: 1em;
}

.subpage-text{
    margin-top: 1em;
    margin-left: 0.5em;
    /*font-size: .8em;*/
    margin-right: 1em;
    /*min-height: 350px; /*450px*/
}

.subpage-date{
    margin-top: 1em;
    margin-left: 0.5em;
    margin-right: 1em;
}

.subpage-credits{
    margin-top: 1em;
    margin-left: 0.5em;
    margin-bottom: 1em;
    margin-right: 1em;
}