* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  user-select: none;
}

body,
html {
  position: relative;
  height: auto;
  width: 100%;
  font-size: 0.7292vw;
  overflow-y: auto;
  overflow-x: hidden;
  color: white;
  background: #0d0d0d;
  transition: all 0.3s ease;
  -webkit-font-smoothing: antialiased;
}
@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.form {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: auto;
  overflow: hidden;
  animation: show 0.5s linear 0s;
}
span,
div:not(.form),
img,
svg,
path,
input {
  transition: all 0.3s ease;
}

.intro {
  position: relative;
  background-image: url("../images/first_page.png");
  background-size: 100% 110%;
  height: 45vw;
}
.choose_role {
  position: relative;
  height: 44.53125vw;
}
.steps_links {
  position: relative;
  height: 37.76042vw;
  background-image: url("../images/second_page.png");
  background-size: 100% 100%;
}
.top_qestions {
  position: relative;
  height: 29.47917vw;
  background-image: url("../images/third_page.png");
  background-clip: 100% 100%;
}
.palm_first {
  width: 30.625vw;
  height: 47.13542vw;
  position: absolute;
  left: 0;
  top: -12.23958vw;
}
.palm_second {
  width: 26.71875vw;
  height: 58.48958vw;
  position: absolute;
  right: 0;
  bottom: -21.04167vw;
}
img {
  pointer-events: none;
}
.box_role {
  position: relative;
  height: 23.90625vw;
  padding: 1.25vw;
  border-radius: 0.83333vw;
  border: 0.05208vw solid rgba(255, 255, 255, 0.05);
  background: #131313;
}
.icn_role {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.main_wrap_choose {
  position: relative;
}
.shadow_role {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  transition: all 0.3s ease;
  opacity: 0;
}
.button_start_role {
  position: relative;
  height: 2.5vw;
  border-radius: 0.20833vw;
  transition: all 0.3s ease;
  cursor: pointer;
  font-size: 0.83333vw;
  font-family: "Medium";
  color: black;
  gap: 0.41667vw;
  margin-top: auto;
  opacity: 0;
}
.box_role {
  transition: all 0.3s ease;
  cursor: pointer;
}
.box_role:hover .button_start_role {
  opacity: 1;
}
.box_role:hover .shadow_role {
  opacity: 0.5;
}
.box_role:active {
  opacity: 0.75;
}
.box_role:hover {
  transform: translateY(0.3vw);
}
.med .button_start_role {
  background: #ff6163;
  box-shadow: 0px 1.14583vw 2.28646vw rgba(255, 97, 99, 0.25);
}
.police .button_start_role {
  background: #769cff;
  box-shadow: 0vw 1.14583vw 2.28646vw rgba(118, 156, 255, 0.25);
}
.builder .button_start_role {
  background: #ffba76;
  box-shadow: 0vw 1.14583vw 2.28646vw rgba(255, 186, 118, 0.25);
}
.gangster .button_start_role {
  background: #f60b0e;
  box-shadow: 0vw 1.14583vw 2.28646vw rgba(246, 11, 14, 0.25);
}
.army .button_start_role {
  background: #7e8e5c;
  box-shadow: 0vw 1.14583vw 2.28646vw rgba(126, 142, 92, 0.25);
}
.med:hover {
  border: 0.05208vw solid rgba(255, 97, 99, 0.25);
  background: rgba(255, 97, 99, 0.1);
}
.police:hover {
  border: 0.05208vw solid rgba(118, 156, 255, 0.25);
  background: rgba(118, 156, 255, 0.1);
}
.builder:hover {
  border: 0.05208vw solid rgba(255, 186, 118, 0.25);
  background: rgba(255, 186, 118, 0.1);
}
.gangster:hover {
  border: 0.05208vw solid rgba(246, 11, 14, 0.25);
  background: rgba(246, 11, 14, 0.1);
}
.army:hover {
  border: 0.05208vw solid rgba(126, 142, 92, 0.25);
  background: rgba(126, 142, 92, 0.1);
}
.button_start_role svg {
  width: 1.04167vw;
  height: 1.04167vw;
}
.header_role {
  height: 3.07292vw;
  border-radius: 0.41667vw;
  padding: 0.625vw 0.83333vw;
  gap: 0.46875vw;
  background: rgba(0, 0, 0, 0.15);
}
.min_box {
  width: 1.40625vw;
  height: 1.40625vw;
  border-radius: 0.15625vw;
  background: #212121;
}
.row_title {
  font-size: 1.33333vw;
  font-family: "Regular";
}
.row_role span:first-child {
  font-size: 0.83333vw;
  font-family: "Regular";
  color: rgba(255, 255, 255, 0.75);
}
.row_role span:last-child {
  font-size: 0.83333vw;
  font-family: "Bold";
  letter-spacing: -0.0375vw;
}

.header_best {
  padding: 0.46875vw 0.52083vw;
  border-radius: 0.26042vw;
  gap: 0.3125vw;
  background: rgba(246, 11, 14, 0.1);
}
.header_best svg {
  width: 1.04167vw;
  height: 1.04167vw;
}
.header_best span {
  font-size: 0.83333vw;
  font-family: "Medium";
  color: #f60b0e;
}
.main_text {
  font-size: 2.86458vw;
  font-family: "BOLD";
  line-height: 95%; /* 52.25px */
  letter-spacing: -0.15755vw;
}
.row_content {
  margin-top: 1.25vw;
}
.description {
  font-size: 0.9375vw;
  font-family: "Regular";
  letter-spacing: -0.02813vw;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 2.08333vw;
  max-width: 34.375vw;
}
.button_start {
  width: 12.34375vw;
  height: 3.69792vw;
  border-radius: 2.60417vw;
  background: #f60b0e;
  transition: all 0.3s ease;
  cursor: pointer;
  gap: 0.41667vw;
  font-size: 0.9375vw;
  margin-top: 3.75vw;
  font-family: "Medium";
  letter-spacing: -0.02813vw;
  color: black;
  box-shadow: 0px 1.97917vw 5.08333vw rgba(246, 11, 14, 0.25);
}
.button_start svg {
  width: 1.25vw;
  height: 1.25vw;
}
.button_start:hover {
  transform: translateY(0.2vw);
  box-shadow: 0px 1.97917vw 5.08333vw rgba(246, 11, 14, 0.5);
}
.button_start:active {
  opacity: 0.75;
  transform: translateY(0.2vw) scale(0.99);
}
.content_wrap {
  margin-top: 2vw;
}
.l_w svg {
  width: 0.78125vw;
  height: 1.04167vw;
}
.l_w {
  bottom: -3vw;
  position: absolute;
  gap: 0.625vw;
}
.l_w span {
  font-size: 0.83333vw;
  font-family: "Bold";
  letter-spacing: -0.025vw;
}
.flex_roles {
  gap: 1.25vw;
}
.row_page span:first-child {
  font-size: 0.9375vw;
  font-family: "Bold";
  letter-spacing: -0.04219vw;
}
.row_page span:last-child {
  font-size: 0.9375vw;
  font-family: "Regular";
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}
.line_page {
  height: 0.10417vw;
  background: #161616;
}
.header_page {
  gap: 2.5vw;
}
.main_wrap_choose {
  gap: 2.5vw;
}
.link_box {
  width: 8.14219vw;
  height: 9.6875vw;
  border-radius: 0.83333vw;
  background-size: 100% 100%;
  transition: all 0.3s ease;
  cursor: pointer;
}
.link_box:active {
  opacity: 0.75;
}
.link_box:hover {
  transform: translateY(0.2vw);
}
.discord {
  background-image: url("../images/discord_box.png");
}
.youtube {
  background-image: url("../images/youtube.png");
}
.tiktok {
  background-image: url("../images/tiktok.png");
}
.discord:hover {
  box-shadow: 0px 0.83333vw 3.75vw rgba(88, 101, 242, 0.25);
}
.youtube:hover {
  box-shadow: 0px 0.83333vw 3.75vw rgba(234, 51, 35, 0.25);
}
.tiktok:hover {
  box-shadow: 0px 0.83333vw 3.75vw rgba(141, 244, 238, 0.25);
}
.pannel_step {
  background: #131313;
  padding: 0.83333vw 0.83333vw 0.83333vw 1.25vw;
  border-radius: 0.41667vw;
}
.pannel_step img {
  width: 1.875vw;
  height: 1.875vw;
}

.row_step {
  margin-left: 0.83333vw;
}
.row_step span:first-child {
  font-size: 0.9375vw;
  font-family: "Bold";
  letter-spacing: -0.01875vw;
}
.row_step span:last-child {
  font-size: 0.83333vw;
  font-family: "Regular";
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: -0.01667vw;
}
.button_step {
  cursor: pointer;
  width: 9.27083vw;
  height: 2.76042vw;
  margin-left: auto;
  font-size: 0.83333vw;
  font-family: "Medium";
  color: black;
  border-radius: 0.20833vw;
  gap: 0.41667vw;
  background: #f60b0e;
  box-shadow: 0vw 1.97917vw 5.08333vw 0vw rgba(246, 11, 14, 0.25);
}
.button_step svg {
  width: 1.09375vw;
  height: 1.09375vw;
}
.button_step:hover {
  transform: translateY(0.1vw);
  box-shadow: 0vw 1.97917vw 5.08333vw 0vw rgba(246, 11, 14, 0.5);
}
.button_step:active {
  opacity: 0.75;
  transform: translateY(0.1vw) scale(0.99);
}
.row_blocks_steps {
  gap: 0.83333vw;
}
.flex_links {
  gap: 1.25vw;
}
.main_wrap_steps {
  align-items: flex-start;
}
.first_cont_steps {
  height: 14.47917vw;
}
.second_cont_steps {
  height: 14.47917vw;
}
.main_wrap_steps {
  gap: 2.5vw;
}
.discord:hover {
  background-image: url("../images/discord_hover.png");
}
.youtube:hover {
  background-image: url("../images/youtube_hover.png");
}
.tiktok:hover {
  background-image: url("../images/tiktok_hover.png");
}
.main_wrap_steps {
  position: relative;
}
.circles {
  position: absolute;
  width: 25.72917vw;
  height: 25.72917vw;
}

.bußgeldkatalog {
  cursor: pointer;
  width: 8.125vw;
  gap: 0.41667vw;
  height: 2.29167vw;
  border-radius: 2.08333vw;
  font-size: 0.72917vw;
  font-family: "Medium";
  letter-spacing: -0.02187vw;
  background: #f60b0e;
  box-shadow: 0vw 0.97917vw 3.08333vw rgba(246, 11, 14, 0.25);
}

.box_quest {
  width: 31.17188vw;
  height: 5.83333vw;
  border-radius: 0.41667vw;
  border: 0.05208vw solid #212121;
  background: #161616;
  padding: 1.25vw;
}
.flex_wrap {
  gap: 1.25vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.box_quest {
  gap: 0.20833vw;
  justify-content: center;
}
.box_quest span:first-child {
  font-size: 0.83333vw;
  font-family: "Bold";
  letter-spacing: -0.01667vw;
}
.box_quest span:last-child {
  font-size: 0.83333vw;
  font-family: "Regular";
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: -0.01667vw;
}
.main_wrap_questions {
  position: relative;
  gap: 2.08333vw;
}
.start_play_sec {
  transition: all 0.3s ease;
  cursor: pointer;
  width: 8.125vw;
  gap: 0.41667vw;
  height: 2.29167vw;
  border-radius: 2.08333vw;
  font-size: 0.72917vw;
  font-family: "Medium";
  letter-spacing: -0.02187vw;
  background: #f60b0e;
  box-shadow: 0vw 0.97917vw 3.08333vw rgba(246, 11, 14, 0.25);
}
.start_play_sec:hover {
  transform: translateY(0.1vw);
  box-shadow: 0vw 0.97917vw 3.08333vw rgba(246, 11, 14, 0.5);
}
.start_play_sec svg {
  width: 1.04167vw;
  height: 1.04167vw;
}
.start_play_sec:active {
  transform: translateY(0.1vw) scale(0.99);
  opacity: 0.75;
}
.header {
  padding: 2.91667vw 18.20313vw 0vw 18.20313vw;
  position: absolute;
  top: 0;
}
.flex_header_links {
  gap: 1.25vw;
}
.flex_header_links span {
  transition: all 0.3s ease;
  font-size: 0.83333vw;
  font-family: "MEDIUM";
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: -0.0375vw;
}
.flex_header_links span:hover {
  color: white;
  transform: translateY(0.1vw);
}
.flex_header_links:active {
  opacity: 0.75;
}
.row_footer span:first-child {
  font-size: 0.83333vw;
  font-family: "Bold";
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.01667vw;
}
.row_footer span:last-child {
  font-size: 0.72917vw;
  font-family: "Regular";
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: -0.01458vw;
}
.footer {
  height: 10.15625vw;
  background: #161616;
}
.pre_footer {
  gap: 1.25vw;
}
.pre_footer .row_footer {
  gap: 0.83333vw;
}
.pre_footer .row_footer span {
  -webkit-user-select: text;
}
.pre_footer {
  padding-right: 3.75vw;
  border-right: 0.05208vw solid rgba(255, 255, 255, 0.15);
}
.flex_links_footer {
  margin-left: 3.75vw;
  gap: 2.08333vw;
}
.flex_links_footer span {
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.83333vw;
  font-family: "Medium";
  letter-spacing: -0.01667vw;
  color: rgba(255, 255, 255, 0.75);
}
.flex_links_footer span:hover {
  color: white;
  transform: translateY(0.1vw);
}
.flex_links_footer span:active {
  opacity: 0.75;
}
.brush_first {
  position: absolute;
  width: 100vw;
  height: 12.5vw;
  top: -3.9625vw;
}
.regelwerk {
  min-height: 100%;
  width: 100%;
  height: auto;
  padding: 13.64583vw 18.20313vw;
}

.regelwerkheader {
  position: relative !important;
}
.row_rules {
  gap: 0.41667vw;
  padding-bottom: 1.25vw;
  border-bottom: 0.05208vw solid rgba(255, 255, 255, 0.15);
}
.row_rules span:first-child {
  margin-top: 1vw;
  font-size: 0.9375vw;
  font-family: "Bold";
  text-transform: uppercase;
  letter-spacing: -0.04219vw;
  -webkit-user-select: text;
}
.row_rules span:last-child {
  font-size: 0.9375vw;
  font-family: "Regular";
  -webkit-user-select: text;
  color: rgba(255, 255, 255, 0.85);
}
.regelwerk {
  gap: 3.75vw;
}
.logo {
  cursor: pointer !important;
  pointer-events: all;
  height: 3.6776vw;
}
a {
  text-decoration: none;
}
@media (max-width: 800px) {
  .intro {
    position: relative;
    height: auto;
    padding: 21.20313vw 10.20313vw !important;
    background-image: url("../images/first_page.png");
    background-size: 500% 110%;
  }
  .choose_role {
    position: relative;
    height: auto;
    padding: 30.20313vw 21.20313vw !important;
  }
  .steps_links {
    height: auto;
    padding: 21.20313vw 21.20313vw !important;
    background-image: url("../images/second_page.png");
    background-size: 600% 100%;
  }
  .top_qestions {
    position: relative;
    height: auto;
    padding: 21.20313vw 21.20313vw !important;
    background-image: url("../images/third_page.png");
    background-clip: 300% 100%;
  }
  .palm_first {
    width: 136.74419vw;
    height: auto;
    position: absolute;
    left: 0;
    top: -54.65115vw;
  }
  .palm_second {
    width: 119.30233vw;
    height: 261.16278vw;
    position: absolute;
    right: 0;
    bottom: -93.9535vw;
  }
  img {
    pointer-events: none;
  }
  .box_role {
    position: relative;
    height: 110.74419vw;
    padding: 5.5814vw;
    border-radius: 3.72092vw;
    border: 0.23254vw solid rgba(255, 255, 255, 0.05);
    background: #131313;
  }
  .icn_role {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .main_wrap_choose {
    position: relative;
  }
  .shadow_role {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    transition: all 0.3s ease;
    opacity: 0;
  }
  .button_start_role {
    position: relative;
    height: 11.16279vw;
    border-radius: 0.93022vw;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 3.72092vw;
    font-family: "Medium";
    color: black;
    gap: 1.86048vw;
    margin-top: auto;
    opacity: 0;
  }
  .box_role {
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .box_role:hover .button_start_role {
    opacity: 1;
  }
  .box_role:hover .shadow_role {
    opacity: 0.5;
  }
  .box_role:active {
    opacity: 0.75;
  }
  .box_role:hover {
    transform: translateY(1.33953vw);
  }
  .med .button_start_role {
    background: #ff6163;
    box-shadow: 0px 5.11627vw 10.20931vw rgba(255, 97, 99, 0.25);
  }
  .police .button_start_role {
    background: #769cff;
    box-shadow: 0vw 5.11627vw 10.20931vw rgba(118, 156, 255, 0.25);
  }
  .builder .button_start_role {
    background: #ffba76;
    box-shadow: 0vw 5.11627vw 10.20931vw rgba(255, 186, 118, 0.25);
  }
  .gangster .button_start_role {
    background: #f60b0e;
    box-shadow: 0vw 5.11627vw 10.20931vw rgba(246, 11, 14, 0.25);
  }
  .army .button_start_role {
    background: #7e8e5c;
    box-shadow: 0vw 5.11627vw 10.20931vw rgba(126, 142, 92, 0.25);
  }
  .med:hover {
    border: 0.23254vw solid rgba(255, 97, 99, 0.25);
    background: rgba(255, 97, 99, 0.1);
  }
  .police:hover {
    border: 0.23254vw solid rgba(118, 156, 255, 0.25);
    background: rgba(118, 156, 255, 0.1);
  }
  .builder:hover {
    border: 0.23254vw solid rgba(255, 186, 118, 0.25);
    background: rgba(255, 186, 118, 0.1);
  }
  .gangster:hover {
    border: 0.23254vw solid rgba(246, 11, 14, 0.25);
    background: rgba(246, 11, 14, 0.1);
  }
  .army:hover {
    border: 0.23254vw solid rgba(126, 142, 92, 0.25);
    background: rgba(126, 142, 92, 0.1);
  }
  .button_start_role svg {
    width: 4.65118vw;
    height: 4.65118vw;
  }
  .header_role {
    height: 13.72094vw;
    border-radius: 1.86048vw;
    padding: 2.7907vw 3.72092vw;
    gap: 2.09302vw;
    background: rgba(0, 0, 0, 0.15);
  }
  .min_box {
    width: 6.27907vw;
    height: 6.27907vw;
    border-radius: 0.69767vw;
    background: #212121;
  }
  .row_role span:first-child {
    font-size: 3.72092vw;
    font-family: "Regular";
    color: rgba(255, 255, 255, 0.75);
  }
  .row_role span:last-child {
    font-size: 3.72092vw;
    font-family: "Bold";
    letter-spacing: -0.16744vw;
  }

  .header_best {
    padding: 2.09302vw 2.32557vw;
    border-radius: 1.1628vw;
    gap: 1.39535vw;
    background: rgba(246, 11, 14, 0.1);
  }
  .header_best svg {
    width: 4.65118vw;
    height: 4.65118vw;
  }
  .header_best span {
    font-size: 3.72092vw;
    font-family: "Medium";
    color: #f60b0e;
  }
  .main_text {
    font-size: 10.79068vw;
    font-family: "BOLD";
    line-height: 95%; /* 11.70181px */
    letter-spacing: -0.70348vw;
  }
  .row_content {
    margin-top: 5.5814vw;
  }
  .description {
    font-size: 3.18605vw;
    font-family: "Regular";
    letter-spacing: -0.1256vw;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 9.30231vw;
    max-width: 153.48837vw;
  }
  .button_start {
    width: 55.11628vw;
    height: 16.51164vw;
    border-radius: 11.62792vw;
    background: #f60b0e;
    transition: all 0.3s ease;
    cursor: pointer;
    gap: 1.86048vw;
    font-size: 4.18605vw;
    margin-top: 16.74419vw;
    font-family: "Medium";
    letter-spacing: -0.1256vw;
    color: black;
    box-shadow: 0px 8.83722vw 22.69766vw rgba(246, 11, 14, 0.25);
  }
  .button_start svg {
    width: 5.5814vw;
    height: 5.5814vw;
  }
  .button_start:hover {
    transform: translateY(0.89302vw);
    box-shadow: 0px 8.83722vw 22.69766vw rgba(246, 11, 14, 0.5);
  }
  .button_start:active {
    opacity: 0.75;
    transform: translateY(0.89302vw) scale(0.99);
  }
  .content_wrap {
    margin-top: 25.93023vw;
  }
  .l_w svg {
    width: 3.48837vw;
    height: 4.65118vw;
  }
  .l_w {
    bottom: -13.39535vw;
    position: absolute;
    gap: 2.7907vw;
  }
  .l_w span {
    font-size: 3.72092vw;
    font-family: "Bold";
    letter-spacing: -0.11163vw;
  }
  .flex_roles {
    gap: 5.5814vw;
    flex-direction: column !important;
  }
  .row_page span:first-child {
    font-size: 4.18605vw;
    font-family: "Bold";
    letter-spacing: -0.18838vw;
  }
  .row_page span:last-child {
    font-size: 4.18605vw;
    font-family: "Regular";
    color: rgba(255, 255, 255, 0.75);
    white-space: wrap;
    margin-top: 2vw;
  }
  .circles {
    display: none;
  }
  .row_page {
    text-align: center;
  }
  .line_page {
    height: 0.46513vw;
    display: none;
    background: #161616;
  }
  .header_page {
    gap: 11.16279vw;
  }
  .main_wrap_choose {
    gap: 11.16279vw;
    display: flex;
    flex-direction: column !important;
  }
  .header_page {
    text-align: center;
    justify-content: center;
  }
  .header_page .line_page {
    display: none;
  }

  .link_box {
    width: 36.35583vw;
    height: 43.25581vw;
    border-radius: 3.72092vw;
    background-size: 100% 100%;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .link_box:active {
    opacity: 0.75;
  }
  .link_box:hover {
    transform: translateY(0.89302vw);
  }
  .discord {
    background-image: url("../images/discord_box.png");
  }
  .youtube {
    background-image: url("../images/youtube.png");
  }
  .tiktok {
    background-image: url("../images/tiktok.png");
  }
  .discord:hover {
    box-shadow: 0px 3.72092vw 16.74419vw rgba(88, 101, 242, 0.25);
  }
  .youtube:hover {
    box-shadow: 0px 3.72092vw 16.74419vw rgba(234, 51, 35, 0.25);
  }
  .tiktok:hover {
    box-shadow: 0px 3.72092vw 16.74419vw rgba(141, 244, 238, 0.25);
  }
  .pannel_step {
    background: #131313;
    padding: 6.72092vw 3.72092vw 7.72092vw 5.5814vw;
    border-radius: 1.86048vw;
    display: flex;
    flex-direction: column;
  }
  .pannel_step img {
    width: 8.37209vw;
    height: 8.37209vw;
  }

  .row_step {
    margin-left: 3.72092vw;
  }
  .row_step span:first-child {
    font-size: 4.18605vw;
    font-family: "Bold";
    letter-spacing: -0.08372vw;
  }
  .row_step span:last-child {
    font-size: 3.72092vw;
    font-family: "Regular";
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: -0.07443vw;
  }
  .button_step {
    cursor: pointer;
    width: 41.39533vw;
    height: 12.3256vw;
    margin-left: auto;
    font-size: 3.72092vw;
    font-family: "Medium";
    color: black;
    border-radius: 0.93022vw;
    gap: 1.86048vw;
    background: #f60b0e;
    box-shadow: 0vw 8.83722vw 22.69766vw 0vw rgba(246, 11, 14, 0.25);
  }
  .button_step svg {
    width: 4.88372vw;
    height: 4.88372vw;
  }
  .button_step:hover {
    transform: translateY(0.44651vw);
    box-shadow: 0vw 8.83722vw 22.69766vw 0vw rgba(246, 11, 14, 0.5);
  }
  .button_step:active {
    opacity: 0.75;
    transform: translateY(0.44651vw) scale(0.99);
  }
  .row_blocks_steps {
    gap: 3.72092vw;
  }
  .flex_links {
    gap: 5.5814vw;
  }
  .main_wrap_steps {
    align-items: center;
    flex-direction: column;
  }
  .first_cont_steps {
  }
  .second_cont_steps {
    height: 64.65118vw;
  }
  .main_wrap_steps {
    gap: 11.16279vw;
  }
  .discord:hover {
    background-image: url("../images/discord_hover.png");
  }
  .youtube:hover {
    background-image: url("../images/youtube_hover.png");
  }
  .tiktok:hover {
    background-image: url("../images/tiktok_hover.png");
  }
  .main_wrap_steps {
    position: relative;
  }
  .circles {
    position: absolute;
    width: 114.88373vw;
    height: 114.88373vw;
  }
  .box_quest {
    width: 139.18607vw;
    height: 26.0465vw;
    border-radius: 1.86048vw;
    border: 0.23254vw solid #212121;
    background: #161616;
    padding: 5.5814vw;
  }
  .flex_wrap {
    gap: 5.5814vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .box_quest {
    gap: 0.93022vw;
    justify-content: center;
  }
  .box_quest span:first-child {
    font-size: 3.72092vw;
    font-family: "Bold";
    letter-spacing: -0.07443vw;
  }
  .box_quest span:last-child {
    font-size: 3.72092vw;
    font-family: "Regular";
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: -0.07443vw;
  }
  .main_wrap_questions {
    position: relative;
    gap: 9.30231vw;
  }
  .start_play_sec {
    transition: all 0.3s ease;
    cursor: pointer;
    width: 36.27907vw;
    gap: 1.86048vw;
    height: 10.23257vw;
    border-radius: 9.30231vw;
    font-size: 3.25583vw;
    font-family: "Medium";
    letter-spacing: -0.09765vw;
    background: #f60b0e;
    box-shadow: 0vw 4.37211vw 13.76743vw rgba(246, 11, 14, 0.25);
  }
  .start_play_sec:hover {
    transform: translateY(0.44651vw);
    box-shadow: 0vw 4.37211vw 13.76743vw rgba(246, 11, 14, 0.5);
  }
  .start_play_sec svg {
    width: 4.65118vw;
    height: 4.65118vw;
  }
  .start_play_sec:active {
    transform: translateY(0.44651vw) scale(0.99);
    opacity: 0.75;
  }
  .header {
    padding: 13.02327vw 81.27909vw 0vw 81.27909vw;
    position: absolute;
    top: 0;
  }
  .flex_header_links {
    gap: 5.5814vw;
  }
  .flex_header_links span {
    transition: all 0.3s ease;
    font-size: 3.72092vw;
    font-family: "MEDIUM";
    cursor: pointer;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: -0.16744vw;
  }
  .flex_header_links span:hover {
    color: white;
    transform: translateY(0.44651vw);
  }
  .flex_header_links:active {
    opacity: 0.75;
  }
  .row_footer span:first-child {
    font-size: 3.72092vw;
    font-family: "Bold";
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: -0.07443vw;
  }
  .row_footer span:last-child {
    font-size: 3.25583vw;
    font-family: "Regular";
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: -0.0651vw;
  }
  .footer {
    height: 45.34884vw;
    background: #161616;
  }
  .pre_footer {
    gap: 5.5814vw;
  }
  .pre_footer .row_footer {
    gap: 3.72092vw;
  }
  .pre_footer .row_footer span {
    -webkit-user-select: text;
  }
  .pre_footer {
    padding-right: 16.74419vw;
    border-right: 0.23254vw solid rgba(255, 255, 255, 0.15);
  }
  .flex_links_footer {
    margin-left: 16.74419vw;
    gap: 9.30231vw;
  }
  .flex_links_footer span {
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 3.72092vw;
    font-family: "Medium";
    letter-spacing: -0.07443vw;
    color: rgba(255, 255, 255, 0.75);
  }
  .flex_links_footer span:hover {
    color: white;
    transform: translateY(0.44651vw);
  }
  .flex_links_footer span:active {
    opacity: 0.75;
  }
  .brush_first {
    position: absolute;
    width: 446.51163vw;
    height: 55.81395vw;
    top: -17.69302vw;
  }
  .regelwerk {
    min-height: 100%;
    width: 100%;
    height: auto;
    padding: 45.93022vw 15.27909vw;
  }

  .regelwerkheader {
    position: relative !important;
  }
  .row_rules {
    gap: 1.86048vw;
    padding-bottom: 5.5814vw;
    border-bottom: 0.23254vw solid rgba(255, 255, 255, 0.15);
  }
  .row_rules span:first-child {
    font-size: 4.18605vw;
    font-family: "Bold";
    text-transform: uppercase;
    letter-spacing: -0.18838vw;
    -webkit-user-select: text;
  }
  .row_rules span:last-child {
    font-size: 4.18605vw;
    font-family: "Regular";
    -webkit-user-select: text;
    color: rgba(255, 255, 255, 0.85);
  }
  .regelwerk {
    gap: 16.74419vw;
  }
  .logo {
    cursor: pointer !important;
    pointer-events: all;
    width: 34.88372vw;
    height: 11.9558vw;
  }
  a {
    text-decoration: none;
  }
  .header {
    display: none !important;
  }
  .first_cont_steps {
    height: auto;
  }
  .pannel_step .row_step {
    margin-left: 0;
    text-align: center;
    margin-top: 5vw;
  }
  .button_step {
    margin-left: 0;
    margin-top: 10vw;
  }
  .flex_links {
    margin-top: 10vw;
    align-items: center;
    flex-direction: column;
  }
  .row_blocks_steps {
    margin-top: 10vw;
  }
  .second_cont_steps {
    height: auto;
  }
  .footer,
  .pre_footer {
    flex-direction: column;
  }
  .pre_footer {
    width: 100%;
  }
  .footer {
    align-items: center;
    justify-content: center;
    padding: 15vw !important;
    height: auto;
  }
  .flex_links_footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .pre_footer {
    padding-right: 0;
    border: none;
  }
  .flex_links_footer {
    width: 100%;
    margin-left: 0;
    margin-top: 15vw;
    text-align: left !important;
    align-items: flex-start;
  }
  .hamburger_menu {
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(2.18605vw);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    padding: 13.02326vw;
    flex-direction: column;
    animation: show 0.5s linear 0s;
  }
  .hamburger_menu span {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 12.7907vw;
    border-radius: 0.69767vw;
    border-radius: 0.69767vw;
    font-size: 3.72093vw;
    font-family: "Medium";
    background: rgba(255, 255, 255, 0.05);
  }
  .hamburger_menu a {
    text-decoration: none;
    color: white;
  }
  .row_pnl_me {
    gap: 3.72093vw;
  }
  .close {
    margin-left: auto;
  }
  .row_pnl_me {
    position: relative;
    z-index: 999;
    margin-top: 7.44186vw;
  }
  .logo {
    width: 34.88372vw;
    height: 11.95581vw;
  }
  .header_mobile {
    position: absolute;
    top: 0;
    padding: 10vw 10.20313vw !important;
    justify-content: space-between;
  }
  .header_mobile .logo {
    transform: scale(0.7);
  }
  .openicn,
  .close {
    width: 6.97674vw;
    height: 6.97674vw;
  }
  .header_mobile {
    display: flex !important;
  }
  .flex_wrap {
    display: flex;
    flex-direction: column;
  }
  .box_quest {
    width: 100%;
    height: auto;
  }
  .top_qestions {
    background-size: 700% 100%;
  }
}

.w100 {
  width: 100%;
}
.h100 {
  height: 100%;
}
.h_auto {
  height: auto;
}
.color {
  color: #f60b0e;
  font-family: "Black";
}
.space {
  justify-content: space-between;
}
.pad {
  padding: 0 18.20313vw;
}
.gap16 {
  gap: 0.83333vw;
}
.absolute {
  position: absolute;
}
.gap8 {
  gap: 0.41667vw;
}
.tc {
  text-align: center;
}
.clmn {
  display: flex;
  flex-direction: column;
}
.flex {
  display: flex;
}
.alcn {
  display: flex;
  align-items: center;
}
.jlcn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.rev {
  flex-direction: row-reverse;
}