body {
  background-color: rgb(232, 207, 255);
  background-image: url('/assets/shrines/virtual-pets/tamagotchi/tamagotchi_background.webp');
  background-size: cover;
  background-position: center;
}

h1 {
  font-size: 96px;
  background: linear-gradient(90deg, #E4007F 0%, #833D93 25%, #00AAE7 50%, #6EB92B 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;

  @media screen and (max-width: 767px) {
    font-size: 48px;
  }
}

#content {
  display: flex;
  flex-direction: column;
  width: calc(100% - 128px);
  background-color: var(--transparent-white-color);
  border-radius: 16px;
  justify-content: center;
  align-items: center;

  @media screen and (max-width: 1000px) {
    width: calc(100% - 32px);
  }
}

#intro {
  background: #ffffffaa;
  padding-bottom: 100px;
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  --mask:
    radial-gradient(64.03px at 50% calc(100% - 90px),#000 99%,#0000 101%) 50% 0/200px 100%,
    radial-gradient(64.03px at 50% calc(100% + 40px),#0000 99%,#000 101%) calc(50% - 100px) calc(100% - 50px)/200px 100% repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

#intro > p {
  margin: 8px 64px;
  color: #E4007F;

  @media screen and (max-width: 767px) {
    margin: 8px 16px;
  }
}

#my-experience {
  background: #ffffffaa;
  padding-top: 100px;
  padding-bottom: 100px;
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  --mask:
    radial-gradient(64.03px at 50% 90px,#000 99%,#0000 101%) calc(50% - 100px) 0/200px 51% repeat-x,
    radial-gradient(64.03px at 50% -40px,#0000 99%,#000 101%) 50% 50px/200px calc(51% - 50px) repeat-x,
    radial-gradient(64.03px at 50% calc(100% - 90px),#000 99%,#0000 101%) calc(50% - 100px) 100%/200px 51% repeat-x,
    radial-gradient(64.03px at 50% calc(100% + 40px),#0000 99%,#000 101%) 50% calc(100% - 50px)/200px calc(51% - 50px) repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

#my-experience > p {
  margin: 8px 64px;
  color: #833D93;

  @media screen and (max-width: 767px) {
    margin: 8px 16px;
  }
}

#timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 32px;
  padding: 16px;
}

.tama-entry {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;

  @media screen and (min-width: 768px) {
    height: 200px;
  }

  @media screen and (max-width: 767px) {
    flex-direction: column;
  }
}

.tama-image-container {
  position: absolute;
  z-index: 1;
  left: 0;

  @media screen and (max-width: 767px) {
    position: relative;
  }
}

.tama-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 150px;
}

.tama-image > div {
  position: absolute;
  width: 200px;

  aspect-ratio: 1;
  clip-path: shape(from 9.31% 55.12%,curve to 8.50% 39.04% with 11.63% 47.59%,curve to 10.84% 24.21% with 5.37% 30.50%,curve to 25.30% 18.13% with 16.32% 17.92%,curve to 40.17% 16.57% with 34.28% 18.33%,curve to 52.92% 12.18% with 46.05% 14.81%,curve to 67.34% 11.04% with 59.79% 9.55%,curve to 75.69% 21.50% with 74.89% 12.53%,curve to 83.92% 34.15% with 76.48% 30.48%,curve to 90.40% 45.16% with 91.36% 37.83%,curve to 85.25% 58.02% with 89.45% 52.48%,curve to 77.66% 68.34% with 81.05% 63.56%,curve to 72.88% 83.20% with 74.26% 73.11%,curve to 62.82% 90.15% with 71.49% 93.29%,curve to 47.80% 86.19% with 54.15% 87.01%,curve to 34.20% 85.03% with 41.44% 85.37%,curve to 19.14% 81.60% with 26.95% 84.69%,curve to 9.16% 70.58% with 11.34% 78.50%,curve to 9.31% 55.12% with 6.98% 62.66%);
}

.tama-image > img {
  position: absolute;
  z-index: 1;
  height: 150px;
  width: auto;
}

.tama-image > span {
  position: absolute;
  z-index: 2;
  bottom: 12px;
  right: 12px;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #833D93;
}

.tama-title {
  position: relative;
  display: flex;
  align-items: center;
  width: 90%;

  @media screen and (min-width: 1101px) {
    height: 32px;
  }
}

.tama-title > span {
  position: absolute;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  bottom: 4px;

  @media screen and (max-width: 1100px) {
    display: none;
  }
}

.tama-title > h2 {
  position: absolute;
  z-index: 1;
  color: #E4007F;
  text-shadow: 2px 2px 4px white;
  margin: 0;

  @media screen and (max-width: 1100px) {
    position: relative;
  }
}

.tama-description {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #ffffffaa;
  border-radius: 16px;
  width: 100%;

  @media screen and (min-width: 768px) {
    margin-left: 40px;
    padding: 8px 16px 8px 200px;
  }

  @media screen and (max-width: 767px) {
    padding: 8px;
  }
}

.tama-description p {
  color: #833D93;
}

.tama-description a {
  color: #E4007F;
  align-self: flex-end;
  width: fit-content;
}

.tama-description a:hover {
  text-decoration: underline;
  text-decoration-style: wavy;
}

/* Device-specific colors */

#gen1-old .tama-image > div {
  background: linear-gradient(60deg, #00AAE7 50%, #6EB92B 90%);
}

#gen1-old .tama-image > span {
  border: 2px #6EB92B solid;
}

#gen1-old .tama-title > span {
  background: linear-gradient(90deg, #00AAE7 0%, #6EB92B 50%);
}

#gen1-new .tama-image > div {
  background: linear-gradient(60deg, #E4007F 20%, #833D93 60%);
  rotate: 160deg;
}

#gen1-new .tama-image > span {
  border: 2px #833D93 solid;
}

#gen1-new .tama-title > span {
  background: linear-gradient(90deg, #833D93 0%, #E4007F 90%);
}

#gen2-new .tama-image > div {
  background: linear-gradient(70deg, #833D93 0%, #00AAE7 50%, #6EB92B 90%);
  rotate: -30deg;
}

#gen2-new .tama-image > span {
  border: 2px #00AAE7 solid;
}

#gen2-new .tama-title > span {
  background: linear-gradient(90deg, #833D93 0%, #00AAE7 40%, #6EB92B 90%);
}

#gen3-new .tama-image > div {
  background: linear-gradient(-20deg, #E4007F 0%, #833D93 50%, #00AAE7 100%);
  rotate: 5deg;
}

#gen3-new .tama-image > span {
  border: 2px #E4007F solid;
}

#gen3-new .tama-title > span {
  background: linear-gradient(90deg, #00AAE7 0%, #833D93 40%, #E4007F 90%);
}

#uni .tama-image > div {
  background: linear-gradient(30deg, #E4007F 0%, #833D93 50%, #00AAE7 100%);
  rotate: 90deg;
}

#uni .tama-image > span {
  border: 2px #00AAE7 solid;
}

#uni .tama-title > span {
  background: linear-gradient(90deg, #E4007F 0%, #833D93 40%, #00AAE7 90%);
}

#paradise .tama-image > div {
  background: linear-gradient(60deg, #E4007F 0%, #833D93 70%);
}

#paradise .tama-image > span {
  border: 2px #833D93 solid;
}

#paradise .tama-title > span {
  background: linear-gradient(90deg, #E4007F 0%, #833D93 50%);
}