
@font-face {
  font-family: 'Product Sans';
  src: URL('/fonts/Product Sans Regular.ttf') format('truetype');
}


*{font-family: 'Product Sans', sans-serif;}

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


html {
  background: rgb(50,18,122);
  background: linear-gradient(180deg, rgba(50,18,122,1) 20%, rgba(75,0,130,1) 80%, rgba(50,18,122,1) 100%);
}

body {
    color: #fff;
    margin: 1%;
    
}

h1{font-size:4.5rem}
h2{font-size:2rem}
h3{font-size:1.375rem}
h4{font-size:1.125rem}
h5{font-size:1rem}
h6{font-size:.875rem}
p{font-size:1.125rem;font-weight:200;line-height:1.8}
.font-light{font-weight:300}
.font-regular{font-weight:400}
.font-heavy{font-weight:700}
.left{text-align:left}
.right{text-align:right}
.center{text-align:center}
.justify{text-align:justify}
.full-width{width: 100%;}
 
input:focus{
    outline: none;
}

.bounce {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font: normal bold 8rem "Product Sans", sans-serif;
  white-space: nowrap;
}

.letter {
  display: inline-block;
  font: normal bold 8rem "Product Sans", sans-serif;
}

.waviy {
  position: relative;
}
.waviy span {
  position: relative;
  display: inline-block;
  font-size: 2em;
  color: #fff;
  text-transform: uppercase;
  animation: flip 10s infinite;
  animation-delay: calc(.1s * var(--i))
}
@keyframes flip {
  0%,80% {
    transform: rotateY(360deg) 
  }
}


.googleSearch .googleInput {
    width: 66vw;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #dadce0;
    box-shadow: none;
    border-radius: 24px;
    z-index: 3;
    margin: 2vh auto;
    line-height: 40px;
    height: 40px !important;
    padding: 5px 10px;
    color:  #FF9472;
    font-size: 1.2rem;
  }


  .googleSearch .google-buttons button {
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
    color: #dadce0;
    cursor: default;
    font-family: arial,sans-serif;
    font-size: 13px;
    font-weight: 700;
    margin: 11px 4px;
    min-width: 54px;
    padding: 0 16px;
    text-align: center;
    height: 36px;
    line-height: 27px;
  }

  .googleSearch .google-buttons button:hover {
    border: 1px solid #dadce0;
    border-radius: 4px;
  }


  footer p {
    font-size: 0.8rem;
    color: #dadce0;
    text-align: center;
  }


  footer a, footer a:hover, footer a:visited, footer a:focus {
    color: #dadce0;
    text-decoration: none;
  }

  .snowflakes, .prideflakes {
    width: 100%;
    height: 110%;
    position: fixed; top: -10%; left: 0;
    overflow: hidden;
    z-index: -100;
}

.snowflakes i, .snowflakes i:after, .snowflakes i:before { background: rgba(182,209,252,1); }
.prideflakes i, .prideflakes i:after, .prideflakes i:before { 
    background: linear-gradient(to right, rgb(237, 34, 36), rgb(243, 91, 34), rgb(249, 150, 33), rgb(245, 193, 30), rgb(241, 235, 27) 27%, rgb(241, 235, 27), rgb(241, 235, 27) 33%, rgb(99, 199, 32), rgb(12, 155, 73), rgb(33, 135, 141), rgb(57, 84, 165), rgb(97, 55, 155), rgb(147, 40, 142))
}


.snowflakes i, .prideflakes i {
    display: inline-block;
    -webkit-animation: snowflakes 3s linear 2s 20;
    -moz-animation: snowflakes 3s linear 2s 20;
    position: relative;
}
.snowflakes i:after, .snowflakes i:before, .prideflakes i:after, .prideflakes i:before {
    height: 100%;
    width: 100%;
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-transform: rotate(120deg);
}
.snowflakes i:before, .prideflakes i:before  { -webkit-transform: rotate(240deg); }



@-webkit-keyframes snowflakes {
    0% {
        -webkit-transform: translate3d(0,0,0) rotate(0deg) scale(0.6);
    }
    100% {
        -webkit-transform: translate3d(15px, 1200px, 0px) rotate(360deg) scale(0.6);
    };
}

.snowflakes i:nth-child(3n), .prideflakes i:nth-child(3n) {
    width: 12px; height: 4px;
    -webkit-animation-duration: 6s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: right -45px;
}

.snowflakes i:nth-child(3n+1), .prideflakes i:nth-child(3n+1)  {
    width: 16px; height: 6px;
    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: right -30px;
}

.snowflakes i:nth-child(3n+2), .prideflakes i:nth-child(3n+2)  {
    width: 24px; height: 8px;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: right -15px;
}
    
/* different delays so they don't all start at the same time */
.snowflakes i:nth-child(7n), .prideflakes i:nth-child(7n)  {
opacity:.3;
-webkit-animation-delay: 0s;
-webkit-animation-timing-function:ease-in;
}
.snowflakes i:nth-child(7n+1), .prideflakes i:nth-child(7n+1)  {
opacity:.4;
-webkit-animation-delay: 1s;
-webkit-animation-timing-function:ease-out;
}
.snowflakes i:nth-child(7n+2), .prideflakes i:nth-child(7n+3)  {
opacity:.5;
-webkit-animation-delay: 1.5s;
-webkit-animation-timing-function:linear;
}
.snowflakes i:nth-child(7n+3), .prideflakes i:nth-child(7n+3)  {
opacity:.6;
-webkit-animation-delay: 2s;
-webkit-animation-timing-function:ease-in;
}
.snowflakes i:nth-child(7n+4), .prideflakes i:nth-child(7n+4)  {
opacity:.7;
-webkit-animation-delay: 2.5s;
-webkit-animation-timing-function:linear;
}
.snowflakes i:nth-child(7n+5), .prideflakes i:nth-child(7n+5)  {
opacity:.8;
-webkit-animation-delay: 3s;
-webkit-animation-timing-function:ease-out;
}
.snowflakes i:nth-child(7n+6), .prideflakes i:nth-child(7n+6)  {
opacity:.9;
-webkit-animation-delay: 3.5s;
-webkit-animation-timing-function:ease-in;
}