.willThisWork:hover{
    background-color:	#FFB6C1;
    <!important this changes the home>
}
.projectshover:hover{
    background-color:#CBC3E6;
}
.otherhover:hover{
    background-color:#40E0D0;
}
.homehover:hover{
    background-color:#;
}

html, body {
  overflow-x: hidden;
}
body {
  position: relative
}
@keyframes ColorChanger {
  from {background-color: red;
    padding-left:0px;}
  to {background-color: yellow;
    padding-left:100px;}
}

/* The element to apply the animation to */
.myColors {
  width: 600px;
  height: 100px;
  background-color: red;
  animation-name: ColorChanger;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
.parralax {
  /* The image used */
  background-image: url("https://codehs.com/uploads/276d93a862999c7b67797235e98887f4");

  /* Set a specific height */
  min-height: 1000px;

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


.parralaxtext{
    background-color:#313154;
   
    border:3px solid white;
    height:100px;
    text-align: center;
}

header{
    background-color:#334d63;
    color:;
    min-height:150px;
    text-align:center;
    padding-top:50px;
    background-image: url("https://codehs.com/uploads/0e239e7fb306054e4cef19b5add51c0c");
    
   
    
}
h1{
    color:#ffffff;
}
nav{
    background-color:#3a3a3d;
}
.footer {
    background-color:#334d63;
    min-height:150px;
    text-align:center;
    padding-top:50px;
    background-image: url("https://codehs.com/uploads/0e239e7fb306054e4cef19b5add51c0c");
    width: 100%;
    position:relative;

}
/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}
.box {
            background-color: black;
            height: 10vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .box a {
            padding: 15px;
            background-color: #fff;
            border-radius: 3px;
            text-decoration: none;
        }

        .modal {
            position: fixed;
            inset: 0;
            background: rgba(254,
                    126,
                    126,
                    0.7);
            display: none;
            align-items: center;
            justify-content: center;
        }

        .content {
            position: relative;
            background: white;
            padding: 1em 2em;
            border-radius: 4px;
        }

        .modal:target {
            display: flex;
        }
        
        
        
.biobox{
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
  background-color:powderblue;
  padding:right;
  display: flex;
  justify-content: space-around;
}
.comingsoon{
    margin: 0 auto
}
.biodetails{
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
  background-color:lightblue;
  display: flex;
  margin: auto;
 
}

    
.games{
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
  background-color:lightblue;
  padding:right;
  display: flex;
  justify-content: space-around;
}


.bio{
    display: flex;
    flex-direction:column;
    align-items:center;
    padding:20px;
    

}
.imagecontainer {
    
    overflow: hidden; /* Clip the image if it exceeds the container size */
    padding:50px;
    justify-content: space-between;
}



@media only screen and (max-width: 600px) {
  .parralaxtext{
    
   
    border:3px solid orange;
  
}

.parralax{
    background-attachment:scroll;
}


}
.flex-container {
    display: flex;
    justify-content: space-around;
}