@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300&display=swap");
/* import font from file */
@import url("./DepartureMono-Regular.woff2");

body {
  font-family: "Geist Mono", monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 20px;
  overflow: hidden;
  cursor: url(http://www.zingerbugimages.com/cursors/birthday_hat.cur),
    url(http://www.zingerbug.com/cursors/cursors/birthday_hat.gif), progress !important;
}

.geist {
  font-family: "Geist Mono", monospace;
}

.age-text {
  font-family: "Departure Mono", monospace;
  font-size: 24px;
  margin-bottom: 10px;
  p {
    margin: 4px;
    margin-top: 0px;
  }
}

.custom {
  margin-bottom: 50px;
}

.fullSize {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.fullVideo {
  margin-top: 4px;
  width: 72vw;
  height: 72vh;
}

.center {
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

[data-tooltip] {
  position: relative;
  border-bottom: 1px dashed #000;
  cursor: help;
}

[data-tooltip]::after {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  content: attr(data-tooltip);
  left: 0;
  top: calc(100% - 10px);
  border-radius: 4px;
  box-shadow: 0 0 5px 2px rgba(100, 100, 100, 0.6);
  background-color: white;
  z-index: 10;
  padding: 8px;
  width: 120px;
  font-size: 14px;
  transform: translateY(20px);
  transition: all 150ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateY(0);
  transition-duration: 300ms;
}

.lds-heart {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
  transform-origin: 40px 40px;
}

.lds-heart div {
  top: 32px;
  left: 32px;
  position: absolute;
  width: 32px;
  height: 32px;
  background: #1e377e;
  animation: lds-heart 2.4s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.lds-heart div:after,
.lds-heart div:before {
  content: " ";
  position: absolute;
  display: block;
  width: 32px;
  height: 32px;
  background: #1e377e;
}

.lds-heart div:before {
  left: -24px;
  border-radius: 50% 0 0 50%;
}
.lds-heart div:after {
  top: -24px;
  border-radius: 50% 50% 0 0;
}

.shake-it {
  display: inline-block;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.shake-it:hover {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

@keyframes lds-heart {
  0% {
    transform: scale(0.95);
  }
  5% {
    transform: scale(1.1);
  }
  39% {
    transform: scale(0.85);
  }
  45% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(0.9);
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff8e7;
  }
  a {
    color: #fff8e7;
  }
  .age-text {
    color: #fff;
  }
  .custom {
    color: #fff8e7;
  }
  .lds-heart div {
    background: #fff8e7;
  }
  .lds-heart div:after,
  .lds-heart div:before {
    background: #fff8e7;
  }
  .lds-heart div:before {
    border-radius: 50% 0 0 50%;
  }
  .lds-heart div:after {
    border-radius: 50% 50% 0 0;
  }
  [data-tooltip]::after {
    background-color: #000;
    color: #fff8e7;
  }
}