/*
** Sarah's CSS file for normal basic version. 
** Some of these tags might be left empty so I can use it in another stylesheet. 
** "Flat-Curved" 
*/


/* ================ MY NAME ================ */
.title {
  position: relative;
  //padding-top: 0;
  text-align: center;
  margin: auto;
  /* FUNKY COLOURS */
  text-transform: uppercase;
  background-image: radial-gradient(circle,rgba(242, 200, 46, 1) 0%, rgba(232, 23, 166, 1) 68%, rgba(69, 63, 242, 1) 100%);
  );
  font-family: arial, sans-serif;
  font-weight: 900;
  transform: scale(1, 0.8);
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 5s linear infinite;
  font-size: 100px;
  z-index: 1;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}


/* ================ BODY ================ */
body {
  //background-color: white;
  background: #E817A6;
  background: linear-gradient(30deg,rgba(245, 223, 61, 1) 0%, rgba(235, 45, 187, 1) 100%);
  margin:0;
}

.header {
  background-color: white;
  position: relative;
  //z-index: 0;   /* keep header text above wave */
  //padding-top: -10px;
  margin-bottom: -15px;
  padding-top: 20px;
  height: 120px;
}  

.header::after {
  content: "";
  position: absolute; /* solution 1 */
  bottom: 0;
  left: 0;
  //display: block;
  width: 100%;
  height: 10vw;  /* wave height */
  
  /* background is your SVG wave */
  background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 70' preserveAspectRatio='none'>\
<path d='M 760 30 C 612 30 624 60 545 60 C 453 59 438 37 388 30 C 329 22 286 34 261 46 C 266 38 266 36 267 32 C 269 24 253 18 256 31 C 241 23 241 39 250 40 C 258 41 264 41 261 46 C 252 51 229 61 211 61 C 125 61 114 30 0 30 L 0 0 L 760 0 Z' fill='white'/>\
</svg>") no-repeat bottom center;

  background-size: 100% 100%;  /* stretches to full width & height */
  transform: translateY(70%); /* push it down by its own height - solution 1*/
  z-index: 0;
}

.main {
  padding-top: 120px;
  padding-bottom: 130px;
  // background: #f5df3d;
  // background: linear-gradient(30deg,rgba(245, 223, 61, 1) 0%, rgba(235, 45, 187, 1) 100%);
  z-index: 1;
  position: relative;
}

.content-box {
  border-radius: 20px;
  background-color: white;
  position: relative;
  
}

.footer {
  background-color: white;
  //height: 80px;
  //transform: translateY(200%);
  //padding-bottom: 0;
}

/* ================ BUTTONS ================ */
.button {
  //border-color: white;
  //border-radius: 5px;
  z-index: 2;
  
  //text-shadow: 1px 1px 8px;
  //text-shadow: 1px 1px 0 grey, 1px 2px 0 grey, 1px 3px 0 grey, 1px 4px 0 grey,
    1px 5px 0 grey, 1px 6px 0 grey, 1px 7px 0 grey, 1px 8px 0 grey,
    5px 13px 15px black;
  //padding:5px;
  
  //margin-bottom: 100px;
  //justify-content: center;
  //background-color: 'lightpink';
}

.button:hover {
  background-color: 'lightblue';
}

.right-button {

}

/* ================ THEME BUTTONS ================ */
.dropbtn {

}

.dropdown {
  //position: relative;
  //display: inline-block;
}

.dropdown-content {
  //border-radius: 2px 10px 10px 10px;
  //overflow: hidden;
}

.dropdown-content p {

}

.dropdown-content p.active {background-color: cyan;} /* CHANGE tHIS COlOUR */

.dropdown-content p.active:hover {background-color: lightblue;}

.dropdown-content p:hover {background-color: #f1f1f1} 

.dropdown:hover .dropdown-content {
  //display: block;
}

.dropdown:hover .dropbtn {
  //background-color: #f9f9f9; 
}

/* ================ SEASON BUTTONS ================ */
#seasonText{
    // height: 30px; // currently not doing anything
    //font-size: 40px;
    /* CURRENT PROBLEM: not exactly fitting in this gap */
    // max-width: 88%;                 
}

/* ================ SIGNATURE THANG ================ */
.sign {
  //text-align: right; 
  //margin-right: 20%;
  //font-size: small;
  z-index: 1;
  transform: translateY(-850%);
  //margin-top: -70px;
  //padding-bottom: 20px;
}

/* =================== WAVES ======================== */
.waves {
  position:relative;
  width: 100%;
  margin-top: -120px;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:120px;
  transform: translateY(-40%); /* push it up by its own height - solution 1*/
  z-index: 0;
}

.waves-container {
  display: block;
  height: 10px;
}

/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(3) {
  animation-delay: -2s;
  animation-duration: 7s;
}

.parallax > use:nth-child(4) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(5) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(6) {
  animation-delay: -3s;
  animation-duration: 10s;
}

.parallax > use:nth-child(7) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(8) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(9) {
  animation-delay: -4s;
  animation-duration: 13s;
}

.parallax > use:nth-child(10) {
  animation-delay: -5s;
  animation-duration: 20s;
}
.parallax > use:nth-child(11) {
  animation-delay: -5s;
  animation-duration: 20s;
}
.parallax > use:nth-child(12) {
  animation-delay: -5s;
  animation-duration: 20s;
}

@keyframes move-forever {
  0% {
   transform: translate3d(-860px,0,0);
  }
  100% { 
    transform: translate3d(-100px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
}