:root {
    --glow: rgba(255, 195, 26, 0.4);
  }

body {
  background-image: url('img/bg_wallpaper.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media (max-width: 768px) {
  body {
    background-image: url('img/bg_wallpaper_mobile.png');
  }
}

.logo {
  height: 80px;
}

.logo::after {
  content: "";
  display: block;
  width: 200px;
  height: 80px;
  background-image: url('img/logo.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.ribbon {
  height: 250px;
  width: 100%;
}

.ribbon::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 750px;
  min-width: 300px;
  height: 250px;
  margin: 0 auto;
  background-image: url('img/ribbon_box.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .logo {
    height: 60px;
  }
  
  .logo::after {
    width: 150px;
    height: 60px;
  }
  
  .ribbon {
    height: 180px;
  }
  
  .ribbon::after {
    min-width: 200px;
    height: 180px;
  }
}

/* body {
  transform: scale(1.5);
} */
.hexagon {
  z-index: -2;
  position: absolute;
  width: 200px;
  height: 115.47px;
  background-color: var(--glow);
  margin: 57.74px 0;
  filter: blur(20px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
}
.hexagon:before {
  bottom: 100%;
  border-bottom: 57.74px solid var(--glow);
}
.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 57.74px solid var(--glow);
}
.back {
  background-image: url("img/box_back.png");
  background-size: cover;
  background-position: center;
  z-index: -1;
}
.top {
  background-image: url("img/box_top.png");
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.left {
  background-image: url("img/box_left.png");
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.right {
  background-image: url("img/box_right.png");
  background-size: cover;
  background-position: center;
  z-index: 1;
}
#cube {
  animation: hover 1.5s ease-in-out infinite alternate;
  transition: transform 300ms;
  animation-play-state: running;
}
@keyframes hover {
  from {
    transform: translateY(-0.3rem);
  }
  to {
    transform: translateY(0.3rem);
  }
}
.powerup {
  background-image: url("");
  background-size: cover;
  border-radius: 50%;
  z-index: 100;
  overflow: hidden;
  height: 64px;
  width: 64px;
  z-index: -5;
}
  
.h-65{
    height:17rem;
}