* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}

:root {
  --root_padding: 2% 7%;
}

body {
  background: rgb(0, 0, 0);
  background: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgb(2, 21, 2) 100%);
  color: white;
  font-family: Impact;
  letter-spacing: 1px;
}

/* nav bar */

.nav_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--root_padding);
}

.razer_logo {
  width: 200px;
}

.nav_icons {
  display: flex;
  gap: 20px;
  position: relative;
}

.user_icon,
.card_icon,
.pocket_icon,
.menu_icon,
.logout_icon {
  width: 35px;
  transition: all 0.5s;
  cursor: pointer;
}
.logout_icon {
  width: 38px;
}

.user_icon:hover,
.card_icon:hover,
.pocket_icon:hover,
.menu_icon:hover,
.logout_icon:hover {
  transform: scale(1.2);
}

.menu_icon {
  display: none;
}

.nav_icons.show-icons {
  right: 0;
}

.close_button {
  display: none;
  font-size: 24px;
  cursor: pointer;
  position: absolute;
  top: -3%;
  left: -55%;
}
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0);
  z-index: 99;
  transition: all 0.5s;
}

.overlay.show-overlay {
  display: block;
  background-color: rgba(0, 0, 0, 0.5);
}

@media screen and (max-width: 500px) {
  .razer_logo {
    padding: 4% 7%;
  }

  .menu_icon {
    width: 30px;
  }
  .menu_icon {
    display: block;
  }
  .close_button {
    display: block !important;
    position: relative;
  }
  .nav_icons {
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: fixed;
    top: 0;
    right: -100%;
    width: 30%;
    height: 100vh;
    align-items: center;
    padding: 20px;
    transition: right 0.8s ease;
    background-color: #118e20;
    z-index: 100;
  }

  .nav_icons.show-icons {
    right: 0;
  }
}

/* hero section */

.hero_back_ground {
  background-color: #ebebeb;
  border-radius: 25px;
  margin: var(--root_padding);
  padding: 0 5%;
  display: flex;
  color: black;
  justify-content: space-between;
}

.hero_contents {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.hero_title {
  font-size: 64px;
}

@media (max-width: 1300px) {
  .hero_title {
    font-size: 44px;
  }
}

@media (max-width: 940px) {
  .hero_title {
    font-size: 32px;
  }
}

.hero_header {
  font-size: 6rem;
  color: #07c408;
  letter-spacing: 25px;
  text-align: center !important;
}

@media (max-width: 1300px) {
  .hero_header {
    font-size: 4rem;
    letter-spacing: 15px;
  }
}

@media (max-width: 940px) {
  .hero_header {
    font-size: 4rem;
    letter-spacing: 15px;
  }
}

@media (max-width: 870px) {
  .hero_header {
    font-size: 3rem;
    letter-spacing: 15px;
  }
}

.hero_button {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  background-color: #16be0f;
  border: none;
  border-radius: 15px;
  width: 312px;
  height: 60px;
  font-size: 26px;
  color: #ffffff;
  transition: all 0.5s !important;
  cursor: pointer;
}

@media screen and (max-width: 1300px) {
  .hero_button {
    width: 212px;
    border-radius: 10px;
    height: 40px;
    font-size: 16px;
  }
}

@media screen and (max-width: 940px) {
  .hero_button {
    width: 152px;
    border-radius: 10px;
    height: 40px;
    font-size: 12px;
  }
}

.hero_button:hover {
  background-color: #ebebeb;
  color: #16be0f;
}

.hero_content {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.hero_content.animate {
  opacity: 1;
  transform: translateY(0);
}

.hero_headphone {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

@media (max-width: 1300px) {
  .hero_headphone {
    width: 35%;
  }
}

@media (max-width: 940px) {
  .hero_headphone {
    width: 30%;
  }
}

.hero_headphone.animate {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 870px) {
  .hero_back_ground {
    margin: var(--root_padding);
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .hero_contents {
    gap: 30px;
    align-items: center;
    margin: 4% 0;
  }

  .hero_headphone {
    width: 60%;
  }

  .hero_header {
    font-size: 4rem;
    letter-spacing: 15px;
    padding-left: 13px;
  }

  .hero_title {
    font-size: 42px;
  }

  .hero_button {
    width: 252px;
    border-radius: 10px;
    height: 40px;
    font-size: 20px;
  }
}

@media (max-width: 570px) {
  .hero_headphone {
    width: 55%;
  }

  .hero_header {
    font-size: 2.7rem;
    letter-spacing: 10px;
  }

  .hero_title {
    font-size: 26px;
  }

  .hero_button {
    width: 192px;
    border-radius: 10px;
    height: 40px;
    font-size: 16px;
  }
}

@media (max-width: 390px) {
  .hero_contents {
    gap: 20px;
    margin: 4% 0;
  }

  .hero_headphone {
    width: 70%;
    margin-top: 10%;
  }

  .hero_header {
    font-size: 2.5rem;
    letter-spacing: 7px;
  }

  .hero_title {
    font-size: 22px;
  }

  .hero_button {
    width: 191px;
    border-radius: 10px;
    height: 35px;
    font-size: 16px;
  }
}

/* products section */
section.products_section {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: var(--root_padding);
  text-align: center;
}

.product_header {
  font-size: 48px;
  margin: 6% 0;
  color: #20d668;
}

.product_items {
  display: flex;
  gap: 10px;
  justify-content: center;
  text-align: center;
}

.product_items_1 {
  display: flex;
}

.product_items_2 {
  display: flex;
}

section.products_section img {
  width: 90%;
  border-radius: 15px;
}

.product_item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.product_item p {
  font-size: 1.5em;
  margin-top: 7px;
}

.product_item.animate {
  opacity: 1;
  transform: translateY(0);
}

.product_item:hover img .product_item:hover img {
  box-shadow: 0 0 20px 5px rgba(0, 255, 0, 0.6);
  transform: translateY(-5px);
}

@media (max-width: 870px) {
  .product_items {
    flex-direction: column;
  }
  .product_items_1 {
    margin-bottom: 7%;
  }
}

@media (max-width: 570px) {
  .product_header {
    font-size: 28px;
  }
  .product_item p {
    font-size: 1em;
  }
}

@media (max-width: 390px) {
  .product_header {
    font-size: 20px;
  }
  .product_items {
    flex-direction: column;
  }

  .product_items_1 {
    flex-direction: column;
  }

  .product_items_2 {
    flex-direction: column;
  }
  .product_item {
    margin-bottom: 20px;
  }
  .product_items_1 {
    margin-bottom: 0%;
  }
}

/* slider section */
.slider_section {
  display: flex;
  justify-content: space-between;
  margin: var(--root_padding);
  margin-top: 8%;
}

.slider_content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 20px;
}

.slider_header {
  font-size: 48px;
  letter-spacing: 2px;
}

.slider_header span {
  color: #00ff00;
}

.slider_detail {
  font-size: 32px;
  width: 600px;
}

.slider_button {
  font-size: 24px;
  border-radius: 15px;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  background-color: #16be0f;
  color: white;
  height: 60px;
  width: 210px;
  transition: all 0.5s;
  cursor: pointer;
}

.slider_button:hover {
  background-color: #ebebeb;
  color: #16be0f;
}

.slider_img {
  position: relative;
  border-radius: 50%;
}
.slider_img img {
  width: 473px;
  height: 472px;
  border-radius: 50%;
  border: #00ff00 solid 5px;
  transition: all 0.5s;
}

@media (max-width: 1275px) {
  .slider_header {
    font-size: 42px;
  }

  .slider_detail {
    font-size: 26px;
    width: 500px;
  }

  .slider_button {
    font-size: 20px;
    height: 50px;
    width: 190px;
  }

  .slider_img img {
    width: 400px;
    height: 400px;
  }
}

@media (max-width: 1070px) {
  .slider_header {
    font-size: 38px;
  }

  .slider_detail {
    font-size: 18px;
    width: 405px;
  }

  .slider_button {
    font-size: 18px;
    height: 45px;
    width: 170px;
  }

  .slider_img img {
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 870px) {
  .slider_header {
    font-size: 25px;
  }

  .slider_detail {
    font-size: 14px;
    width: 405px;
  }

  .slider_button {
    font-size: 14px;
    height: 40px;
    width: 140px;
  }

  .slider_img img {
    width: 200px;
    height: 200px;
  }
}

@media (max-width: 740px) {
  .slider_detail {
    font-size: 12px;
    width: 305px;
  }
}

@media (max-width: 570px) {
  .slider_section {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  .slider_img {
    order: -1;
    padding-right: 5%;
  }
}

@media (max-width: 390px) {
  .slider_header {
    font-size: 20px;
  }

  .slider_detail {
    font-size: 14px;
    width: 205px;
  }

  .slider_button {
    font-size: 12px;
    height: 35px;
    width: 120px;
  }

  .slider_img img {
    width: 200px;
    height: 200px;
  }
}

/* atropos section */

.atropos_section {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 7%;
  padding: var(--root_padding);
}

.atropos_section img {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0px 0px 20px 0px #00ff0043;
  transition: all 0.5s;
}

.atropos_section img:hover {
  box-shadow: 0px 0px 20px 0px #00ff00;
}

@media (max-width: 390px) {
  .atropos_section {
    margin: 15% 0;
  }
}

/* Footer */
footer {
  margin-bottom: 2%;
  margin-top: 3%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  bottom: 5%;
  left: 50%;
  letter-spacing: 1px;
  font-size: 1.2em;
  transform: translateX(-50%);
}
.bxl-youtube,
.bxl-instagram,
.bxl-github {
  padding: 0 5px;
  margin-top: 10px;
  color: white;
}