@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: 'NewYork';
    src: url('fonts/NewYork.eot');
    src: url('fonts/NewYork.eot?#iefix') format('embedded-opentype'),
        url('fonts/NewYork.woff2') format('woff2'),
        url('fonts/NewYork.woff') format('woff'),
        url('fonts/NewYork.ttf') format('truetype'),
        url('fonts/NewYork.svg#NewYork') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: 'Reenie Beanie';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/reeniebeanie/v11/z7NSdR76eDkaJKZJFkkjuvWxXPq1qw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*{
font-family: 'Raleway', sans-serif;
font-size: clamp(15px, 1.2vw, 20px);
font-weight: 500;
line-height: 1.7em;

padding: 0;
max-width: 100%;
margin: 0%!important;
box-sizing: border-box;
}

body {
background: rgba(250, 247, 243, 1);
display: grid;
grid-template-columns: 100%;
grid-template-areas:
  "header"
  "content"
  "activity"
  "NEXT"
  "footer";
}

/* LOADING PAGE */
.loadcontainer {
   position: fixed;
   z-index: 99;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(250, 247, 243, 1);
   display:flex;
   justify-content: center;
   align-items: center;
}

.loader {
  display: flex;
  width: 35%;
  height: 5em;
  position: relative;
  animation: loader 2s infinite ease;
  background: rgba(250, 247, 243, 1);
}

.loader span{
    position: absolute;
    display: block;
    background: #ddd;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    top: -20px;
    perspective: 100000px;
}
.loader span:nth-child(1) {
    left:60px;
    animation: bounce2 1s cubic-bezier(0.04, 0.35, 0, 1) infinite;
    animation-delay: 0s;
    background: #FF6666;
}
.loader span:nth-child(2) {
    left:20px;
    animation: bounce2 1s cubic-bezier(0.04, 0.35, 0, 1) infinite;
    animation-delay: .2s;
    background: #87CEFA;
}
.loader span:nth-child(3) {
    left:-20px;
    animation: bounce2 1s cubic-bezier(0.04, 0.35, 0, 1) infinite;
    animation-delay: .4s;
    background: #FFE445;
}
.loader span:nth-child(4) {
    left: -60px;
    animation: bounce2 1s cubic-bezier(0.04, 0.35, 0, 1) infinite;
    animation-delay: .6s;
    background: #9DE24F;
}

@keyframes bounce2 {
    0%, 75%, 100% {
        transform: translateY(0px);
    }
    25% {
        transform: translateY(-30px);
    }
}

.loadcontainer.hidden {
  animation: fadeOut 1s;
  animation-fill-mode: forwards;
}

@keyframes fadeOut {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* PROGRESS BAR */
.progress {
	background-color: #cfcfcf;
	border-radius: 20px;
	position: relative;
	margin: 15px 0;
	height: clamp(5px, 10vw, 15px);
	width: clamp(150px, 80vw, 560px);
}

.progress-done {
  background: url("../img/pattern.svg");
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 0;
	opacity: 0;
	transition: 2s ease 0.5s;
}

/* NAVIGATION MENU */
.nav-container .menu-icon {
  position: fixed;
  top: clamp(12px, 5vw, 36px);
  right: clamp(16px, 5vw, 48px);
  font-size: 30px;
  cursor: pointer;
  z-index: 50;
}

.menu-icon img {
  width: clamp(30px, 5vw, 45px);
  height: clamp(30px, 5vw, 45px);
}

.menu-container .closebtn {
  position: absolute;
  top: clamp(12px, 5vw, 36px);
  right: clamp(16px, 5vw, 48px);
  font-size: 30px;
  z-index: 100;
  cursor: pointer;
}

.closebtn img{
  width: clamp(30px, 5vw, 45px);
  height: clamp(30px, 5vw, 45px);
}

.menu-container {
  height: 0%;
  width: 100%;
  display: flex;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 100;
  background: rgba(250, 247, 243, 0.95);
  overflow: hidden;
  transition: 1s ease-in-out;
}

.menu-container-END {
  height: 0%;
  width: 100%;
  display: flex;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 100;
  background: rgba(31, 31, 41,0.95);
  overflow: hidden;
  transition: 1s ease-in-out;
}

.menu-container-END .closebtn {
  position: absolute;
  top: clamp(12px, 5vw, 36px);
  right: clamp(16px, 5vw, 48px);
  font-size: 30px;
  z-index: 100;
  cursor: pointer;
}

.menu-column {
  width: 50%;
  padding-top: clamp(40px, 10vh, 70px);
  padding-right: clamp(10px, 5vw, 100px);
  padding-left: clamp(10px, 5vw, 100px);
}

.menu-item p {
  text-decoration: none;
  font-size: clamp(20px, 5vw, 40px);
  color: rgba(32, 31, 41, 1);
  font-family: 'NewYork', 'Yeseva One',Century Gothic, CenturyGothic, Didot, serif;
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: clamp(20px, 100vh, 35px);
  transition: 1s ease-in-out;
  text-align: center;
}

.menu-item-d p {
  text-decoration: none;
  font-size: clamp(20px, 5vw, 40px);
  color: rgba(254, 228, 70, 1);
  font-family: 'NewYork', 'Yeseva One',Century Gothic, CenturyGothic, Didot, serif;
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: clamp(20px, 100vh, 35px);
  transition: 1s ease-in-out;
  text-align: center;
}

/* MENU ITEM OVERLAP */
.menu-item p, .menu-item-d p{
  grid-area: overlap;
  align-self: center;
  justify-self: center;
}

.menu-item a, .menu-item-d a{
  grid-area: overlap;
  align-self: center;
  justify-self: center;
}

.menu-item, .menu-item-d {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-template-areas: "overlap";
}

/* MENU ITEM HOVER EFFECT*/
.menu-item img, .menu-item-d img {
    opacity: 0;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
.menu-item img:hover, .menu-item-d img:hover {
    opacity: 1.0;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
    transition: opacity .55s ease-in-out;
}

/* HOME HEADER */
#confetti-back {
  position: absolute;
  z-index: 1;
}

#moldinghappiness {
  position: absolute;
  width: clamp(100px, 30vw, 500px);
  height: clamp(100px, 30vw, 500px);
  top: 5%;
  left: 3%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
}

video::-webkit-media-controls-panel {
display: none;
opacity: 1;
}

#happydance {
  position: absolute;
  width: clamp(70px, 20vw, 500px);
  height: clamp(70px, 20vw, 500px);
  top: 5%;
  left: 3%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
}

#confetti-front {
  position: absolute;
  z-index: 4;
}

.HOME-header {
  grid-area: header;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.HOME-header img {
  position: absolute;
  top: 0;
  left: 0;
  width: 105%;
  height: 105%;
  object-fit: cover;
}

#happiness-text {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  align-content: center;
}

#happiness-text h1 {
  font-size: clamp(15px, 12vw, 130px);

  color: rgba(32, 31, 41, 1);
  font-family: 'NewYork', 'Yeseva One',Century Gothic, CenturyGothic, Didot, serif;
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: 1em;
}

#happiness-text img {
  position: relative;
  height: 9%;
  width: 9%;
}

#practical-guide {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  align-content: center;
}

#practical-guide img {
  position: relative;
  height: clamp(1em, 5vw, 4em);
  width: clamp(1em, 5vw, 4em);
}

#practical-guide h3 {
  font-size: clamp(15px, 8vw, 90px);

  color: rgba(32, 31, 41, 1);
  font-family: 'NewYork', 'Yeseva One',Century Gothic, CenturyGothic, Didot, serif;
  letter-spacing: 0.04em;
  line-height: 1em;
}

#HOME-header-text {
  position: absolute;
  z-index: 3;
  padding: 0 10%;
}

#HOME-header-text h4 {
  position: relative;
  font-family: 'Raleway';
  font-weight: 400;
  font-size: clamp(12px, 2vw, 20px);
  padding: 5% 0;
  color: rgba(32, 31, 41, 1);
  line-height: 1.2em;
  text-align: right;
}

.bouncing-ball {
  position: absolute;
  right: 10%;
  width: max(20px,2%);
  padding-bottom: max(20px,2%);
  height: 0;
  border-radius: 50%;
  background-color: #B694D3;

  animation: bounce 0.5s;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(.5,0.05,1,.5);
  animation-iteration-count: infinite;
}

@keyframes bounce {
  from { transform: translate3d(0, 0, 0);     }
  to   { transform: translate3d(0, 300px, 0); }
}

.bouncing-ball-pages {
  position: absolute;
  right: 3%;
  width: max(20px,2%);
  padding-bottom: max(20px,2%);
  height: 0;
  border-radius: 50%;
  background-color: #B694D3;

  animation: bounce 0.5s;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(.5,0.05,1,.5);
  animation-iteration-count: infinite;
}

@keyframes bounce {
  from { transform: translate3d(0, 0, 0);     }
  to   { transform: translate3d(0, 300px, 0); }
}

/* HEADER */
.header {
  grid-area: header;
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  padding: 0 5%;
  align-items: center;
  align-content: center;
}

.header-title h6 {
  font-size: clamp(15px, 5vw, 30px);
  line-height: 2em;
  color: #A4A4A4;
}

.header-title h1 {
  font-size: clamp(15px, 12vw, 100px);
  color: rgba(32, 31, 41, 1);
  font-family: 'NewYork', 'Yeseva One',Century Gothic, CenturyGothic, Didot, serif;
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: 1em;
}

/* CONTENT */
.flex-container {
  grid-area: content;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  border-top-left-radius: 100vh;
  border-top-right-radius: 100vh;

  position: relative;
  width:100%; height: 100%;
  background-color: white;
  padding: 5% 5% 0 5%;
}

.flex-container-END {
  grid-area: content;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;


  position: relative;
  width:100%;
  background-color: #1f1f29;
  padding: 5% 5% 0 5%;
}

.flex-fullspan{
  width: 100%;
  padding: 10% 28%;
  justify-content: center;
}

.flex-item {
  width: 50%;
  padding: 5% 5%;
}

.flex-item-none {
  width: 50%;
  padding: 0;
}

.big-heading {
  font-size: clamp(40px, 5vw, 70px);
  color: rgba(32, 31, 41, 1);
  font-family: 'NewYork', 'Yeseva One',Century Gothic, CenturyGothic, Didot, serif;
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: 1em;
}

.small-heading {
  font-size: clamp(30px, 2.5vw, 60px);
  color: rgba(32, 31, 41, 1);
  font-family: 'NewYork', 'Yeseva One',Century Gothic, CenturyGothic, Didot, serif;
  font-style;
  letter-spacing: 0.04em;
  line-height: 1.2em;
}

#pronunciation {
  font-size: clamp(20px, 2vw, 40px);
  font-weight: 400;
  color: rgba(32, 31, 41, 1);
  line-height: 2em;
}

#noun {
  font-size: clamp(20px, 2vw, 40px);
  font-style: italic;
  font-weight: 400;
  color: rgba(32, 31, 41, 1);
  line-height: 2em;
}

#innervoice {
  font-weight: 400;
  font-size: clamp(14px, 1.7vw, 20px);
  color: rgba(32, 31, 41, 1);
  line-height: 1.5em;
  padding: clamp(3% 0, 2vh 0, 5% 0);
  text-align: left;
}

.info-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* TEXT FADE IN */

.big-heading, .small-heading, .sub-heading, .flex-item p, .flex-fullspan p {
  opacity: 0;
  transition: opacity 250ms ease-in;
}

.big-heading.appear, .small-heading.appear, .sub-heading.appear, .flex-item p.appear, .flex-fullspan p.appear  {
  opacity: 1;
}

/* IMAGE SETTINGS */

.flex-item-img {
  width: 50%;
  padding: 5% 5%;
  overflow: hidden;
}

.flex-item-img img {
  border-radius: 2em;
}

figcaption, figcaption a {
  font-size: clamp(12px, 1vw, 15px);
  text-align: center;
}

/* ACTIVITY */
.activity-container {
  grid-area: activity;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  position: relative;
  width:100%;
  background: url("../img/papertexture.svg");
  padding: 0 5%
}

.flex-phone{
  width: 50%;
  padding: 10% 14%;
  border-radius: 2em;
}

.flex-phone video{
  border-radius: 1em;
}

.sub-heading {
  font-size: clamp(30px, 2.2vw, 60px);
  color: rgba(32, 31, 41, 1);
  font-family: 'NewYork', 'Yeseva One',Century Gothic, CenturyGothic, Didot, serif;
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: 1em;
}

.moonphases {
  padding: 0 5% 15% 5%;
}

.moonphases img {
  border-radius: 50em;
}

#journaling {
  overflow: hidden;
  width: 100%;
  padding-right: clamp(5px, 25%, 500px);
  padding-left: clamp(5px, 25%, 500px);
  justify-content: center;
}

#journaling p {
  font-family: 'Reenie Beanie';
  font-size: clamp(30px, 3vw, 70px);
  line-height: 1.5em;
}

#positive-traits:before {
  font-family: 'Reenie Beanie';
  font-size: clamp(30px, 3vw, 70px);
  content: '';
  animation: animate infinite 8s;
}

@keyframes animate{
  0% {
    content: '(+ trait)';
  }
  20% {
    content: '(+ trait)';
  }
  40% {
    content: 'creative';
  }
  60% {
    content: 'clever';
  }
  80% {
    content: 'helpful';
  }
  100% {
    content: 'studious';
  }
}

/* ANIMATE VIDEO ON SCROLL */
.sticky-scroll {
  width: 50%;
  padding: 5%;
}

#set-height {
  display: block;
}

#v0 {
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
  bottom: 0;
  right: 0;
  border-radius: 50%;
}

/* DRESS UP GAME */
.flex-item-game {
  position: relative;
  width: 50%;
  padding: 5%;
}

.flex-item-game ul{
  display: flex;
  flex-wrap: wrap;
	list-style-type: none;
}

.flex-item-game button {
  display: inline-block;
  color: #eeeeee;
  background-color: #0a7354;
  border: 2px solid white;
  border-radius: 10px;
  text-align: center;
  padding: clamp(3px, 3vw, 7px);
  width: clamp(50px, 37vw, 120px);
}

.game-images {
  width: clamp(300px, 40vw, 500px);
  height: clamp(365px, 40vw, 609px);
  overflow: hidden;
}

.game-images img {
  object-fit: contain;
  display:inline-block;
  width: clamp(300px, 40vw, 500px);
  height: clamp(365px, 40vw, 609px);
  position: absolute;
}

#character {
z-index: 1;
}

.shirt{
	visibility:hidden;
  z-index: 2;
}

.hair{
	visibility:hidden;
  z-index: 3;
}

.extra{
	visibility:hidden;
  z-index: 4;
}

.earring{
	visibility:hidden;
  z-index: 5;
}

/* NEXT */
.NEXT-bouncing-ball {
  position: absolute;
  left: 2%;
  width: max(20px,2%);
  padding-bottom: max(20px,2%);
  height: 0;
  border-radius: 50%;
  background-color: #B694D3;
  vertical-align: middle;
  align-self: center;

  animation: bounce2 1s;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(.5,0.05,1,.5);
  animation-iteration-count: infinite;
}

@keyframes bounce2 {
  from { transform: translate3d(0, 0, 0);     }
  to   { transform: translate3d(380px,0, 0); }
}

.NEXT {
  grid-area: NEXT;
  display: flex;
  background: rgba(250, 247, 243, 1);
}

.NEXT-button {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  padding-left: clamp(50px,30vw,700px);
  padding-top: 4em;
  padding-bottom: 4em;
}

.NEXT-button h1 {
  font-size: clamp(50px, 25vw, 500px);
  color: rgba(32, 31, 41, 1);
  font-family: 'NewYork', 'Yeseva One',Century Gothic, CenturyGothic, Didot, serif;
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: 1em;
}

.NEXT-button h1, .NEXT-button a{
  text-decoration: none;
  border-bottom: 2px solid rgba(0, 0, 0 ,0);
  transition: border-bottom 300ms;
}
.NEXT-button h1:hover, .NEXT-button a:hover{
  border-bottom: clamp(2px, 5vw, 3px) solid rgba(32, 31, 41, 1);
}

/* FOOTER */
footer {
  grid-area: footer;
  background: white;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  position: relative;
  width:100%;
  padding: 0 5%;
}

.flex-ref-2 {
  width: 50%;
  padding: 5% 5%;
}

/* MEDIA QUERIES */
@media (max-width: 1024px) and (min-width:0px) {

  .flex-fullspan {
    padding: 10% 5%;
  }

  .flex-item {
    width: 100%;
    padding: 10% 5%;
  }

  .flex-item-game {
    width: 100%;
    padding: 10% 5%;
  }

  .flex-item-img{
    width: 100%;
    padding: 10% 5%;
  }

  .flex-phone{
    width: 100%;
    padding: 10% 5%;
  }

  .flex-ref-2 {
    width: 100%;
    padding: 0 5% 5% 5%;
  }

  .flex-item-none {
    display: none;
  }

  .sticky-scroll {
    display: none;
  }

  .bouncing-ball-pages {
    display: none;
  }

  #set-height {
    display: none;
  }

  #confetti-front, #confetti-back {
    z-index: 1;
    opacity: 50%;
  }

  .header {
    height: auto;
}

@media (max-width:600px) and (min-width:0px) {

  /* HOME HEADER */
  #moldinghappiness, #happydance {
    width: clamp(180px, 90vw, 950px);
    height: clamp(180px, 90vw, 950px);
    top: 10%;
  }

  #HOME-header-text {
    position: absolute;
    z-index: 3;
    padding: 10%;
    top: 60%;
  }

  .bouncing-ball {
    bottom: 30%;
  }

  @keyframes bounce2 {
    from { transform: translate3d(0, 0, 0);     }
    to   { transform: translate3d(60px,0, 0); }
  }
}


@media (max-width: 1024px) and (min-width:601px) {

    @keyframes bounce2 {
      from { transform: translate3d(0, 0, 0);     }
      to   { transform: translate3d(200px,0, 0); }
    }
  }
}

@media (min-width: 1024px) {
  .moonphases {
    display: none;
  }
}