body {
    background-color: gray;
    font-family: arial;
}

body, html {
  height: 100%;
}

.stickToBottom{
    margin-top: 2400px;
}

#projects table{
    color: blue;
    width: 90%;
    text-align: center;
    font-size:25px;
    border-radius: 30px;
    border: 5px solid black;
    padding-bottom:10px;
}

.projectleft{
    float: left;
    margin-bottom: 50px;
}

.projectright{
    float: right;
    margin-bottom: 50px;
}

.parallax {
  /* The image used */
  background-image: url('https://codehs.com/uploads/8aebe3f723b40c6c5ce4c3a2d9fd79ce');

  /* Full height */
  height: 69%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax2 {
  /* The image used */
  background-image: url('https://codehs.com/uploads/9ba2508254bdd28f4d8179283338c462');

  /* Full height */
  height: 69%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallaxfireplace {
  /* The image used */
  background-image: url('https://codehs.com/uploads/735c99724327d3c5a5b1cee72e604872');

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallaxblackheader {
  /* The image used */
  background-image: url('https://codehs.com/uploads/872d0eb3eba283b4947c7d49e768f73a');

  /* Full height */
  height: 34.5%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallaxblackbody {
  /* The image used */
  background-image: url('https://codehs.com/uploads/872d0eb3eba283b4947c7d49e768f73a');

  /* Full height */
  height: 69%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallaxheader {
  /* The image used */
  background-image: url('https://codehs.com/uploads/9ba2508254bdd28f4d8179283338c462');

  /* Full height */
  height: 34.5%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.topnav {
  background-color: black;
  overflow: hidden;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

@keyframes example {
    0%   {background-color:white; left:0px; top:450px;}
    100% {background-color:black; left:0px; top:0px;}
}

div {
  width: max-width;
  height: 100px;
  position: relative;
  animation-name: example;
  animation-duration: 2s;
  animation-delay: 0s;
}