header{
    
    /*background-color: Bisque;
    margin-bottom:100px;*/
}

@keyframes example {
  from {background-color: yellow;}
  to {background-color: red;}
}

body{
    /*background-color: #BFA78F;
     width: 100%;
    height: 100px;
    animation-name: example;
    animation-duration: 0.1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    color: blue;
    font-size: 20px;
    */
    
}

img{
    padding: 5%;
    width: 45%;
}


footer{
    color:white;
    /*background-color: #BFA78F;*/
    text-decoration: none;
    padding-bottom: 500px;
    margin-bottom:100px;
    /*background-image:url("https://codehs.com/uploads/58f5bc004b4e65a67e0be23665de90d1");*/
}
footer a{
    color:white;
    text-decoration: none;
    transition: font-size 20s ease-in-out;
}


/* Home is commented out because we are on the homepage and do not want it to turn orange when the background is highlighted in orange */
/*
.home a:hover{
    color:orange;
    
}
*/
.bio a:hover{
    color:red;
    
}
.projects a:hover{
    color:red;
    
}
.todo a:hover{
    color:red;
    
}
.webapp a:hover{
    color:red;
    
}
.chatroom a:hover{
    color:red;
    
}
.firebase a:hover{
    color:red;
    
}
a:hover{
    color:red;
    
}


.parallax {
  /* The image used */
  background-image: url("https://codehs.com/uploads/30c73dd368c6cc1d804880a37631decc");

  /* Set a specific height */
  height: 90vh;
  

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Including this ensures padding and border are included in element's total width and height */
}


/*hide text if screen is <1000px*/
/*
@media only screen and (max-width: 1000px) {
  body {
    .navbar-brand {
    display: none;
    }
  }
}
*/


.container-fluid {
    /*background-color: #DECBBA;*/
}



.highlight{
    background-color:red;
}

.navbar-brand {
    margin-bottom: 8px;
}

.buttonArea{
    text-align: center;
    margin: 10px;
}


h1{
    margin: 10px;
}