html{
    scroll-behavior:smooth
}

h1{
    font-variant:small-caps;
}

p{
    font-variant:small-caps;
}

.border{
    font-family: monospace
}

a:hover{
  text-decoration: underline;
  font-family: monospace
  animation: colorRotate 6s linear 0s infinite;
}

@keyframes colorRotate {
  from {
    color: #6666ff;
  }
  10% {
    color: #0099ff;
  }
  50% {
    color: #00ff00;
  }
  75% {
    color: #ff3399;
  }
  100% {
    color: #6666ff;
  }
}





a{
    text-align: center;
  text-decoration: underline;
  font-family: monospace;
}

hr{
    color:white;
    height:100%;
    width:100%;
}

.border3{
      border-radius:100px;
      color:white;
    
}


.bordercircle{
    border-radius:100px;
    height:200px;
    max-width:910px;
    margin:auto;
}


.bordersquare{
    border-radius:100px;
}



img{
    width:50px;
    height:5%;
}

.navbar{
    background-color:saddlebrown;
}

.stretch{
    
}

.sanity{
    margin:auto;
}

.btn{
    border-radius:100px;
}
  
    .parallax {
      /* The image used */
      background-image: url("https://codehs.com/uploads/bfc9965b8cb49608ce89e388f8f1676b");
    
    
      /* Set a specific height */
      min-height: 850px;
      min-width:400px;
    
      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }



@media only screen and (max-width: 980px) {
 
 .parallax {
    background-attachment: scroll;
   
  }
  
audio{
    width:100%;
    display:;
    
}