/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 */

@import "https://fonts.googleapis.com/icon?family=Material+Icons";


html{
    margin:0;

}

body{
    font-size: 0.66em;
    font-family: 'Roboto Slab';
    font-weight: 100;
    background: ghostwhite; 
    min-height: 100%;
    min-width: 100%;
    margin: 0%;
}



header{
    display: block;
    position: fixed;
    left: 2em;
    top: 0%;

    /*background: ghostwhite;
    width: 100%;*/
}


.menu#burger{
    display: none;

}

#navbar{
    position: inherit;
    height: 100%;
 
    /*background: ghostwhite;*/
}

#name{
    font-style: normal;
    font-weight: 50;
    margin-top: 2em;

    letter-spacing: 0.25em;
    max-width: auto;
}



wrapper{
display: block;

}


ul{
    margin-top: 0;
    margin-bottom: 1em;
    padding: 0;
}

p{
 margin-top: 0;
 margin-bottom: 0em;
}

h3{
    font-weight: 100;
    margin-top: 0;
}
a{
    margin:0;
}

a:link,
a:visited,
a:hover,
a:active{
    color: black;
    text-decoration: none;
}

a:hover{
    color: rgba(0, 0, 0, 0.7);
}

.bodies{
    display: grid;
    margin-left: 12%;
    

}

.elements{
    display: grid;

}

.title{
    margin-left: 12%;
}

#information{
    position: fixed;
}



.margin_top{
    margin-top: 8%;
}

.pagetitle{
    font-size: 1.3em;
    font-style: normal;
    font-weight: 100;
    margin-top: 0;
}


.universal_list{
    display: grid;
    margin-left: 2%;
}

#grid{
    display: grid;
}

.description{

    /*
    justify-self: end;
    margin-right: 12%;
    margin-left: auto;
    */
    height: auto;
    padding: 0;
    position: sticky;
    grid-area: desc;
    top: 14.5%;
    overflow: clip;
    max-width: 20vw;
    z-index: 1;
    align-self: start;
    left: 13.8%;
    display: block;
}

#flowgridcolumn{
    grid-auto-flow: column;
}

#flowgridrow{
    grid-auto-flow: row dense;
}

.doublecolumn:nth-child(n){

}


.gridcolumn{
    grid-template-areas: "desc image";
} 

#works{
    height: auto;
}


#abouttext{
    max-width: 40%;
    text-align: left;
}

.left{
    justify-self: end;
    margin-right: 4%;
}

/*div.universal_list#flowgridrow{
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

img#flowgridrow:nth-child(odd){
    grid-column: 1;
}

img#flowgridrow:nth-child(even){
    grid-column: 2;
}
*/
@keyframes appear {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes disappear{
  0% { opacity: 1; }
  100% { opacity: 0; }
}


img{
    object-fit: contain;
    margin-bottom: 2.5em;
    margin-top: 0em;
    animation: appear 0.68s ease-in 0s 1 normal;
}

.image_container{
    max-width: 100%;
    margin-top: 1vh;
    display: flex;
    justify-content: normal;
    max-height: min-content;
    grid-area: image;
}

.image_container#flexflowrow{
    flex-flow: row wrap;
}

.image_container#flexflowcolumn{
    flex-flow: column wrap;
}
/*
.image_container#flexflowcolumn img:nth-child(2n){
    align-self: end;
}

.image_container#flexflowcolumn img.x1:nth-child(2n){
    align-self: center;
}


.x2{
    width: 50%;
}

.x3{
    width: 30%;
}

.x4{
    width: 20%;
} */

.landscape{
    max-height: 98vh;
    max-width: 75%;
    min-height: 5%;
    min-width: 40%;
    margin-top: 5em;
}

.portrait{
    max-height: 98vh;
    max-width: 100%;
    min-width: 5%;
}

.x1{
   /* align-self: end;
    max-width: 75%;
    margin-right: 2%;
*/
    max-height: 98vh;
    margin-left: 5%;
    margin-right: 5%;
    max-width: 75%;
    align-self: center;

}



img#homepageimage{
    animation: none;
    margin: 0;
    width: 100%;
    height: auto;
    max-height: none;
    max-width: none;
    position: fixed; 
    top:-90%;
    left:0;
    z-index:-1; 

}


@media only screen and (max-width: 1000px) {

body{
    font-size: 0.8em;
}

header{
    display: none;
    animation: appear 0.1s ease-in 0s 1 normal;
    z-index: 3;
    background-color: ghostwhite;
    height: 100vh;
    width: 100vw;
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
}


.divider{
    background: ghostwhite; 
    z-index: 99;
    margin-left: auto;
    margin-right: auto;
    height: 40%;
    margin-top: auto;
    margin-bottom: auto;
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    display: grid;
    font-weight: 200;
    text-align: center;
}

button{
    background: ghostwhite; 
    border: 0;
    padding: 0;
    text-align: left;
}

button.iconcollector{
    width: fit-content;
}

#name{
    display: none;
}

.menu#burger{
    z-index: 100;
    width: 100%;
    position: fixed;
    background: ghostwhite; 
    border: 0;
    display: grid;
    grid-auto-flow: column;
}

.iconcollector{
    display: block;
}

.navTitle{
}

.navTitle#name{
    display: block;
    margin-top: 5%;
    text-align: center;
}

.closeIcon{
    display: none;
}

.openIcon{
    display: inherit;
}

.bodies{
/*    max-width: 50%;*/
    margin-left: 0;
}

.universal_list{
/*    margin-top: 20%;*/
}

#works{
    position: relative;
    left: 0%;
    right: 0%;
    top: 10%;
    bottom: 0%;
    width: 100vw;
    height: auto;
    margin-top: auto;
    margin-bottom: auto;
    font-weight: 200;
    overflow: hidden;
}

#information{
    position: ;
}

.description{
    position: inherit;
    top: 0;
    left: 0;
    margin-top: 20%;
    margin-left: auto;
    margin-right: auto;
}


.gridcolumn {
  grid-template-areas:
"desc"
"image";
}

.x1{
 width: auto;
 margin-top: 15%;
 margin-right: 0;
 margin-left: 0;
 max-width: 95vw;
 width: 95vw;

}

.image_container#flexflowcolumn{
    flex-flow: row wrap;
}


.image_container{
    position: relative;
/*    right: 27vw;
    margin-left: auto;
    margin-right: auto;
*/
}

nav#navbar{
    justify-self: center;
    font-size: 1.2em;
}

#mailto{
    justify-self: center;
    margin-top: 50%;

}

.margin_top{
    margin-top: 30%;
}

.pagetitle{
    margin-top: 2%;
    display: flex;
    justify-content: center;
}

.pagetitle a{
    display: inherit;
    align-self: center;
}

.educationlist{
    margin-top: 0;
}

.exhibitionlist{
    margin-top: 0;
}

.showMenu{

    display: block;
}


}