html {
    scroll-behavior: smooth;
}

html,
body {
    min-height: 100vh;
    font-size: 100%;
    margin: 0;
    padding: 0;

}

h1,
h2,
h3,
h4 {
    font-weight: 500;
}

body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 90%;
    background-color: #fafafa;
    color: #555;

}

hr {
    margin-top: 12em;
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999;
}

a,
a:active,
a:visited {
    color: inherit;
}

#wrapper {
    position: relative;
    width: 90vmin;
    max-width: 70vmax;
    min-width: 50vmin;
    height: auto;
    margin: 0 auto;
    background-color: white;
    box-sizing: border-box;
    padding: 2em;
    /*box-shadow: rgba(0,0,0,.25) 2px 2px 12px;*/
}

#navigation {
    font-size: 110%;

    position: sticky;
    top: 0;
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%);
    display: block;
    z-index: 20;
    box-sizing: border-box;
    padding: 2em 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#navigation a {
    text-decoration: none;
    color: inherit;
}
.navigationMatjuse{
    text-align: right;
}
#navigation li {
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#navigation li:after {
    content: " |"
}

#navigation li:last-child:after {
    content: ""
}

#navigation ul {
    margin: 0 0 .5em;
    padding: 0;
}

.sectionBackground{
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    padding-bottom: 4em;
    margin-bottom: 2em;
}


.mazeBackground{
     background-image:url("/footage/backgrounds/maze_hintergrund.png");
}
.roboterBackground{
     background-image:url("/footage/backgrounds/robotik_hg_juesche_matjuse.jpg");
    
}
.monsterBackground{
    background-image: url("/footage/backgrounds/monster_b1_hg_matjuse.jpg");
    
}.unicornBackground{
    background-image: url("/footage/backgrounds/unicorn-background-juesche_simple.jpg");
    
}

.pilzwesenBackground{
    background-image: url("/footage/backgrounds/pilzwesen_hintergrund.jpg");
}

.grid {
    position: relative;
    display: grid;
    grid-gap: 2.5em;
    grid-template-columns: 1fr 1fr;


}

.book {

    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.5em;
    /*background: linear-gradient(135deg, rgba(0, 0, 200, .05) 28%, rgba(255, 255, 255, .5) 100%);*/
    /*box-shadow: rgba(0, 0, 0, .25) 0px 0px 2px;*/
    /*border: dotted 1px grey;*/



}

.moreInfos {

    
   /* background: url("/footage/matjuse_arrow.svg") no-repeat right center, linear-gradient(90deg, rgba(0, 0, 200, 0) 15%, rgba(255, 255, 255, .5) 90%);*/
    
    background: url("/footage/matjuse_arrow.svg") no-repeat right center;
    
    background-size: contain;

    /*
    , linear-gradient(270deg, rgba(0, 0, 200, .05) 28%, rgba(255, 255, 255, .5) 100%);
    */
    box-sizing: border-box;
    padding: .5em 0 1em;
    margin: 0;
}

.double {
    
    grid-column: 1 / span 2;


}

.double img{
    position: relative;
    
    object-fit: cover;
    width: 100%;
    max-height: 100%;
    margin-top: 6em;
}

.double.center img {
    left: 50%;
}

.book h3,
.book h4 {
    margin: .5em 0;
}


.bookCover img {
    object-fit: cover;
    width: 100%;
    box-shadow: rgba(0, 0, 0, .25) 2px 2px 12px, rgba(0, 0, 0, .5) 2px 2px 8px;

}

.book div {
    position: relative;

}

.bookInfo,
.bookCover {
    color: #111;
    box-sizing: border-box;
    padding-bottom: 1em;
}

.bookInfo {
    align-self: flex-end;
}

.bookInfo a {
    text-decoration: none;
    color: inherit;
}

.button {
    cursor: pointer;
}

.amazon {
    width: 10em;
    margin-bottom: 1em;
}

.textPadding {
    padding-right: 2em;
}
.buttonLink:first-of-type{
    margin-bottom: 1.5em;
}

.buttonLink {
    display: block;
    box-sizing: border-box;
    border-radius: 1em;
    border: 1px solid black;
    width: 10em;
    padding: .5em;
    margin-bottom: .5em;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    text-align: center;
}

.matjuseLogo{
    z-index: 10;
}
.headerPicture{
    position: absolute;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    z-index: 5;
}
@keyframes blenden{
    0%,25%{opacity: 1}
    35%,90%{opacity: 0}
}
#headerUnicorn{
    background-image: url(/footage/header/matjuse_header_unicorn.jpg);
    animation: blenden 12s  infinite;
    animation-delay: 0s;
}
#headerRoboter{
    background-image: url(/footage/header/matjuse_header_monster.jpg);
     animation: blenden 12s  infinite;
    animation-delay: -3s;
}
#headerMonster{
    background-image: url(/footage/header/matjuse_header_monster.jpg);
     animation: blenden 12s  infinite;
    animation-delay: -6s;
}
#headerRobotik{
    background-image: url(/footage/header/matjuse_header_robotik.jpg);
     animation: blenden 12s  infinite;
    animation-delay: -9s;
}

@media (max-width : 1448px ){
    body{
        font-size: 72%;
        
    }
    #wrapper{
        width: 100%;
        max-width: 100%;
        
    }
    #navigation{
         grid-template-columns: 1fr;
    }
    #navigation ul{
        display: inline-block;
        text-align: center;
        margin:0;
        width: 100%;
    }
    
    .navigationMatjuse{
        width: 100%;
        text-align: center;
    }
    
    .grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;


    }

    .book {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-gap: 0.5em;
        padding: 0 1em;
    }
    

    .double {
        grid-column: span 1;
    }



    .double img {
        position: relative;
        margin-top: 2em;
        width: 100%;
        
    }
    .double.center img{
        left:0;
    }
    hr{
        margin-top: 2em;
    }
    .bookCover img{
        width:50%;
    }
}