/* Import font family Coming Soon from Google */
@import url('https://fonts.googleapis.com/css2?family=Coming+Soon&display=swap');

/* Global Style */
* {
  font-family: Coming Soon;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

html, body {
  height: 100%;
  width: 100%;
  
  /* Prevent scrolling outside the container */
  
  overflow: hidden;
}

body {
  /* Base flex grid display */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  /* Containers outline for debugging if needed */
  border: 2px solid black;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 1), 0 2px 6px 0 rgba(0, 0, 0, 1);
  
  /* Night Sky: Background Image */
  /* Sourced from: https://unsplash.com/s/photos/night-sky */
  background-image: url("images/night.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


/* 
  Main Flexbox Container 
  - The information for each section is contained here
  - Flex direction = column to stack sections vertically
*/
main {
  /* Position the contents */
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  /* gap: 2%; */
  padding: 2%;
  margin: auto;
  max-width: 60%;
  
  /* Background transparent */
  background: rgba(128, 128, 128, 0.8);
  border-radius: 14px;
}


/* 
  Style Contents Section
*/
/* Introduction Screen */
#intro {
  height: 100%;
  width: 100%;

  /* Style background */
  background: linear-gradient(135deg, #651818 0%, #6c5334 50%, #505410 100%);
  text-align: center;
  margin: auto;
  /* Might need to adjust this padding... */
  padding: 20% 0;
}
#intro_text {
	-webkit-animation: text-flicker-in-glow 4s linear both;
  animation: text-flicker-in-glow 4s linear both;
}
#intro_btn_sleep {
  margin-top: 5%;
  padding: 2% 5%;
  font-size: 1.5em;
  border-radius: 14px;
  border: none;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 1), 0 2px 6px 0 rgba(0, 0, 0, 1);
  
  /* Style button */
  background-color: #e94560;
  color: white;
  cursor: pointer;

  /* Animation */
  -webkit-animation: text-flicker-in-glow 4s linear both;
  animation: text-flicker-in-glow 4s linear both;
}

/* Handle the appearance of contents */
#about_me, #interests, #projects, #extras, #contact {
  display: none;
}


/*
  Navigation Sidebar
*/
nav {
  position: sticky;
  float: left;
  width: 20%;
  display: flex;
  flex-direction: column;
  
  /* Style Contents */
  align-items: center;
  justify-content: center;
  /* text-align: center; */
  
  /* Style box */
  background: rgba(128, 128, 128, 0.8);
  border-radius: 14px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 1), 0 2px 6px 0 rgba(0, 0, 0, 1);
  left: 6%;
  z-index: 10;
}

nav li {
  list-style-type: none;
  padding: 4% 0%;
  text-align: center;
}

nav button {
  width: 80%;
  padding: 4% 0%;
  font-size: 1.2em;
  border-radius: 14px;
  border: none;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 1), 0 2px 6px 0 rgba(0, 0, 0, 1);
  
  /* Style button */
  background-color: #e94560;
  color: transparent;
  
  /* Change cursor on hover */
  cursor: pointer;
}

nav button:hover {
  background-color: #d7374c;
  background-color: rgba(255, 255, 255, 0.6);
  background-blend-mode: lighten;
  color: black;
  font-weight: bolder;
	-webkit-animation: pulsate-fwd 2s ease-in-out infinite both;
  animation: pulsate-fwd 2s ease-in-out infinite both;
}
/* Reusing old images from past projects as background images */
#intro_btn_wake {
  background-color: #51887f;
  background-image: url("images/logo.png");
  background-position: center;
  background-size: cover;

  /* Animation */
  -webkit-animation: blink-1 6s 1s infinite both;
  animation: blink-1 6s 1s infinite both;
}
#home_btn {
  background-image: url("images/dance.gif");
  background-position: center;
  background-size: cover;
}
#about_me_btn {
  background-image: url("images/neco.png");
  background-size: cover;
}
#interests_btn {
  background-image: url("images/rabbit.png");
  background-position: center;
  background-size: cover;
}
#projects_btn {
  background-image: url("images/jump.jpg");
  background-position: center;
  background-size: cover;
}
#extras_btn {
  background-image: url("images/peek.gif");
  background-position: center;
  background-size: cover;
}
#contact_btn {
  background-image: url("images/pat.gif");
  background-position: center;
  background-size: cover;
}




/*
  Animation
*/
/* ----------------------------------------------
 * Generated by Animista on 2025-9-10 19:28:5
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation pulsate-fwd
 * ----------------------------------------
 */
@-webkit-keyframes pulsate-fwd {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes pulsate-fwd {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

/**
 * ----------------------------------------
 * animation blink-1
 * ----------------------------------------
 */
@-webkit-keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * animation text-flicker-in-glow
 * ----------------------------------------
 */
@-webkit-keyframes text-flicker-in-glow {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
    text-shadow: none;
  }
  10.1% {
    opacity: 1;
    text-shadow: none;
  }
  10.2% {
    opacity: 0;
    text-shadow: none;
  }
  20% {
    opacity: 0;
    text-shadow: none;
  }
  20.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
  }
  20.6% {
    opacity: 0;
    text-shadow: none;
  }
  30% {
    opacity: 0;
    text-shadow: none;
  }
  30.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  30.5% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  30.6% {
    opacity: 0;
    text-shadow: none;
  }
  45% {
    opacity: 0;
    text-shadow: none;
  }
  45.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  55% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  55.1% {
    opacity: 0;
    text-shadow: none;
  }
  57% {
    opacity: 0;
    text-shadow: none;
  }
  57.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
  }
  60% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
  }
  60.1% {
    opacity: 0;
    text-shadow: none;
  }
  65% {
    opacity: 0;
    text-shadow: none;
  }
  65.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  75% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  75.1% {
    opacity: 0;
    text-shadow: none;
  }
  77% {
    opacity: 0;
    text-shadow: none;
  }
  77.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  85% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  85.1% {
    opacity: 0;
    text-shadow: none;
  }
  86% {
    opacity: 0;
    text-shadow: none;
  }
  86.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
  }
}
@keyframes text-flicker-in-glow {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
    text-shadow: none;
  }
  10.1% {
    opacity: 1;
    text-shadow: none;
  }
  10.2% {
    opacity: 0;
    text-shadow: none;
  }
  20% {
    opacity: 0;
    text-shadow: none;
  }
  20.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
  }
  20.6% {
    opacity: 0;
    text-shadow: none;
  }
  30% {
    opacity: 0;
    text-shadow: none;
  }
  30.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  30.5% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  30.6% {
    opacity: 0;
    text-shadow: none;
  }
  45% {
    opacity: 0;
    text-shadow: none;
  }
  45.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  55% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  55.1% {
    opacity: 0;
    text-shadow: none;
  }
  57% {
    opacity: 0;
    text-shadow: none;
  }
  57.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
  }
  60% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
  }
  60.1% {
    opacity: 0;
    text-shadow: none;
  }
  65% {
    opacity: 0;
    text-shadow: none;
  }
  65.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  75% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  75.1% {
    opacity: 0;
    text-shadow: none;
  }
  77% {
    opacity: 0;
    text-shadow: none;
  }
  77.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  85% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  85.1% {
    opacity: 0;
    text-shadow: none;
  }
  86% {
    opacity: 0;
    text-shadow: none;
  }
  86.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
  }
}