style.a11e3109.css.map

{"version":3,"sources":["assets/css/style.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"style.a11e3109.css","sourceRoot":"..","sourcesContent":["/*-----------------------------------*\\\n  #style.css\n\\*-----------------------------------*/\n\n/**\n * copyright 2022 codewithsadee\n */\n\n\n\n\n\n/*-----------------------------------*\\\n  #CUSTOM PROPERTY\n\\*-----------------------------------*/\n\n:root {\n\n  /**\n   * colors\n   */\n\n  --rich-black-fogra-39: hsl(252, 24%, 4%);\n  --spanish-gray: hsl(0, 0%, 56%);\n  --eerie-black-1: hsl(252, 11%, 9%);\n  --eerie-black-2: hsl(0, 0%, 13%);\n  --raisin-black: hsl(249, 9%, 15%);\n  --han-purple: hsl(250, 72%, 51%);\n  --gainsboro: hsl(0, 0%, 88%);\n  --cultured: hsl(0, 0%, 98%);\n  --white_20: hsla(217, 15%, 70%, 0.3);\n  --xiketic: hsl(250, 15%, 8%);\n  --indigo: hsl(277, 94%, 28%);\n  --white: hsl(0, 0%, 100%);\n  --black: hsl(0, 0%, 0%);\n\n  --gradient-1: linear-gradient(150deg, var(--indigo) 0%, var(--han-purple) 78%);\n\n  \n  /**\n   * typography\n   */\n\n  --ff-poppins: 'Poppins', sans-serif;\n  --ff-jost: 'Jost', sans-serif;\n\n  --fs-1: 4.8rem;\n  --fs-2: 3.2rem;\n  --fs-3: 2.4rem;\n  --fs-4: 1.9rem;\n  --fs-5: 1.4rem;\n\n  --fw-500: 500;\n  --fw-600: 600;\n  --fw-700: 700;\n  --fw-900: 900;\n\n  /**\n   * border radius\n   */\n\n  --radius-4: 4px;\n  --radius-6: 6px;\n  --radius-8: 8px;\n\n  /**\n   * spacing\n   */\n\n  --section-padding: 90px;\n\n  /**\n   * box shadow\n   */\n\n  --shadow-1: 0 2px 2px var(--black);\n  --shadow-2: 0px 2px 4px var(--black);\n\n  /**\n   * transition\n   */\n\n  --transition-1: 0.05s ease;\n  --transition-2: 0.25s ease;\n  --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);\n  --cubic-out: cubic-bezier(0.33, 0.85, 0.56, 1.02);\n\n}\n\n/*custom scrollbar*/\n::-webkit-scrollbar{\n  width:20px;\n  cursor: pointer;\n}\n::-webkit-scrollbar-track{\n  background: linear-gradient(var(--eerie-black-1),var(--eerie-black-1));\n}\n::-webkit-scrollbar-thumb{\n  background: var(--gradient-1);\n  border-radius: 3px;\n}\n\n\n\n\n/*-----------------------------------*\\\n  #RESET\n\\*-----------------------------------*/\n\n*,\n*::before,\n*::after {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nli { list-style: none; }\n\na {\n  text-decoration: none;\n  color: inherit;\n}\n\na,\nimg,\nsvg,\nspan,\ninput,\nbutton,\nion-icon { display: block; }\n\nimg { height: auto; }\n\ninput,\nbutton {\n  background: none;\n  border: none;\n  font: inherit;\n}\n\ninput { width: 100%; }\n\nbutton { cursor: pointer; }\n\nion-icon {\n  pointer-events: none;\n  color: var(--white);\n}\n\n::selection { background-color: var(--white_20); }\n\n:focus-visible { outline-offset: 4px; }\n\nhtml {\n  font-family: var(--ff-poppins);\n  font-size: 10px;\n  scroll-behavior: smooth;\n}\n\nbody {\n  background-color: var(--rich-black-fogra-39);\n  color: var(--spanish-gray);\n  font-size: 1.6rem;\n}\n\n::-webkit-scrollbar { width: 15px; }\n\n::-webkit-scrollbar-track { background-color: hsl(0, 0%, 100%); }\n\n::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }\n\n::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }\n\n\n\n\n\n/*-----------------------------------*\\\n  #REUSED STYLE\n\\*-----------------------------------*/\n\n.container { padding-inline: 25px; }\n\n.btn {\n  color: var(--white);\n  font-weight: var(--fw-700);\n  border: 2px solid var(--white);\n  padding: var(--padding, 4px 10px);\n  border-radius: 50px;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.btn ion-icon { font-size: 1.8rem; }\n\n.btn:is(:hover, :focus) {\n  background-image: var(--gradient-1);\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 120% 120%;\n  border-color: transparent;\n}\n\n.section-subtitle {\n  position: relative;\n  background-image: var(--gradient-1);\n  background-clip: text;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  text-transform: uppercase;\n  font-weight: var(--fw-600);\n  margin-block-end: 15px;\n  width: max-content;\n}\n\n.section-subtitle::after {\n  content: \"\";\n  position: absolute;\n  top: 12px;\n  right: -60px;\n  width: 50px;\n  height: 3px;\n  background-image: var(--gradient-1);\n}\n\n.h1,\n.h2,\n.h3 {\n  color: var(--white);\n  font-family: var(--ff-jost);\n}\n\n.h2,\n.h3 { font-weight: var(--fw-600); }\n\n.h2 {\n  font-size: var(--fs-2);\n  line-height: 1.2;\n}\n\n.section { padding-block-start: var(--section-padding); }\n\n.title-wrapper {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-block-end: 50px;\n}\n\n.btn-link {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  color: var(--white);\n  font-weight: var(--fw-500);\n  transition: var(--transition-2);\n}\n\n.btn-link:is(:hover, :focus) { color: var(--han-purple); }\n\n.btn-link ion-icon { color: inherit; }\n\n.grid-list {\n  display: grid;\n  gap: 30px;\n}\n\n.card {\n  background-color: var(--eerie-black-1);\n  padding: 24px;\n  border-radius: var(--radius-8);\n  box-shadow: var(--shadow-1);\n  transition: var(--transition-2);\n}\n\n.card-banner {\n  overflow: hidden;\n  border-radius: var(--radius-6);\n  background-color: var(--raisin-black);\n}\n\n.img-cover {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.card-title,\n.card-title > a { transition: var(--transition-2); }\n\n\n\n\n\n/*-----------------------------------*\\\n  #HEADER\n\\*-----------------------------------*/\n\n.header .btn > span { display: none; }\n\n.header {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  background-color: var(--xiketic);\n  padding-block: 20px;\n  transition: var(--transition-1);\n  z-index: 4;\n}\n\n.header.active { box-shadow: var(--shadow-2); }\n\n.header .container {\n  display: flex;\n  align-items: center;\n  gap: 30px;\n}\n\n.menu-open-btn {\n  margin-inline-start: auto;\n  font-size: 2.6rem;\n}\n\n.header ion-icon { color: var(--white); }\n\n.navbar {\n  position: fixed;\n  top: 0;\n  right: -500px;\n  width: 100%;\n  max-width: 500px;\n  height: 100%;\n  background-color: var(--rich-black-fogra-39);\n  visibility: hidden;\n  z-index: 2;\n  transition: 0.15s var(--cubic-in);\n}\n\n.navbar.active {\n  visibility: visible;\n  transform: translateX(-500px);\n  transition: 0.35s var(--cubic-out);\n}\n\n.navbar-top,\n.navbar-list { padding: 30px; }\n\n.navbar-top {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.navbar-title { font-weight: var(--fw-600); }\n\n.nav-close-btn ion-icon {\n  color: var(--spanish-gray);\n  font-size: 2.7rem;\n  --ionicon-stroke-width: 40px;\n}\n\n.navbar-link {\n  font-size: var(--fs-3);\n  color: var(--white);\n  padding-block: 10px;\n  font-weight: var(--fw-600);\n  transition: var(--transition-1);\n}\n\n.navbar-link:is(:hover, :focus) { color: var(--han-purple); }\n\n.overlay {\n  position: fixed;\n  inset: 0;\n  background-color: hsla(0, 0%, 0%, 0.7);\n  transition: var(--transition-2);\n  opacity: 0;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.overlay.active {\n  opacity: 1;\n  pointer-events: all;\n}\n\n\n\n\n\n/*-----------------------------------*\\\n  #HERO\n\\*-----------------------------------*/\n\n.hero {\n  position: relative;\n  background-color: var(--xiketic);\n  padding-block-start: 120px;\n  padding-block-end: var(--section-padding);\n}\n\n.hero .section-subtitle { margin-block-end: 30px; }\n\n.hero-title {\n  font-size: var(--fs-1);\n  font-weight: var(--fw-900);\n  line-height: 1.2;\n  word-wrap: break-word;\n  margin-block-end: 25px;\n}\n\n.hero-text {\n  font-size: var(--fs-4);\n  margin-block-end: 25px;\n}\n\n.hero .btn-group {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 15px;\n}\n\n.hero .btn { --padding: 12px 30px; }\n\n.hero-bg-bottom {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: -1;\n}\n\n\n.view .right{\n  position: relative;\n  right: 0;\n  top: 0;\n  text-align: right;\n}\n.view .right h2{\n  position: relative;\n  text-align: right;\n  padding: 10px;\n  color: #fff;\n}\n\n\n\n\n/*-----------------------------------*\\\n  #EXPLOER\n\\*-----------------------------------*/\n.explore-card:hover { transform: translateY(-5px); }\n\n.explore-card .card-banner {\n  aspect-ratio: 1 / 1;\n  margin-block-end: 35px;\n}\n\n.explore-card .card-title > a:is(:hover, :focus) { color: var(--han-purple); }\n\n.explore-card .card-author {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-block: 10px;\n}\n\n.explore-card .author-link {\n  color: var(--white);\n  font-family: var(--ff-jost);\n  font-weight: var(--fw-500);\n  transition: var(--transition-2);\n}\n\n.explore-card .author-link:is(:hover, :focus) { color: var(--han-purple); }\n\n.explore-card .wrapper {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-block-end: 15px;\n}\n\n.explore-card .wrapper-item { color: var(--white); }\n\n.explore-card .btn {\n  font-size: var(--fs-5);\n  --padding: 8px 15px;\n}\n\n\n\n\n\n/*-----------------------------------*\\\n  #TOP SELLER\n\\*-----------------------------------*/\n\n.top-seller .section-title { margin-block-end: 50px; }\n\n.top-seller-card {\n  display: flex;\n  align-items: center;\n  gap: 15px;\n}\n\n.top-seller-card .card-avatar {\n  border-radius: 50%;\n  overflow: hidden;\n}\n\n.top-seller-card .card-title {\n  color: var(--cultured);\n  font-size: 1.6rem;\n  font-weight: var(--fw-600);\n  margin-block-end: 5px;\n}\n\n.top-seller-card .card-title > a:is(:hover, :focus) { color: var(--han-purple); }\n\n\n\n\n\n/*-----------------------------------*\\\n  #COLLECTION\n\\*-----------------------------------*/\n\n.collection-card { text-align: center; }\n\n.collection-card .card-banner { aspect-ratio: 1 / 0.75; }\n\n.collection-card .card-avatar {\n  position: relative;\n  width: max-content;\n  margin-inline: auto;\n  margin-block: -40px 15px;\n  border-radius: 50px;\n  overflow: hidden;\n  border: 3px solid var(--white_20);\n  padding: 5px;\n  transition: var(--transition-2);\n}\n\n.collection-card .card-avatar img { border-radius: inherit; }\n\n.collection-card:is(:hover, :focus) .card-avatar { box-shadow: 0 5px 10px hsla(223, 82%, 30%, 0.5); }\n\n.collection-card:is(:hover, :focus) .card-title { color: var(--han-purple); }\n\n\n\n\n\n/*-----------------------------------*\\\n  #INSTRUCTION\n\\*-----------------------------------*/\n@media(max-width:900px){\n   .instruction{\n    visibility: hidden;\n   }\n}\n\n.instruction { padding-block-end: var(--section-padding); }\n\n.instruction .section-title { margin-block-end: 50px; }\n\n.instruction-icon ion-icon {\n  font-size: 5rem;\n  color: var(--han-purple);\n  --ionicon-stroke-width: 25px;\n}\n\n.instruction-title {\n  color: var(--white);\n  font-family: var(--ff-jost);\n  font-size: var(--fs-3);\n  font-weight: var(--fw-600);\n  margin-block: 15px;\n}\n\n\n\n\n\n/*-----------------------------------*\\\n  #FOOTER\n\\*-----------------------------------*/\n\n.footer { background-color: var(--xiketic); }\n\n.footer-top {\n  padding-block: var(--section-padding);\n  border-block-end: 1px solid hsla(0, 0%, 100%, 0.2);\n  display: grid;\n  gap: 50px 40px;\n}\n\n.footer-text {\n  color: var(--gainsboro);\n  margin-block: 15px 24px;\n}\n\n.social-list {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.social-link {\n  background-color: var(--eerie-black-2);\n  color: var(--cultured);\n  width: 42px;\n  height: 42px;\n  font-size: 1.8rem;\n  border-radius: var(--radius-4);\n  overflow: hidden;\n}\n\n.social-link ion-icon {\n  padding: 12px;\n  transition: var(--transition-2);\n}\n\n.social-link:is(:hover, :focus) ion-icon { transform: translateY(-42px); }\n\n.footer-list-title {\n  color: var(--cultured);\n  font-family: var(--ff-jost);\n  font-size: var(--fs-3);\n  margin-block-end: 20px;\n}\n\n.footer-link {\n  width: max-content;\n  color: var(--gainsboro);\n  margin-block: 12px;\n  transition: var(--transition-1);\n}\n\n.footer-link:is(:hover, :focus) { \n  text-decoration: underline;\n  background-color: hsla(0, 0%, 100%, 0.05);\n}\n\n.newsletter-form { position: relative; }\n\n.newsletter-input {\n  background-color: var(--eerie-black-2);\n  color: var(--gainsboro);\n  font-size: var(--fs-5);\n  padding: 12px 20px;\n  padding-inline-end: 80px;\n  border-radius: var(--radius-4);\n  outline: none;\n  transition: var(--transition-1);\n}\n\n.newsletter-input:focus { box-shadow: 0 0 1px 4px hsl(0, 0%, 40%); }\n\n.newsletter-btn {\n  background-image: var(--gradient-1);\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  padding-inline: 25px;\n  border-radius: 50px 4px 4px 50px;\n}\n\n.newsletter-btn ion-icon { --ionicon-stroke-width: 40px; }\n\n.footer-bottom {\n  color: var(--gainsboro);\n  padding-block: 25px;\n  text-align: center;\n}\n\n.copyright-link {\n  text-decoration: underline;\n  display: inline-block;\n  transition: var(--transition-1);\n}\n\n.copyright-link:is(:hover, :focus) { background-color: hsla(0, 0%, 100%, 0.05); }\n\n\n\n\n\n/*-----------------------------------*\\\n  #BACK TO TOP\n\\*-----------------------------------*/\n\n.back-to-top {\n  position: fixed;\n  bottom: 0;\n  right: 15px;\n  background-color: var(--xiketic);\n  color: var(--cultured);\n  font-size: 2rem;\n  padding: 15px 12px;\n  border-radius: var(--radius-6);\n  box-shadow: var(--shadow-2);\n  z-index: 2;\n  visibility: hidden;\n  opacity: 0;\n  transition: var(--transition-1);\n}\n\n.back-to-top.active {\n  visibility: visible;\n  opacity: 1;\n  transform: translateY(-15px);\n}\n\n.back-to-top:is(:hover, :focus) { background-color: var(--raisin-black); }\n\n\n\n\n\n/*-----------------------------------*\\\n  #MEDIA QUERIES\n\\*-----------------------------------*/\n\n/**\n * responsive for larger than 575px screen\n */\n\n@media (min-width: 575px) {\n\n  /**\n   * REUSED STYLE, FOOTER\n   */\n\n  .grid-list,\n  .footer-top { grid-template-columns: 1fr 1fr; }\n\n}\n\n\n\n\n\n/**\n * responsive for larger than 768px screen\n */\n\n@media (min-width: 768px) {\n\n  /**\n   * CUSTOM PROPERTY\n   */\n\n  :root {\n\n    /**\n     * typography\n     */\n\n    --fs-1: 6.4rem;\n\n  }\n\n\n\n  /**\n   * HEADER\n   */\n\n  .header .btn > span { display: block; }\n\n  .header .btn { --padding: 12px 30px; }\n\n\n\n  /**\n   * HERO\n   */\n\n  .hero {\n    min-height: 700px;\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n  }\n\n  .hero-title { max-width: 650px; }\n\n}\n\n\n\n\n\n/**\n * responsive for larger than 992px screen\n */\n\n@media (min-width: 992px) {\n\n  /**\n   * REUSED STYLE\n   */\n\n  .grid-list { grid-template-columns: repeat(3, 1fr); }\n\n\n\n  /**\n   * INSTRUCTION\n   */\n\n  .instruction .grid-list { grid-template-columns: repeat(4, 1fr); }\n\n\n\n  /**\n   * FOOTER\n   */\n\n  .footer-top { grid-template-columns: 1fr 0.6fr 0.6fr 1fr; }\n\n  .footer-brand { padding-inline-end: 60px; }\n\n}\n\n\n\n\n\n/**\n * responsive for larger than 1200px screen\n */\n\n@media (min-width: 1200px) {\n\n  /**\n   * REUSED STYLE\n   */\n\n  .container {\n    max-width: 1180px;\n    width: 100%;\n    margin-inline: auto;\n  }\n\n  .grid-list { grid-template-columns: repeat(4, 1fr); }\n\n\n\n  /**\n   * HEADER\n   */\n\n  .overlay,\n  .navbar-top,\n  .menu-open-btn { display: none; }\n\n  .navbar,\n  .navbar.active {\n    all: unset;\n    margin-inline: auto;\n  }\n\n  .navbar-list {\n    padding: 0;\n    display: flex;\n    align-items: center;\n    gap: 30px;\n  }\n\n  .navbar-link { --fs-3: 1.6rem; }\n\n\n\n  /**\n   * HERO\n   */\n\n  .hero { min-height: 770px; }\n\n\n\n  /**\n   * TOP SELLER\n   */\n\n  .top-seller .grid-list { grid-template-columns: repeat(3, 1fr); }\n\n\n\n  /**\n   * INSTRUCTION\n   */\n\n  .instruction { padding-block-end: 120px; }\n\n}"]}