/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: LavenderBlush;
  color: LightPink;
  font-family: LucidaHandwriting;
}

header{
  margin: 0 auto;
  width: 88%
}

/* Navigation
-----------------------------*/
nav ul{
  list-style: none;
  padding:0;
  display: flex;
  }
  nav ul li{
    margin-right: 0.5em;
  }
  
nav ul li a{ 
  padding: .1em;
  background: LightPink;
  border-radius: 20px;
  text-decoration: none;
  transition:1s;
}
  
nav ul li a:hover{
   background:#ff667d;
}

  .parallax, .parallax2{
    background-image: url(https://i.pinimg.com/originals/a1/af/87/a1af87e48c1bfacefc1d5c1337215e6d.gif);
    height: 90vh;
    background-size: cover;
    background-attachment: fixed;
    background-position: 50% 50%;
  }
  
  .parallax {
    backround-image: url(https://i.pinimg.com/originals/a1/af/87/a1af87e48c1bfacefc1d5c1337215e6d.gif);
  }
  
  .parallax2 {
    backround-image: url(https://i.pinimg.com/originals/84/74/2a/84742ad157baff50c1e7c0784192e398.gif);
  }
  
  /* Transform
  ---------------------*/
  
  body {
  background-color: Papayawhip;
  color: peru;
  font-family: LucidaHandwriting;
  
  }
  .rotate{
    transition: 1s;
    }
  
  .rotate:hover{
    transform: rotate(36000deg)
  }
  
  .scale{
    transition: 1s;
  }
  
  .scale:hover{
    transform: scale(1.2);
    }
    
  .skew{
    transition: 1s;
    }

  .skew:hover{
    transform: skew(-45deg);
    }
    
  .flip{
    position: relative;
    transform-style: preserve-3d;
    transition: 1s;
    }
  
  .flip:hover{
    transform: rotateY(180deg);
    }
  
  .front, .back{
    backface-visibility: hidden;
    }
    
  .back{
    position: absolute;
    top: 0;
    left: 0;
    transform: rotateY(180deg);
    }
  
  .image-size{
    width: 400px;
    height: 400px;
    }
    
/*Cool Button
-------------------------------------------*/

.button{
  background: #ffe6f5;
  color: #ffb3e9;
  padding: 15px 25px;
  border-radius: 15px;
  border: none;
  font-size: 24px;
  box-shadow: 0 9px #ffb3e9;
  transition: 0.25s;
  cursor: pointer;
  }
  
  
  .button:hover{
    background: #ff7ad9;
    }
    
  .button:active{
    transform: translateY(4px);
    box-shadow: 0 5px #ffb3e9;
    }
    
    
    
    /*Animation
    ---------------------*/
    
    @keyframes glow-text{
      0%{
        color: red;
      }
      50%{
        color: green;
      }
      100%{
        color: blue;
      }
      
    }
    
    .glow{
       animation-name:glow-text;
       animation-duration: 4s;
       animation-iteration-count: infinite;
       animation-direction: alternate;
    }
    
    @keyframes rotate-forever{
      100%{
        transform: rotate(3600deg);
        
      }
    }
    .inf-rotate{
      animation-name: route-forever;
      animation-duration: 4s;
      animation-iteration-count: infinite;
      animation-direction: normal;
      animation-timing-function: linear;
    }