/* GOOGLE FONT IMPORT */
@font-face {
    font-family: 'Flamenco';
    src: url(../FONTS/Flamenco/Flamenco-Regular.ttf);
}
* {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}
body {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   min-height: 100vh;
   font-family: 'Arvo', serif;
   color: rgb(255, 255, 255);
   line-height: 1.7em;
   letter-spacing: 1.7px;
   border: solid rgb(255, 75, 174) 2px;
}
header {
   position: fixed;
   z-index: -1;
}
#main {
   position: relative;
   width: 100%;
   min-height: 100vh;
   font-size: 18px;
}
.title {
   position: relative;
   text-align: center;
}
.title > h1 {
   color: rgba(240, 248, 255, 0);
   width: 50%;
   margin: 10px 25%;
   border: solid 2px rgb(95, 0, 247);
   border-radius: 2em;
   background-image: url(../PHOTOS/skymoon.png);
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   font-size: 44px;
   padding: 50px 50px;
}
.giftitle {
   border: 2px solid;
   border-radius: 10em;
   border-top-color: rgb(255, 0, 212, .80);
   border-bottom-color: rgb(132, 0, 255, .80);
   border-left-color: rgb(255, 0, 43, .80);
   border-right-color: rgba(0, 225, 255, .80);
   width: 400px;
}
.giftitle:hover {
   width: 600px;
}
.statement {
   border: ridge 2px rgb(95, 0, 247);
   background-color: rgba(0, 0, 0, 0.225);
   font-size: 17px;
   text-shadow: rgb(0, 0, 0) 1.5px 1px 4px;
   margin: 15px 15px;
   padding: 5px 5px;
}


@media screen and (max-width: 600px) {
   .title > h1 {
      font-size: 22px;
      padding: 5px 0px;
   }
   .giftitle {
      width: 175px;
   }
}