.h1{
    font-family: 'Fjalla One', sans-serif;
}
.p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
}

header{
    width: 100%;
    height: 100vh;
    position: relative;
    background-image: url(slike/buducnost-header.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.headerInfo{
    top: 100px;
    left: 60%;
    position: absolute;
    width: 500px;
    height: 300px;
    background-color: rgba(0, 0, 0, 0.7);
    animation: dolazak;
    animation-duration: 1s;
}

.headerInfo h1{
    width: 100%;
    background-color: darkred;
    color: white;
    font-size: 3em;
    margin-top: -30px;
    border-right: 10px solid white;
    padding-left: 10px;
}

.headerInfo p{
    color: white;
    font-size: 1.5em;
    padding: 10px;
}

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

#FT1{
    width: 100%;
    height: 80vh;
    background-color: black;
    color: white;
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 100%;
    grid-template-areas: 
        ". tekstFT1 .";
}

.tekstFT1{
    grid-area: tekstFT1;
}

.tekstFT1 h1{
    text-align: center;
    font-size: 3em;
}

.tekstFT1 p{
    font-size: 1.5em;
}

#FT2{
    width: 100%;
    height: 80vh;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 100%;
    grid-template-areas: 
        "slikaFT1 tekstFT2";
}

.tekstFT2{
    grid-area: tekstFT2;
    padding: 10px;
}

.tekstFT2 h1{
    font-size: 2em;
}

.tekstFT2 h2{
    font-size: 1.8em;
    color: darkred;
}

.tekstFT2 p{
    font-size: 1.5em;
}

.slikaFT1{
    background-image: url(slike/moon.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    grid-area: slikaFT1;
}

#FT3{
    width: 100%;
    height: 60vh;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 100%;
    grid-template-areas: 
        "tekstFT3 tekstFT4";
}

.tekstFT3{
    grid-area: tekstFT3;
    padding: 10px;
}

.tekstFT3 h1{
    font-size: 2em;
    text-align: center;
}

.tekstFT3 p{
    font-size: 1.5em;
}

.tekstFT4{
    grid-area: tekstFT4;
    background-color: darkred;
    color: white;
    padding: 10px;
}

.tekstFT4 h1{
    font-size: 2em;
    text-align: center;
}

.tekstFT4 p{
    font-size: 1.5em;
}

#FT4{
    width: 100%;
    height: 100vh;
    position: relative;
    background-image: url(slike/buducnost-mars.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.tekstFT5{
    position: absolute;
    color: white;
    top: 0px;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    left: 0px;
    padding: 10px;
}

.tekstFT5 h1{
    font-size: 5em;
}

.tekstFT5 h2{
    font-size: 1.8em;
    color: darkred;
}

.tekstFT5 p{
    font-size: 1.5em;
    width: 50%;
}

#FT5{
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
    grid-template-areas: 
        "tekstFT6 tekstFT7"
        "tekstFT8 tekstFT9";
}

.tekstFT6{
    grid-area: tekstFT6;
    padding: 10px;
    background-color: darkred;
    color: white;
}

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

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

.tekstFT9{
    grid-area: tekstFT9;
    padding: 10px;
    background-color: darkred;
    color: white;
}

.tekstFT6 h1{font-size: 2em;text-align: center;}
.tekstFT7 h1{font-size: 2em;text-align: center;}
.tekstFT8 h1{font-size: 2em;text-align: center;}
.tekstFT9 h1{font-size: 2em;text-align: center;}

.tekstFT6 p{font-size: 1.5em;}
.tekstFT7 p{font-size: 1.5em;}
.tekstFT8 p{font-size: 1.5em;}
.tekstFT9 p{font-size: 1.5em;}

#FT6{
    width: 100%;
    height: 80vh;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 100%;
    grid-template-areas: 
        "slikaFT2 tekstFT10";
}

.slikaFT2{
    grid-area: slikaFT2;
    background-image: url(slike/buducnost-asteroid.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.tekstFT10{
    grid-area: tekstFT10;
    padding: 10px;
}

.tekstFT10 h1{
    font-size: 2em;
}

.tekstFT10 p{
    font-size: 1.5em;
}

#FT7{
    width: 100%;
    height: 60vh;
    background-color: black;
    color: white;
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 100%;
    grid-template-areas: 
        ". tekstFT11 .";
}

.tekstFT11{
    grid-area: tekstFT11;
}

.tekstFT11 h1{
    font-size: 2em;
    text-align: center;
}

.tekstFT11 p{
    font-size: 1.5em;
}

#FT8{
    width: 100%;
    height: 60vh;
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 100%;
    grid-template-areas: 
        ". tekstFT12 .";
}

.tekstFT12{
    grid-area: tekstFT12;
}

.tekstFT12 h1{
    font-size: 2em;
    text-align: center;
}

.tekstFT12 p{
    font-size: 1.5em;
}

#FT9{
    width: 100%;
    height: 60vh;
    background-color: black;
    color: white;
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 100%;
    grid-template-areas: 
        ". tekstFT13 .";
}

.tekstFT13{
    grid-area: tekstFT13;
}

.tekstFT13 h1{
    font-size: 2em;
    text-align: center;
}

.tekstFT13 p{
    font-size: 1.5em;
}