@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap");

:root {
  --color-background-black: #121114;
  --color-background-green: #50772a03;
  --color-text-primary: #c0c5bc;
  --color-custom-violet: #dc96ff;
  --color-custom-green-light: #59ff67;
  --color-custom-green-dark: #82a95f;
  --color-custom-black: #1f1e21;
  --color-custom-black-hover: #2d2a31;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
}

body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-color: var(--color-background-black);
}

button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  background: transparent;
}

img,
svg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  color: inherit;
}

.wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

main {
  position: relative;
}

.-container {
  position: relative;
  width: 100%;
  max-width: 628px;
  margin: 0 auto;
  padding: 0px 16px;
}

.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

/* ---------- Page cover ---------- */
.page-cover,
.bg-ellipses--main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.bg-ellipses--desktop {
  display: none;
}

/* ---------- Section Top ---------- */
.top-container {
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top__title {
  width: 100%;
  max-width: 412px;
}
.title__card--green {
  border-radius: 40px;
  background: var(--color-background-green);
  box-shadow: 0px 34px 778px -10px #000;
  padding: 7px 10px;
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
}
.title__card--black {
  border-radius: 34px;
  background: var(--color-background-black);
  padding: 14px 0px;
  backdrop-filter: blur(166px);
  -webkit-backdrop-filter: blur(166px);
  -webkit-border-radius: 34px;
  -moz-border-radius: 34px;
  -ms-border-radius: 34px;
  -o-border-radius: 34px;
}
.title__text {
  font-size: 33.5px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(180deg, #b6dd71 0%, #62773d 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.top__logo {
  width: 100%;
  max-width: 559px;
  height: auto;
  transform: translateY(-47px);
  -webkit-transform: translateY(-47px);
  -moz-transform: translateY(-47px);
  -ms-transform: translateY(-47px);
  -o-transform: translateY(-47px);
}

/* ---------- Section Domains ---------- */
.section-domains {
  transform: translateY(-107px);
  -webkit-transform: translateY(-107px);
  -moz-transform: translateY(-107px);
  -ms-transform: translateY(-107px);
  -o-transform: translateY(-107px);
}
.domains__card--green {
  border-radius: 19px;
  padding: 9px 10px;
  background: var(--color-background-green);
  box-shadow: 0px 26px 59.6px -8px #000;
  backdrop-filter: blur(8.6px);
  -webkit-backdrop-filter: blur(8.6px);
  -webkit-border-radius: 19px;
  -moz-border-radius: 19px;
  -ms-border-radius: 19px;
  -o-border-radius: 19px;
}
.domains__card--black {
  border-radius: 16px;
  padding: 14px 12px;
  background: var(--color-background-black);
  -webkit-backdrop-filter: blur(127px);
  backdrop-filter: blur(127px);
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;

  max-height: 777px;
  overflow-x: auto;
}
.domains__block.online-block {
  margin-bottom: 11px;
}
.online-block .online-block__title {
  font-size: 21px;
  font-weight: 700;
  text-align: center;
  text-transform: capitalize;
  color: var(--color-custom-green-light);
  margin-bottom: 11px;
  text-wrap: balance;
}
.domains__block .domains__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.domains__block .domains__item,
.domains__block .tor-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 6px;
  background: var(--color-custom-black);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  transition: all ease-in 0.15s;
  -webkit-transition: all ease-in 0.15s;
  -moz-transition: all ease-in 0.15s;
  -ms-transition: all ease-in 0.15s;
  -o-transition: all ease-in 0.15s;
}
.domains__block .domains__item:hover,
.domains__block .tor-item:hover {
  background: var(--color-custom-black-hover);
}
.domains__item .item__copy-btn,
.domains__item .item__link,
.tor-item .tor-item__logo,
.tor-item .tor-item__link {
  flex-shrink: 0;
}
.domains__block .item__text {
  color: var(--color-text-primary);
}
.domains__block .item__link {
  margin-left: auto;
}
.domains__item .item__link svg path,
.domains__block .tor-item__link svg path {
  transition: all ease-in 0.15s;
  -webkit-transition: all ease-in 0.15s;
  -moz-transition: all ease-in 0.15s;
  -ms-transition: all ease-in 0.15s;
  -o-transition: all ease-in 0.15s;
}
.domains__block .domains__item:hover svg path,
.domains__block .tor-item:hover svg path {
  fill: var(--color-custom-green-dark);
}

/* ----- TOR Domain item ----- */
.domains__block .tor-item__content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-right: 10px;
}
.domains__block .tor-item__content .tor-item__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-custom-violet);
}
.domains__block .tor-item__content .tor-item__text {
  font-size: 14px;
  color: var(--color-text-primary);
}
.domains__block .tor-item .tor-item__logo {
  display: inline-block;
  width: 20px;
  height: 20px;
}

.our-block .our-block__title {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-transform: capitalize;
  color: var(--color-text-primary);
  margin-bottom: 11px;
}