:root {
  --bg-color: #134a3d;
}

.hero {
  width: 100%;
}

.hero-bottom {
  margin-top: -12%;
}

.nav-grid {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 0.25fr;
  grid-auto-columns: 1fr;
  width: 100%;
  padding-top: 20px;
  display: flex;
  position: relative;
}

.body {
  background-color: var(--bg-color);
  color: #fff;
  font-family: Coconutz, sans-serif;
}

.nav-25 {
  width: 25%;
}

.nav-10 {
  width: 10%;
}

.nav-30 {
  width: 30%;
  position: relative;
}

.light-img {
  width: 30vw;
  position: absolute;
  inset: 0%;
}

.light-img.right {
  bottom: auto;
  left: auto;
  right: 20vw;
}

.light-img.left {
  bottom: auto;
  left: 15vw;
  right: auto;
}

.middle-shelf-top {
  transform: rotate(-7deg);
}

.icons-shelf-right {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  position: absolute;
  inset: 18% 0% auto;
}

.telegram-link,
.twitter-link {
  cursor: pointer;
}

.page-content {
  background-image: url("../images/bg-lines.webp");
  background-position: 0 0;
  background-repeat: repeat-y;
  background-size: contain;
  margin-top: 0;
  position: relative;
  overflow: hidden;
}

.code {
  display: none;
}

.hero-top-grid {
  display: flex;
}

.hero-top-72-5 {
  width: 72.5%;
  margin-top: -14%;
  position: relative;
  transform: rotate(4deg);
}

.nav-top-12-5 {
  width: 12.5%;
}

.nav-top-15 {
  width: 15%;
}

.hanging-pic {
  min-width: 20vw;
}

.hanging-pic.right {
  min-width: 25vw;
  margin-top: -50%;
  margin-left: -103%;
}

.hero-bottom-grid {
  display: flex;
}

.hero-bottom-10 {
  align-items: center;
  width: 10%;
  display: flex;
}

.hero-bottom-75 {
  width: 80%;
}

.hero-bottom-20 {
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
  width: 10%;
  display: flex;
}

.cactus,
.lava-lamp {
  min-width: 20vw;
}

.bbc-sign {
  min-width: 20vw;
  margin-top: -70%;
}

.group-img {
  position: relative;
}

.carousel {
  width: 100vw;
}

.heading {
  text-align: center;
  font-size: 3.5vw;
}

.carosel-cont {
  align-items: center;
  margin-top: 10%;
  display: flex;
  position: relative;
}

.empty {
  height: 500px;
}

.carosel-bg-img {
  position: absolute;
  inset: -50% 0% 0%;
}

.marquee {
  z-index: 2;
  grid-column-gap: 1rem;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.marquee-content {
  grid-column-gap: 1rem;
  flex: none;
  justify-content: space-around;
  min-width: 100%;
  display: flex;
}

.text-block {
  color: #134a47;
  -webkit-text-stroke-width: 0.1ch;
  -webkit-text-stroke-color: #000;
  text-transform: uppercase;
  font-size: 4vw;
  line-height: 1;
}

.carosel-img-cont {
  z-index: 0;
  position: absolute;
  transform: rotate(-1deg);
}

.carosel-img {
  min-width: 120vw;
  margin-top: -1%;
}

.signboard-section {
  width: 100vw;
}

.sbs-top-grid {
  display: flex;
}

.sbs-top-12-5 {
  align-items: center;
  width: 20%;
  display: flex;
}

.sbs-top-72-5 {
  width: 60%;
  position: relative;
  transform: rotate(4deg);
}

.sbs-top-15 {
  align-items: center;
  width: 20%;
  display: flex;
}

.sbs-post-note {
  max-width: 10vw;
  margin-left: auto;
  margin-right: auto;
}

.sbs-post-note.right {
  min-width: 25vw;
  margin-top: -50%;
  margin-left: -103%;
}

.sbs-post-note.right-side {
  max-width: 100%;
  margin-top: -50%;
}

.sbs-bottom {
  margin-top: -30%;
  position: relative;
}

.statements-section {
  z-index: 0;
  width: 100vw;
  position: relative;
}

.ss-row {
  display: flex;
}

.ss-row.opposite {
  flex-direction: row-reverse;
}

.ss-row-small {
  width: 40%;
  position: relative;
}

.ss-row-large {
  width: 60%;
}

.ss-board {
  flex-direction: column;
  position: relative;
}

.ss-board-top {
  width: 100%;
  height: 20%;
}

.ss-board-bottom {
  width: 100%;
  height: 80%;
  padding: 1% 5%;
}

.ss-board-content {
  flex-direction: column;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.ss-board-text {
  color: var(--bg-color);
  text-align: center;
  text-transform: uppercase;
  font-size: 2vw;
  line-height: 1.2;
}

.ss-board-woman {
  z-index: 2;
  min-width: 50vw;
  margin-bottom: -20%;
  margin-left: -20%;
  padding-top: 40%;
  position: relative;
}

.cash-cont {
  width: 60%;
  position: relative;
  transform: rotate(21deg);
}

.cash-img.top {
  position: absolute;
  inset: 0%;
  transform: rotate(16deg);
}

.cash {
  z-index: 1;
  width: 80%;
  position: absolute;
  inset: 35% auto 0% -15%;
}

.cigar {
  width: 30%;
  position: absolute;
  inset: auto -7.5% -10% auto;
  transform: rotate(-16deg);
}

.wine {
  width: 40%;
  position: absolute;
  inset: auto -21.5% -17% auto;
  transform: rotate(24deg);
}

.join-section {
  width: 100vw;
  margin-top: -10%;
}

.join-sign {
  width: 25%;
  position: absolute;
}

.join-section-content {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.ss-bg {
  z-index: -1;
  background-image: url("../images/bg-lines.webp");
  background-position: 0 0;
  background-size: contain;
  position: absolute;
  inset: -20% 0% 0%;
}

.tokenomics-content {
  justify-content: center;
  display: flex;
}

.tokenomics-sign {
  margin-left: auto;
  margin-right: auto;
}

.tokes-20 {
  flex-direction: column;
  justify-content: space-around;
  width: 20%;
  display: flex;
}

.tokes-20.top {
  justify-content: flex-start;
}

.tokes-60 {
  width: 60%;
}

.top-images {
  justify-content: space-between;
  display: flex;
}

.qna-hanging-pic {
  max-width: 25vw;
  transform: rotate(13deg);
}

.qna-hanging-pic.right {
  transform: rotate(-27deg);
}

.left-pic-cont {
  margin-top: -5%;
}

.footer {
  width: 100vw;
}

.footer-bottom {
  display: flex;
  position: relative;
}

.foot-top-cont {
  display: flex;
}

.foot-top-20 {
  align-items: center;
  width: 20%;
  display: flex;
}

.foot-top-60 {
  width: 60%;
  margin-bottom: -16px;
}

.note-foot {
  margin-top: -50%;
  transform: rotate(24deg);
}

.painting-foot {
  transform: rotate(-24deg);
}

.footer-bottom-cont {
  align-items: flex-end;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.footer-bottom-grid {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 55%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.music {
  margin-bottom: 30px;
}

.play-pause {
  z-index: 10;
  background-color: var(--bg-color);
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  display: flex;
  position: fixed;
  inset: 0% auto auto 0%;
}

.play-pause:hover {
  color: #afff83;
}

.play-icon,
.pause-icon {
  justify-content: center;
  align-items: center;
  display: flex;
}

.inital-popup {
  z-index: 999999;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0%;
}

.inital-popup.hidden {
  display: none;
}

.enter-no {
  background-color: #e10603;
  border-radius: 3rem;
  margin-left: 10px;
  margin-right: 10px;
}

.enter-yes {
  background-color: #05d904;
  border-radius: 3rem;
  margin-left: 10px;
  margin-right: 10px;
}

.enter-top-1 {
  background-color: #e00404;
  justify-content: center;
  align-items: center;
  padding: 15px;
  display: flex;
}

.enter-bottom {
  background-color: #fff;
  justify-content: center;
  padding: 16px;
  display: flex;
}

.enter-mid {
  background-color: #000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  font-size: 18px;
  display: flex;
}

.enter-cont {
  flex-direction: column;
  width: 500px;
  display: flex;
}

.enter-mid-top-txt {
  text-transform: uppercase;
}

.enter-top-paragraph {
  word-break: normal;
  margin-bottom: 0;
}

.popup-bg {
  z-index: -1;
  -webkit-backdrop-filter: grayscale() blur(50px);
  backdrop-filter: grayscale() blur(50px);
  background-image: linear-gradient(#00000080, #00000080);
  position: absolute;
  inset: 0%;
}

.desktop {
  z-index: 1;
  background-color: #9df1ff;
  background-image: url("https://www.strongbrokeboys.club/images/CASINO.svg");
  background-position: 0 0;
  background-size: auto;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.desktop.edit {
  background-color: #0000;
  background-image: linear-gradient(#00000040, #00000040),
    url("../images/club-entry.png");
  background-position: 0 0, 50% 0;
  background-size: auto, cover;
}

.non-desktop {
  display: none;
}

.bg-vid {
  z-index: 2;
  object-fit: fill;
  flex: 0 auto;
  width: 100%;
  position: static;
  overflow: visible;
}

.filler-bg {
  z-index: 1;
  background-color: #9df1ff;
  flex: 1;
  position: relative;
}

.enter-button {
  z-index: 999;
  cursor: pointer;
  width: 25%;
  position: absolute;
  inset: 15% auto auto 5%;
}

.enter-button.edit-new {
  width: 40%;
}

.top-content-container {
  position: relative;
}

.top-bg {
  z-index: -1;
  mix-blend-mode: multiply;
  background-image: url("../images/ethereum-logo.png");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 70%;
  position: absolute;
  inset: 0%;
}

.top-bg-pre {
  z-index: 1;
  mix-blend-mode: darken;
  background-image: url("../images/ethereum-logo.png");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 70%;
  position: absolute;
  inset: 0%;
}

.image {
  z-index: 5;
  position: relative;
}

.button-group {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.button-group.ca {
  padding-top: 20px;
  padding-bottom: 20px;
}

.copy-to-clipboard.button-2 {
  cursor: pointer;
  background-color: #21a171;
  border: 5px solid #000;
  border-radius: 1rem;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  font-size: 1.75rem;
}

.copy-to-clipboard.button-2:hover {
  background-color: #134a3d;
}

.c2c-txt {
  margin-bottom: 0;
}

.c2c-txt.tablet {
  display: none;
}

@media screen and (max-width: 991px) {
  .desktop {
    display: none;
  }

  .non-desktop {
    background-color: var(--bg-color);
    background-image: linear-gradient(#00000080, #00000080),
      url("../images/club-entry.png"), url("../images/bg-lines.webp");
    background-position: 0 0, 50% 0, 0 0;
    background-size: auto, cover, contain;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
  }

  .enter-button.mobile {
    width: 50%;
    position: static;
    inset: 0%;
  }

  .loading {
    width: 60%;
  }

  .loading.invert {
    filter: invert();
  }

  .button-group.ca {
    justify-content: center;
    align-items: center;
  }
}

@media screen and (max-width: 767px) {
  .non-desktop {
    background-image: linear-gradient(to bottom, null, null),
      url("../images/club-entry.png"), url("../images/bg-lines.webp");
    background-position: 0 0, 50% 0, 50% 0;
  }

  .c2c-txt {
    display: none;
  }

  .c2c-txt.tablet {
    display: block;
  }
}

@media screen and (max-width: 479px) {
  .enter-cont {
    max-width: 95%;
  }

  .enter-top-paragraph {
    font-size: 17px;
  }

  .c2c-txt.tablet {
    font-size: 1rem;
  }
}

@font-face {
  font-family: "Coconutz";
  src: url("../fonts/coconutz.woff2.woff2") format("woff2"),
    url("https://www.strongbrokeboys.club/fonts/coconutz.woff") format("woff"),
    url("https://www.strongbrokeboys.club/fonts/coconutz.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}