@keyframes swing {
    15% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }
    30% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    50% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }
    65% {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
    80% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
body{
  background:#f2e3ea;
  margin:0;
  padding:0;
  font-family: "cooper-black-std", serif;
font-weight: 400;
font-style: normal;
}
#logo{
  position: absolute;
  top:40vh;
  width:100vw;
  transition: 2s ease-out;
  z-index: 2;
}
.logoclicked #logo{
  top:0vh;
}
h1{
  margin:2vh auto;
  max-width:60vw;
  padding:0;
  transition: 2s ease-out;
}
.logoclicked h1{
  max-width:80vw;
}
h1 img{
  width:100%;
  height:auto;
}
h1 img:hover{
  animation: swing 1s ease;
}
.big_heart{
  width:3vw;
  transition: 2s ease-out;
}
.sml_heart1{
  width:2.5vw;
  transition: 2s ease-out;
}
.sml_heart2{
  width:2vw;
  transition: 2s ease-out;
}
.logoclicked .big_heart{
  width:5vw;
}
.big_heart img, .sml_heart1 img, .sml_heart2 img{
  width:100%;
  height:auto;
}
#big_heart_left{
  position: absolute;
  top:2.5vw;
  left:15.5vw;
  transition: 2s ease-out;
}
.logoclicked #big_heart_left{
  position: absolute;
  top:1.5vw;
  left:1.5vw;
}
#sml_heart1_left{
  position: absolute;
  top:0vw;
  left:18vw;
  transition: 2.5s ease-out;
}
.logoclicked #sml_heart1_left{
  opacity:0;
  left:10vw;
}
#sml_heart1_right{
  position: absolute;
  top:0vw;
  right:18vw;
  transition: 2.5s ease-out;
  z-index:-1;
}
.logoclicked #sml_heart1_right{
  opacity:0;
  right:10vw;
}
#sml_heart2_left{
  position: absolute;
  top:4.5vw;
  left:19vw;
  transition: 3s ease-out;
}
.logoclicked #sml_heart2_left{
  opacity:0;
  left:5vw;
}
#sml_heart2_right{
  position: absolute;
  top:4.5vw;
  right:19vw;
  transition: 3s ease-out;
  z-index:-1;
}
.logoclicked #sml_heart2_right{
  opacity:0;
  right:5vw;
}
#big_heart_right{
  position:absolute;
  top:2.5vw;
  right:15.5vw;
  transition: 2s ease-out;
}
.logoclicked #big_heart_right{
  position:absolute;
  top:1.5vw;
  right:1.5vw;
}
footer{
  position:fixed;
  bottom:0;
  padding:1vh;
  width:100vw;
  width:calc(100vw - 2vh);
  background:#fb99b7;
  opacity:0;
  transition: 2s ease-out 2s;
}
.logoclicked footer{
  opacity:1;
}
footer ul, #nav{
  list-style: none;
  padding:0;
  margin:0;
  text-align: center;
  font-size:1.5em;
}
footer ul li, #nav li{
  display:inline-block;
  padding:0 0.5vh;
}
footer a{
  text-decoration:none;
  color:#dc2f1c;
}
footer a:hover{
  color:#f2e3ea;
}
#main{
  width:80vw;
  padding:5vw 5vw 0;
  margin:5vw auto 0;
  border-left:#fb99b7 solid 2px;
  border-right:#fb99b7 solid 2px;
  min-height:20vh;
  opacity:0;
  transition: 2s ease-out 2.5s;
}
.logoclicked #main{
  opacity:1;
  min-height:80vh;
}
#nav li a{
  text-decoration: none;
  color:#fb99b7;
}
#nav li a:hover, .active{
  color:#dc2f1c !important;
}
#home_content{
  width:60vw;
  max-width:600px;
  rotate: -10deg;
  margin:20vh auto 0;
  text-align:center;
  font-size: 2.5em;
  color:#92b1ca;
  font-style: italic;
  line-height: 1.5em;
}
.home_button{
  background:#fb99b7;
  color:#dc2f1c;
  border:3px solid #dc2f1c;
  border-radius: 10px;
  filter: drop-shadow(-7px 7px 0px #dc2f1c);
  text-decoration: none;
  padding:10px;
  text-transform: uppercase;
  display: block;
  font-size: 0.75em;
}
.home_button:hover{
  animation: swing 1s ease;
}
h2{
  text-align: center;
  color:#fb99b7;
}
@media ( max-width : 500px ) and ( orientation : portrait ){
  #main{
    width:80vw;
    padding:8vw 5vw 0;
    margin:5vw auto 0;
    border-left:#fb99b7 solid 2px;
    border-right:#fb99b7 solid 2px;
    min-height:20vh;
  }
  .logoclicked #main{
    opacity:1;
    min-height:90vh;
  }
  #home_content{
    width:60vw;
    max-width:600px;
    rotate: -10deg;
    margin:10vh auto 0;
    text-align:center;
    font-size: 1.5em;
    color:#92b1ca;
    font-style: italic;
    line-height: 1.5em;
  }
  #nav{
    margin:2vh 0 0 0;
  }
}