/*
=======================================
    osies css
=======================================
*/

* {
    box-sizing: border-box;
}

body{
    display: flex;
    flex-direction: column;
    background-color: #fff9d9;
    margin: 0;
}

body.mobile-menu {
    overflow: hidden
}

.image-info{
    font-family: Agdasima;
    background-color: rgba(255, 249, 217, 1);
    padding: .2em .2em .5em .5em;
    border-radius: 10px;
    transition: opacity 1s ease-in-out;
    opacity: 1;
    z-index: 2;
    position: absolute;
}

.image-info.fade-out{
    opacity: 0;
}

/* =======================================
    Font Stuff
========================================*/

@font-face {
    font-family: Agdasima;
    src: url("/../font/Agdasima/Agdasima-Regular.ttf");
}

@font-face {
    font-family: Agdasima-Bold;
    src: url("/font/Agdasima/Agdasima-Bold.ttf");
}

#home-text{
    font-family: Agdasima;
    font-size: 2.5em;
}

.timeline-title{
    font-family: Agdasima-Bold;
    font-size: 1.5em;
}

.blogpost-gallery-indexer, .blogpost-gallery-description{
    font-family: Agdasima;
    font-size: 1.1em;
    text-align: center;
}

.four-o-four-message{
    font-family: Agdasima;
    font-size: 3em;
}

noscript, #easter-egg-disclaimer{
    font-family: Agdasima;
    font-size: 3em;
    text-align: center;
}

footer{
    font-family: Agdasima;
    font-size: .9em;
}

/* =======================================
    Navigation Bar
========================================*/

header{
    width:100%;
    display: flex;
    align-items: stretch;
    padding: 4vw 6vw;
}

a{
    text-decoration: none;
    color: black;
    font-family: Agdasima;
}

a:hover{
    text-decoration: underline;
    cursor: pointer;
}


#menu{
    font-size: 1.3em;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.menu-buttons{
    margin-left: 5vw;
}

#insta-icon{
    display: flex;
}

.mobile-menu-buttons{
    font-size: 3em;
    padding-bottom: 10vw;
}

#mobile-menu{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: #fff9d9;
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 1;
    left: 0;
    overflow-y: hidden;
    transition: 0.5s;
}

#home-button{
    display: flex;
    align-items: center;
}

#burger-menu{
    display: none;
}


/* =======================================
    Content
========================================*/

#content{
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 6vw;
}

.four-o-four-message{
    text-align: center;
    flex: 100%;
}

.content-column{
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.one-content-column{
    justify-content: center;
    display: flex;
    width: 100%;
}

.one-content-column img{
    max-width: 25%;
}

.picture-content-picture{
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}

.picture-content-picture:hover{
    opacity: .8;
}

.blur-up {
  filter: blur(3px);
  transition: filter 0.4s ease-out;
}

.blur-up.lazyloaded {
  filter: blur(0);
}

#stage{
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat no-repeat;
    background-position: center center;
}

#stage-container{
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 2em;
    transform: scale(0);
    background-color: rgba(255, 249, 217, .5);
}

#easter-egg-disclaimer{
    flex: 100%;
    padding: 4vw 0;
}

/* =======================================
    Content - Timeline
========================================*/

.blogpost{
    width: 100%;
    -ms-flex: 100%; /* IE10 */
    flex: 100%;
}

.timeline-title{
    padding: 2vw 0;
}

.blogpost-gallery {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 60vh;
}

.blogpost-gallery-image-container {
    display: flex;
    width: 100%;
    height: 70%;
}

.blogpost-gallery-main-stage{
    flex: 45%;
}

.blogpost-gallery-side-stage{
    flex: 15%;
}

.blogpost-gallery-frame{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 1vw;
}

.blogpost-gallery-image{
    max-width: 100%;
    max-height:100%;
}

.blogpost-gallery-image.placeholder{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.blogpost-gallery-image:hover{
    opacity: .8;
}

.blogpost-gallery-image-bar{
    display: flex;
    flex-grow: 1;
}

.blogpost-gallery-image-description-container{
    display: flex;
    flex-direction: column;
    flex: 60%;
    padding-top: 1.5vw;
}

.blogpost-gallery-next, .blogpost-gallery-previous {
    cursor: pointer;
    user-select: none;
    flex: 15%;
    touch-action: manipulation;
}

.blogpost-gallery-next {
    display: flex;
    align-content: center;
    justify-content: center;
}

.blogpost-gallery-previous {
    display: flex;
    align-content: center;
    justify-content: center;
}

.blogpost-gallery-next-image, .blogpost-gallery-previous-image{
    width: 2.5em;
}

.blogpost-gallery-description {
    flex-grow: 3;
}

.blogpost-gallery-indexer {
    flex-grow: 1;
}


/* =======================================
    Footer
========================================*/

footer{
    align-self: center;
    text-align: center;
    padding-top: 4vw;
    padding-bottom: 2vw;
}

/* =======================================
    Responsiveness
========================================*/

@media screen and (max-width: 680px) {
    .content-column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }

    .one-content-column img{
        max-width: 65%;
    }

    .menu-buttons{
        display: none;
    }

    #burger-menu{
        display: flex;
    }

    .blogpost-gallery-main-stage{
        flex: 70%;
    }
}