body {
        background-color: white;
        color: black;
      }

    @keyframes SpinnyAnim {
      from {transform: rotate(0deg);}
      to {transform: rotate(360deg);}
    }
    
    @keyframes SmallSpin {
      0% {transform: rotate(-5deg);}
      50%{transform: rotate(5deg);}
      100% {transform: rotate(-5deg);}
    }

    .Spinny {
        animation-name: SpinnyAnim;
        animation-iteration-count: infinite;
        animation-duration: 2s;
        animation-timing-function: linear
    }
    
    .SmallSpin {
        animation-name: SmallSpin;
        animation-iteration-count: infinite;
        animation-duration: 1s;
        animation-timing-function: ease
    }
    
 
  h2, p {
    margin: 10px;
  }
  
.hiddenimg {
  display: none;
}

.canvas1 {
  border: 2px solid black;
}

.canvas2 {
  background: gold;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%,-50%);
  border: 5px solid black;
}
   
   
.gradient1 {
  
} 
    
#navbar { /* navigation bar */


  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-image: linear-gradient(to bottom, cornflowerblue, steelblue);
  border: 3px solid royalblue;
}

#navbar li {
   float: left;
}

#navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 7px 16px;
}