.skip {
  position: absolute;
  top: -20px;
  
}


a.skip:focus {
  background-color: white;
  position: absolute;
  top: 20px;
  padding: 2%;
  color: #00274C;
}



    
body {
    background-color: black;
    color: white;
    font-family: "Instrument Sans", sans-serif;
    

    
}


div.welcome {
    display: grid;
    grid-template-columns: 33% 33% 33% ;
    grid-template-rows: 20% 20% 20% 20% 20%;
    
}

.about {
    grid-column: 3/4;
    grid-row: 2/3;
}

 img.fireworks {

    z-index: -1;
    width: 100%;
    margin: auto;
    grid-column: 1/-1;
    grid-row: 1/-1;
 }

 .heading {
    grid-column: 2/3;
    grid-row: 1/2;
 }

 /* javacript  */

 @keyframes glowIn {
    from {
      opacity: 0;
    }
    65% {
      opacity: 1;
      text-shadow: 0 0 25px white;
    }
    75% {
      opacity: 1;
    }
    to {
      opacity: 0.7;
    }
  }
  

  
.glowIn {
    
    animation: glowIn 0.8s;


  }

  span {
    animation: glowIn 0.8s both;
  }

span:hover{

  opacity: 1;
  text-shadow: 0 0 25px white;
  

}


.eachword:hover {
  transform: translateY(-20px);
  transform: scaleY(1.2);


}

/* 
end of javascript code */



.nav {

  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;
  margin-bottom: 65px;
  margin-top: 40px;
}

ul {
  list-style-type: none;
  color: white;
}

.nav > li {
  

  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
  font-size: 28px;
  
  

  
}


a {
  text-decoration: none;
  color: white;
}


li:hover .link {

  background-color:white;
  color: black;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
  font-size: 28px;
  font-weight: bolder;
  border: none;
  box-shadow: 0 0 70px red;
  
}




.home .link {
  background-color:white;
  color: black;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
  font-size: 28px;
  font-weight: bolder;
  border: none;
  box-shadow: 0 0 70px red;
}




footer a {
  color: white;
  text-decoration: none;
}
  
footer {
  
  background-color:black;
  color: white;
  text-align: center;
  margin-top: auto;
}




body {
  min-height: 100vh;
  
}




/* nature page code  */

.video {

display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: center;
height: 600px;
}




.videoButtons {
  
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 1fr 1;
  display: grid;
  margin: auto;
  padding: 5px;


}

button {
  width:fit-content;
}

#play {
  grid-column: 2/3;
  justify-self: end;

}


.natureHeading {
  display: flex;
  font-size: 30px;
  margin-bottom: 15px;
}

.natureH1 {
  margin: auto;
  
}


.nature .link {
  background-color:white;
  color: black;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
  font-size: 28px;
  font-weight: bolder;
  border: none;
  box-shadow: 0 0 70px red;
}

.mute {
  display: flex;
}

#mute {
  margin: auto;
}

button {
  background-color: black;
  color: white;
  font-weight: bold;
}


.galleryContainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  gap: 7px;
}

.galleryTitle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-weight: bolder;
  font-size: 27px;
  border-style: solid;
  border-color: azure;
  width: 100%;
  margin-top: 70px;
  margin-bottom: 15px;

  
 
}


@keyframes imagepop {
  0%   {transform: scale(1)}
  25%  {transform: scale(1.1)}
  50%  {transform:scale(1.2)}
  100% {transform: scale(1.1);}
}


img:hover {
  animation: imagepop 1s infinite;
  border-style: solid;
  border-width: 5px;
  border-color: black;
}



@keyframes imagepop {
  0%   {transform: scale(1)}
  25%  {transform: scale(1.1)}
  50%  {transform:scale(1.2)}
  100% {transform: scale(1.1);}
}

/* end of nature page code */




/* start of about me page code  */





@media screen and (min-width: 1000px) {




.aboutme .link {
  background-color:white;
  color: black;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
  font-size: 28px;
  font-weight: bolder;
  border: none;
  box-shadow: 0 0 70px red;
}


.grid {
  grid-template-columns: 33% 33% 33%;
  display: grid;
  
  
}


img.rachel {
  animation: none;
  grid-column: 2/4;
  margin-left: 20px;
}


.aboutrachel {
  padding: 30px;
  margin-top: 25px;
  grid-column: 1/2;
  grid-row: 1/2;

}


/* 404 page code  */

.main404 {
  flex-direction: column;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
}



.page {
  font-size: larger;
  color: white;
}

.error {
  background-color: black;
  font-size: 100px;
  color: white;
}

.body404 {
  background-color: black
}


.button {
  background-color: white;
}

.button a  {
  color: black;
  font-size: x-large;
 
}
.button:hover {
  background-color: pink;

}




@media (prefers-reduced-motion) {
  /* styles to apply if a user's device settings are set to reduced motion */

  img:hover {
    animation: none;
  }
  
  img {
    animation: none;  
  
  }

}
}