h1{

    text-align:left;
    color:forestgreen;
    font-size: 75px;
   position: absolute;



}


body{
    background-image: url(images/futurecity3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;

}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}



h2{
    text-align: center;
    color:forestgreen;
    font-size: 75px;
    
}

h3{
    text-align: right;
    color: forestgreen;
    font-size: 75px;
}



.headings {
    display: flex;
    gap: 15px;
}

.past{
    margin-left: 20px;

}

.present{
    margin-left: 625px;

}


.future{
    margin-left: 375px;
}

.center{
    display: block;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    top: -500px;
    width: 300px;
}

.right{
    display: block;
    margin-right: 100px;
    margin-left: 1175px;
    position: relative;
    top: -1000px;
    width: 300px;
}

footer{
    font-size: 75px;
    text-align: center;
    color: forestgreen;
    -webkit-text-stroke:2px black;
}

article{
    font-size: 30px;
    text-align: left;
    color:green;
    width: 300px;
    transform: translateY(-450px);
    -webkit-text-stroke:2px black;
}

.article2{
    font-size: 30px;
    text-align: center;
    width: 300px;
    margin-top: -750px;
    transform: translateX(600px);
    color:white;
    -webkit-text-stroke:2px black;
}

.article3{
     font-size: 30px;
    text-align: right;
    width: 300px;
    margin-top: -310px;
    transform: translateX(1125px);
    color:white;
    -webkit-text-stroke:2px black;
}

/* I used AI to figure out the text-stoke command. */