#future{
    background-image: url(images/black\ hole.webp);
    color: aliceblue;
}

h1{
    text-align: center;

}

p{
    text-align: center;

}

.thing{
    margin-bottom:100px;
    margin-top:100px;
    border: 10px blue;
    border-style: solid;
    padding: 10px;
}

body{
    background-color: bisque;
}

img{
width:200px;
height: auto;

}

footer{
    text-align: right;
    font-family:monospace;
    color:gray;
}

/* this is my attemted at ainmation the photo and it did not work on the one i want becasue is a pop up so i moved it to the other */
@keyframes then {
   0%   {rotate:0deg; top:0px;}
  25%  {rotate: 20deg; left:200px; top:0px;}
  50%  {rotate: 50deg; left:200px; top:200px;}
  75%  {rotate: 100deg; left:0px; top:200px;}
  100% {rotate: 300deg; left:0px; top:0px;}
}
  #the{
    animation-name: then;
    animation-duration: 10s;
}


/* class slector is . , # is for id