t.css

body {
    background: black;
  }
  
  .chest {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: 200px 150px;
    grid-template-rows: 120px 113px;
    z-index: 1;
  }
  
  .lid-front {
    grid-column: 1 / 3;
    grid-row: 1;
    background: #FFC444;
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 30px 10px 10px 35px 30px 10px 10px 30px;
    grid-template-rows: 90px;
  }
  
  .yellow.has-highlight {
    display: grid;
    grid-template-rows: 15px 30px;
    overflow: hidden;
  }
  
  .yellow-highlight {
    grid-row: 2;
    background: #FFE59C;
  }
  
  .purple.has-highlight {
    display: grid;
    grid-template-rows: 15px 30px;
    overflow: hidden;
  }
  
  .dark-highlight {
    grid-row: 2;
    background: #CC365D;
  }
  
  .lid-front .yellow-left {
    grid-column: 1 / 10;
    grid-row: 1;
    border-top-left-radius: 80px;
    background: #FFC444;
  }
  
  .lid-front .yellow-left.shadow {
    grid-column: 2 / 10;
    grid-row: 1;
    border-top-left-radius: 80px;
    background: #FF8F1F;
  }
  
  .lid-front .purple-left.shadow {
    grid-column: 3 / 10;
    grid-row: 1;
    border-top-left-radius: 80px;
    background: #7C2752;
  }
  
  .lid-front .purple-left {
    grid-column: 4 / 10;
    grid-row: 1;
    border-top-left-radius: 80px;
    background: #CC365D;
  }
  
  .lid-front .purple {
    display: grid;
    grid-template-rows: 15px 30px 30px 15px;
    overflow: hidden;
  }
  
  .purple-highlight {
    grid-row: 2;
    background: #FC5454;
  }
  
  .lid-front .purple .horizontal-shadow {
    grid-column: 1;
    grid-row: 4;
    background: #7C2752;
  }
  
  .lid-front .yellow-middle {
    grid-column: 5 / 10;
    grid-row: 1;
    border-top-left-radius: 80px;
    background: #FFC444;
  }
  
  .lid-front .yellow-middle.shadow {
    grid-column: 6 / 10;
    grid-row: 1;
    border-top-left-radius: 80px;
    background: #FF8F1F;
  }
  
  .lid-front .purple-right.shadow {
    grid-column: 7 / 10;
    grid-row: 1;
    border-top-left-radius: 80px;
    background: #7C2752;
  }
  
  .lid-front .purple-right {
    grid-column: 8 / 10;
    grid-row: 1;
    border-top-left-radius: 80px;
    background: #CC365D;
  }
  
  .lid-front .yellow-right {
    grid-column: 9 / 10;
    grid-row: 1;
    border-top-left-radius: 80px;
    background: #FFC444;
  }
  
  .lid-front .yellow-right .highlight {
    width: 400px;
    height: 30px;
    margin-top: 15px;
    margin-left: -200px;
    background: #FF9870;
    mix-blend-mode: screen;
  }
  
  .lid-front .yellow-bottom {
    grid-column: 1 / 10;
    grid-row: 2;
    display: grid;
    grid-template-columns: 70px 60px 70px;
    grid-template-rows: 15px 15px;
    background: #FFC444;
  }
  
  .lid-front .yellow-bottom .highlight {
    grid-column: 2;
    grid-row: 2;
    background: #FFE59C;
  }
  
  .lid-side {
    grid-column: 2;
    grid-row: 1;
    background: #FF8F1F;
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
    z-index: 2;
  }
  
  .lid-side .purple {
    width: 90px;
    height: 60px;
    margin-top: 30px;
    margin-left: 30px;
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
    background: #542246;
  }
  
  .lid-side .purple .highlight {
    position: absolute;
    width: 70px;
    height: 35px;
    margin-top: 10px;
    margin-left: 10px;
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
    background: #7E2B55;
  }
  
  .bottom-front {
    grid-column: 1;
    grid-row: 2;
    background: #FFB024;
    display: grid;
    grid-template-columns: 40px 130px 30px;
    grid-template-rows: 80px 25px 10px;
    border-bottom-left-radius: 10px;
    overflow: hidden;
  }
  
  .bottom-front .left {
    grid-column: 1;
    grid-row: 1 / 3;
    background: #FFB024;
    display: grid;
    grid-template-columns: 30px 10px;
    grid-template-rows: 30px 50px;
  }
  
  .bottom-front .left .shadow-side {
    grid-column: 2;
    grid-row: 1 / 3;
    background: #ED6011;
  }
  
  .bottom-front .left .shadow-front {
    grid-column: 1;
    grid-row: 1;
    background: #FF8F1F;
  }
  
  .bottom-front .middle {
    grid-column: 2;
    grid-row: 1;
    background: #7C2752;
    display: grid;
    grid-template-columns: 10px 20px 70px 20px 10px;
    grid-template-rows: 30px 15px 25px 10px;
  }
  
  .bottom-front .middle .highlight {
    grid-column: 2 / 5;
    grid-row: 2 / 4;
    background: #CC365D;
    display: grid;
    grid-template-columns: 30px 60px;
    grid-template-rows: 15px 10px;
  }
  
  .bottom-front .middle .highlight .shadow {
    grid-column: 2;
    grid-row: 2;
    background: #7C2752;
  }
  
  .bottom-front .middle .lock {
    grid-column: 3;
    grid-row: 1 / 3;
    background: #FFB024;
    display: grid;
    grid-template-columns: 15px 30px 15px 10px;
    grid-template-rows: 30px 15px;
    z-index: 10;
  }
  
  .lock .yellow-left {
    grid-column: 1;
    grid-row: 1;
    background: #FF8F1F;
  }
  
  .lock .purple-middle {
    grid-column: 2;
    grid-row: 1;
    background: #542246;
  }
  
  .lock .yellow-right {
    grid-column: 3;
    grid-row: 1;
    background: #FF8F1F;
  }
  
  .lock .shadow {
    grid-column: 4;
    grid-row: 1 / 3;
    background: #ED6011;
  }
  
  .bottom-front .right {
    grid-column: 3;
    grid-row: 1 / 3;
    background: #FFB024;
    display: grid;
    grid-template-rows: 30px 50px;
  }
  
  .bottom-front .right .shadow-front {
    grid-row: 1;
    background: #FF8F1F;
  }
  
  .bottom-front .bottom {
    grid-column: 1 / 4;
    grid-row: 3;
    background: #FF8F1F;
  }
  
  .bottom-side {
    grid-column: 2;
    grid-row: 2;
    background: #FF8F1F;
    display: grid;
    grid-template-columns: 30px 80px 10px 30px;
    grid-template-rows: 30px 50px 25px 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
  }
  
  .bottom-side .shadow {
    grid-column: 1 / 5;
    grid-row: 1;
    background: #ED6011;
  }
  
  
  .bottom-side .highlight {
    grid-column: 3;
    grid-row: 1 / 3;
    background: #FFC444;
  }
  
  .bottom-side .purple-middle {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    background: #542246;
    z-index: 2;
  }
  
  .bottom-side .purple-middle .highlight {
    width: 60px;
    height: 40px;
    margin-top: 30px;
    margin-left: 10px;
    background: #7D2953;
  }
  
  .bottom-side .bottom {
    grid-column: 1 / 5;
    grid-row: 4;
    background: #EF6412;
  }
  
  .highlight-chest {
    position: absolute;
    grid-row: 3;
    width: 350px;
    height: 233px;
    margin-top: -233px;
    background: #FF5E5E;
    z-index: 100;
    mix-blend-mode: screen;
    border-top-left-radius: 80px;
    border-top-right-radius: 75px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    opacity: 0;
    transition: opacity 1s;
  }
  
  .highlight-chest:hover {
    opacity: 1;
  }
  
  .gems {
    position: relative;
    width: 126px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .gem {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 126px;
  }
  
  .purple-gem {
    transform: translate(10px, 51.5px);
    z-index: 10;
  }
  
  .pink-gem-left {
    transform: translate(-240px, 51.5px);
    z-index: -10;
  }
  
  .pink-gem-right {
    transform: translate(153px, 25px) rotate(70deg) scaleY(-1);
    z-index: 10;
  }
  
  .spark {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    animation: twinkle 0.8s infinite alternate ease-in;
    z-index: 300;
  }
  
  /* glow */
  .spark:after {
    content: '';
    display: block;
    margin-top: -32.5px;
    background: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    filter: blur(13px);
    opacity: 0.6;
  }
  
  .spark-1 {
    margin-top: -17%;
    margin-left: -60px;
    animation-delay: 1s;
  }
  
  .spark-2 {
    margin-top: 10%;
    margin-left: -225px;
    transform: rotate(45deg);
    animation-delay: 0.5s;
  }
  
  .spark-3 {
    margin-top: -50px;
    margin-left: 190px;
    animation-delay: 0.3s;
  }
  
  .spark-4 {
    margin-top: 45px;
    margin-left: -40%;
    animation-delay: 0.7s;
    transform: scale(1.2);
  }

  .spark-5 {
    margin-top: -13%;
    margin-left: -33%;
    animation-delay: 0.7s;
    transform: scale(1.2);
  }


  .spark-6 {
    margin-top: 15%;
    margin-left: 20%;
    animation-delay: 0.7s;
    transform: scale(1.2);
  }


  .spark-7 {
    margin-top: -9%;
    margin-left: 23%;
    animation-delay: 0.7s;
    transform: scale(1.2);
  }
  
  .white {
    background: #fff;
  }
  
  .yellow {
    background: #FF8F1F;
  }
  
  .dust {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    opacity: 0;
    z-index: 300;
    animation: twinkle 10.8s infinite alternate ease-in;
  }
  
  .dust-1 {
    transform: translate(-250px, 40px);
    animation-delay: 0.7s;
  }
  
  .dust-2 {
    transform: translate(-225px, -35px);
    animation-delay: 0.9s;
  }
  
  .dust-3 {
    transform: translate(-90px, -140px);
    animation-delay: 1.3s;
  }
  
  .dust-4 {
    transform: translate(70px, 10px);
    animation-delay: 1.1s;
  }
  
  .dust-5 {
    transform: translate(205px, -85px);
    animation-delay: 0.7s;
  }
  
  .dust-6 {
    transform: translate(240px, -10px);
    animation-delay: 0.3s;
  }
  
  h3 {
    font-family: 'Nunito Sans', sans-serif;
    position: absolute;
    color: #B0649E;
    width: 100%;
    margin-top: 250px;
    text-align: center;
  }
  
  a {
    color: #993F88;
    text-decoration: none;
  }
  
  @keyframes twinkle {
    0% { opacity: 0 }
    100% { opacity: 1}
  }