@charset "UTF-8";
/* CSS Document */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
p{
	padding-bottom:1em;
    line-height:1.4;
}
img{
    width:100%;
    height:auto;
    border:solid 1px #666;
}
body{
    background-color:#000;
    color:#FFF;
}
#wrapper{
    max-width:1280px;
    margin:0 auto 5em;
    border-left:solid 1px #666;
    border-right:solid 1px #666;
    font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    
    display:grid;  /* her kun for grid-row-gap */
    grid-row-gap:1em;
    
    background-image: url(images/fade2.jpg);
    background-position:top center;
    background-repeat:no-repeat;
    background-size:contain;
}
nav{
    /*grid-area: 1 / 1 / 2 / -1;*/  /* = row: fra h-line-1(top) til h-line-2  og  column: fra v-line-1(left) til v-line-last */
    position:sticky;
    top:0;
    background-color: rgba(0, 0, 0, 0.5);
}
nav ul{
    list-style-type: none;
    padding:1em 0;           
    display:grid;
    grid-auto-flow: column;     /* skaber kolonner efter behov */    
    justify-items: center;     /* li's i midten af grid cells - vandret */
}
nav a{
    color:#FFF;
    text-decoration:none;
    font-size:1.2em;
}
h1{
    font-size:4em;
    padding:20% 0;
    text-align:center;
}
section{
    margin:0 2% 3em;
    display:grid;
}
h2{
    margin:0 2%;
}

#about, #cast{
    grid-template: auto / repeat(4, 1fr);    
    grid-column-gap: 1%;
}
#stills, #story{
    grid-template: 100% / repeat(3, 1fr);
    grid-column-gap: 1%;
    align-items:end;
}

@media screen and (max-width:600px){
    nav{
        position:static;
        background-color:transparent;
    }
    nav ul{
        grid-auto-flow:row;
    }
    nav li{
        padding:0.5em 0;
    }
    #about, #cast{
        grid-template: repeat(4, auto) / auto;
    }
    #stills, #story{
        grid-template: repeat(3, auto) / auto;
    }
}