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

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

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

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


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



.home a:hover{
    color:red;
    
}
/*
.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/00ea43cfde78d446a166ffaded08c806");

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

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


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


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



.highlight{
    background-color:red;
}

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

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


h1{
    margin: 10px;
}



.bigBold{
    font-weight: bold;
}



p{
    margin-top: 15px;
    margin-bottom: 20px;
    margin-left: 15px;
    margin-right: 15px;
}