nav{
   
   background-color:black; 
}

.navbar-toggler-icon{
    
    color:orange;
    
}
    



nav a{
    
    color: white;
}


body{
    color: red;
   
}






img{
    margin: auto;
    background-color: black;
    height: 500px;
    width: 500px;
}
footer{
    text-align: center;
    color:white;
    padding-top:0%;
    margin:auto;
    background-color:black;
    height: auto;

}

footer a{
    color: white;
    text-decoration: none;
    margin:auto;
}

footer a:hover{
    color:red;
    
}





.navbar a:hover {
    color: red !important;
}

.bigSection{
    animation: example 5s infinite;
    background-size: cover;
    background-position: center;
}
.parallax {
  background-image:url("https://codehs.com/uploads/c01ab63f419f8e3b9a39c44e46eda0ce");
  /* Set a specific height */
  min-height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  
  
}
.parallax2 {
  background-image:url("https://codehs.com/uploads/b9963ba369625fc0f93bb5fe38d5a8a5 ");
  /* Set a specific height */
  min-height: 500px;

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


@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}


.projectholder{
 
 border-style:solid;
 border-color:red;
 border-width:5px;
 
 
}


@keyframes color-change {
      0% {
        background-color: red; /
      }
      50% {
        background-color: blue; 
      }
      100% {
        background-color: green; 
      }
    }
    
    @keyframes color-change2 {
      0% {
        color: green; 
      }
      50% {
        color: red; 
      }
      100% {
        color: purple; 
      }
    }

.pictures{
    
    width:100%;
    height:100%;
    
}

header {
      
        padding: 20px;
        text-align: center;
        font:sans-serif;
        position:fill;
        animation: color-change 4s infinite alternate; 
      
      
      
        
        
    }
    
    

    
    
 header h1{
        
        animation: color-change2 4s infinite alternate; 
        
    }
    
html {
  scroll-behavior: smooth;
}
    
 
.pic-box img {
  position:center;
}





.pictures {
  display: flex;
  justify-content: center;   /* centers the row */
  align-items: center;       /* centers vertically */
  gap: 20px;                 /* spacing between images */
  height: 70vh;              /* takes 70% of screen height */
  margin-top: 20px;
}

.pictures img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 15px;
}