/*
SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
*/

/* COLOR THEME */
:root {
  --primary-color: #ff0000;
  --secondary-color: #470b01;
  --background-color: #e9f0e9;
  --text-color: #0f0f0f;
  --btn-text: #111;
  --btn-color: #548638;
  --btn-color2: #47742d;
  --btn-color3: #83be60;
  --btn-shadow: #111;
}

@font-face {
  font-family: "dumb";
  src: url(media/fonts/dumb.ttf);
}

/* UNIVERSALS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "dumb", sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--background-color);
  cursor: none;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}
.preload {
  display: none;
}

img {
  max-width: 100%;
}

#light-me-up {
  position: absolute;
  font-size: 48px;
  font-weight: 700;
  left: 55%;
  top: -100px;
  animation: lightme 1s ease-out forwards;
  transition: opacity 200ms ease-out;
  user-select: none;
}

@keyframes lightme {
  to {
    transform: translateY(180px) rotate(6deg);
  }
}

.container {
  min-height: 100%;
  max-height: 80vh;
  width: 95dvw;
  max-width: 820px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero {
  margin-top: 60px;
  margin-bottom: 10px;
  width: 30%;
  z-index: 1;
  position: relative;
  user-select: none;
}
#smoke {
  position: absolute;
  height: 250px;
  top: -65%;
  left: 28%;
  opacity: 0;
  transform-origin: 50% 100%;
  transition: all 1200ms ease-out;
  z-index: -1;
}
@keyframes smoker {
  from {
    scale: 1 0.9 !important;
    transform: translateX(0);
  }
  to {
    scale: 1 1.2 !important;
    transform: translateX(-4px);
  }
}
.smoker {
  animation: smoker 800ms ease-in-out infinite alternate;
}
#title {
  transition: all ease-out 650ms;
  z-index: 2;
  font-size: clamp(7.2rem, 14vw, 17.6rem);
  color: var(--secondary-color);
  user-select: none;
}

#diagram {
  position: absolute;
  scale: 0 1;
  opacity: 0;
  transition: all ease-out 400ms;
  max-width: 820px;
}

.reveal {
  opacity: 1 !important;
  scale: 1 1 !important;
  transform: translateY(60%) !important;
}
.move-down {
  transform: translateY(15%);
  rotate: 6deg;
  color: var(--primary-color) !important;
}

#fireplace {
  position: absolute;
  top: 0;
  left: 21%;
  width: 50%;
  height: 70%;
  z-index: 10;
  /* background-color: rgb(255, 0, 0, 0.3); */
}
#zippo {
  position: absolute;
  pointer-events: none;
  width: 200px;
  height: 200px;
  background-image: url("media/imgs/lighter-closed.png");
  background-size: cover;
  z-index: 1000;
  /* transition: transform 0.1s; */
  transform: translate(-50%, -50%);
}

#menu {
  transform: translateY(-100%);
  opacity: 0;
  rotate: -25deg;
  transition: all ease-out 400ms;
}
.menu-final {
  transform: translateY(125%) !important;
  opacity: 1 !important;
  rotate: 0deg !important;
}

.quote-text {
  position: absolute;
  font-size: 48px;
  text-align: center;
  opacity: 0;
  transition: all 600ms ease-out;
}

#quote1 {
  top: 4%;
  left: 28%;
  rotate: -6deg;
}

#quote2 {
  top: 55%;
  left: 18%;
  rotate: -28deg;
}

#quote3 {
  top: 54%;
  right: 16%;
  rotate: 12deg;
}

/* BUTTONS */

.btn {
  padding: 10px 20px;
  background-color: var(--btn-color);
  color: var(--btn-text);
  border-radius: 24px;
  text-decoration: none;
  font-size: 4.8rem;
  font-weight: 700;
  display: inline-block;
  margin: 12px;
}

.clickable {
  background-color: var(--btn-color);
  box-shadow: 0 5px var(--btn-shadow);
  transform: translateY(-5px);
}

.clickable:hover {
  background-color: var(--btn-color2);
  box-shadow: 0 10px var(--btn-shadow);
  transform: translateY(-10px);
  cursor: pointer;
}

.clickable:active {
  background: var(--btn-color3);
  box-shadow: 0 3px var(--btn-shadow);
  transform: translateY(-3px);
}

/* Media Queries for Mobile */
@media (max-width: 768px) {
  .container {
    width: 95%;
  }
}