#pozadina{
    width: 100%;
    height: 100vh;
    background-color: black;
}

#videoN {
  width: 100%; 
  height: 100vh;
  position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tekstBGV{
    position: absolute;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 250px;
    bottom: 0px;
    animation: dolazak;
    animation-duration: 1s;
}

@keyframes dolazak{
    0%{margin-left: -100%;}
    100%{margin-left: 0%;}
}

#videoN h1{
    position: absolute;
    color: white;
    font-size: 72px;
    left: 0%;
    top: -15%;
    z-index: 100;
    padding: 20px;
    font-family: 'Fjalla One', sans-serif;
}

#videoN p{
    position: absolute;
    color: #d4d2d2;
    font-size: 32px;
    left: 0%;
    bottom: -10px;
    z-index: 100;
    width: 80%;
    line-height: 40px;
    padding: 20px;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}

#m1{
    width: 100%;
    height: 100vh;
    background-color: black;
    color: white;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: 40% 60%;
    grid-template-areas: 
        "slikaM1 slikaM2 slikaM3"
        ".tekstM1 .";
}

.slikaM1{
    background-image: url(slike/slikaM2.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    grid-area: slikaM1;
}
.slikaM2{
    background-image: url(slike/slikaM1.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    grid-area: slikaM2;
}
.slikaM3{
    background-image: url(slike/Naslovna-apollo.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    grid-area: slikaM3;
}

.tekstM1{
    grid-area: tekstM1;
}

.tekstM1 h1{
    font-family: 'Fjalla One', sans-serif;
    font-size: 2em;
    text-align: center;
}

.tekstM1 p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
}

#m2{
    width: 100%;
    height: 100vh;
    background-color: white;
    color: black;
    display: grid;
    grid-template-columns: 10% 40% 40% 10%;
    grid-template-rows: 100%;
    grid-template-areas: 
        ". tekstM2 slikaM4 .";
}

.tekstM2{
    grid-area: tekstM2;
}

.tekstM2 h1{
    font-family: 'Fjalla One', sans-serif;
    font-size: 4em;
}

.tekstM2 p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
}

.slikaM4{
    background-image: url(slike/slikaM3.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    grid-area: slikaM4;
}

#slikaPozFix{
    position: relative;
    width: 100%;
    height: 600px;
    background-image: url(slike/apollo11%20crew2.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

#slikaPozFix h1{
    position: absolute;
    font-family: 'Fjalla One', sans-serif;
    font-size: 4em;
    padding: 20px;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
}

#m3{
    width: 100%;
    height: 500px;
    background-color: white;
    display: grid;
    grid-template-columns: 20% 40% 40%;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas: 
        ". . ."
        ". slikaM5 desnitekstM3"
        ". . .";
}

.desnitekstM3{
    background-color: black;
    color: white;
    grid-area: desnitekstM3;
    padding: 20px;
}

.desnitekstM3 h1{
    font-family: 'Fjalla One', sans-serif;
    font-size: 2em;
}

.desnitekstM3 p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
}

.slikaM5{
    background-image: url(slike/apollo11%20crew3.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    grid-area: slikaM5;
}

#m4{
    width: 100%;
    height: 500px;
    background-color: white;
    display: grid;
    grid-template-columns: 40% 40% 20%;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas: 
        ". . ."
        "lijevitekstM4 slikaM6 ."
        ". . .";
}

.lijevitekstM4{
    background-color: black;
    color: white;
    grid-area: lijevitekstM4;
    padding: 20px;
}

.lijevitekstM4 h1{
    font-family: 'Fjalla One', sans-serif;
    font-size: 2em;
}

.lijevitekstM4 p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
}

.slikaM6{
    background-image: url(slike/apollo11-eagle.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    grid-area: slikaM6;
}

#m5{
    width: 100%;
    height: 500px;
    background-color: white;
    display: grid;
    grid-template-columns: 20% 40% 40%;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas: 
        ". . ."
        ". slikaM7 desnitekstM4"
        ". . .";
}

.desnitekstM4{
    background-color: black;
    color: white;
    grid-area: desnitekstM4;
    padding: 20px;
}

.desnitekstM4 h1{
    font-family: 'Fjalla One', sans-serif;
    font-size: 2em;
}

.desnitekstM4 p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
}

.slikaM7{
    background-image: url(slike/apollo11-NASA.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    grid-area: slikaM7;
}

#m6{
    width: 100%;
    height: 500px;
    background-color: white;
    display: grid;
    grid-template-columns: 10% 40% 40% 10%;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas: 
        ". . . ."
        ". tekstM6 slikaM8 ."
        ". . tekstMO .";
}

.tekstM6{
    background-color: white;
    color: black;
    grid-area: tekstM6;
}

.tekstM6 h1{
    font-family: 'Fjalla One', sans-serif;
    font-size: 2em;
}

.tekstM6 p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
}

.tekstMOpis{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    background-color: white;
    color: black;
    padding: 10px;
    text-align: center;
    font-size: 1.5em;
    grid-area: tekstMO;
}

.slikaM8{
    background-image: url(slike/apollo11-more%20ti%C5%A1ine.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    grid-area: slikaM8;
}


#m7{
    width: 100%;
    height: 150vh;
    background-color: black;
    color: white;
    display: grid;
    grid-template-rows: 10% 40% 50%;
    grid-template-columns: 10% 80% 10%;
    grid-template-areas: 
        ". . ."
        ". tekstM7 ."
        ". slikaM9 .";
}

.tekstM7{
    background-color: black;
    color: white;
    grid-area: tekstM7;
}

.tekstM7 h1{
    font-family: 'Fjalla One', sans-serif;
    font-size: 3em;
    text-align: center;
}

.tekstM7 p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
}

.slikaM9{
    background-image: url(slike/Apollo%2011%20footprints.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    grid-area: slikaM9;
}

#m8{
    width: 100%;
    height: 100vh;
    background-color: black;
    display: grid;
    grid-template-columns: 5% 45% 45% 5%;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas: 
        ". . . ."
        ". tekstM8 slikaM10 ."
        ". . . .";
}

.tekstM8{
    background-color: black;
    color: white;
    padding: 10px;
    grid-area: tekstM8;
}

.tekstM8 h1{
    font-family: 'Fjalla One', sans-serif;
    font-size: 3em;
    text-align: center;
}

.tekstM8 p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
}

.slikaM10{
    background-image: url(slike/apollo11%20patch.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    grid-area: slikaM10;
}

#m9{
    width: 100%;
    height: 70vh;
    background-color: black;
    color: white;
    display: grid;
    grid-template-columns: 10% 40% 40% 10%;
    grid-template-rows: 30% 70%;
    grid-template-areas: 
        "h1M9 h1M9 h1M9 h1M9"
        ". tekstM9 slikaM11 .";
}

.tekstM9{
    width: 100%;
    height: 100%;
    grid-area: tekstM9;
}

.h1M9{
    font-family: 'Fjalla One', sans-serif;
    font-size: 3em;
    text-align: center;
    grid-area: h1M9;
}

.tekstM9 p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
}

.slikaM11{
    grid-area: slikaM11;
    background-image: url(slike/apollo11%20landing.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#m10{
    width: 100%;
    height: 120vh;
    background-color: white;
    display: grid;
    grid-template-columns: 2% 30% 3% 30% 3% 30% 2%;
    grid-template-rows: 95% 5%;
    grid-template-areas: 
        ". slikaM12 . slikaM13 . slikaM14 ."
        ". opisM12 . opisM13 . opisM14 .";
}

.slikaM12{
    background-image: url(slike/apollo11-neil2.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    grid-area: slikaM12;
}



.slikaM13{
    background-image: url(slike/apollo11-buzz2.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    grid-area: slikaM13;
}

.slikaM14{
    background-image: url(slike/apollo11-collins2.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    grid-area: slikaM14;
}

.opisM12{
    background-color: black;
    color: white;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
    text-align: center;
    grid-area: opisM12;
}
.opisM13{
    background-color: black;
    color: white;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
    text-align: center;
    grid-area: opisM13;
}
.opisM14{
    background-color: black;
    color: white;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
    text-align: center;
    grid-area: opisM14;
}