@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');  body {     margin: 0;     padding: 0;     font-family: "Roboto", sans-serif;     font-weight: 400;     font-style: normal;     font-size: 16px; } * {     box-sizing: border-box; } img {     max-width: 100%;     height: auto; } p {   font-weight: 300; }  .header {     background: hsla(0, 0%, 17%, 1); }  .container {     width: 100%;     max-width: 1168px;     padding-left: 16px;     padding-right: 16px;     box-sizing: border-box;     margin: 0 auto; }  .wrapper {     display: flex;     justify-content: space-between;     align-items: center;     padding: 15px 0; }  .logotype__link {     display: block;     width: 150px;     height: auto; }  .btn {     text-decoration: none;     text-transform: uppercase;     padding: 10px 35px;     display: inline-block;     border: 3px solid Hsl(0, 100%, 30%, 100%);     border-radius: 10px;     background: rgba(255, 255, 255, 0.8);     color: hsla(0, 0%, 17%, 1); }  .btn.red {     color: #fff;     background: Hsl(0, 100%, 30%, 100%); }  .header__burger {     background: none;     border: none;     display: none;     flex-direction: column;     gap: 5px; }  .header__burger div {     width: 40px;     height: 4px;     background: #ffffff;     border-radius: 1px;     position: relative; }  .header__burger.active div:first-child {     transform: rotate(45deg);     top: 5px; }  .header__burger.active div:nth-child(2) {     transform: rotate(-45deg);     bottom: 4px; }  .header__burger.active div:last-child {     display: none; }  .navigation {     background-image: linear-gradient(270deg, Hsla(0, 100%, 30%, 0.1), Hsl(0, 100%, 30%, 100%));     position: relative;     min-height: 2.5rem;     display: flex;     align-items: center; }  .navigation__list {     list-style: none;     padding: 0;     margin: 0;     display: flex;     align-items: center;     gap: 25px; } .navigation__item {   position: relative; } .submenu {   display: none;   position: absolute;     top: 20px;     left: -30px;     width: 250px;     list-style: none;     padding: 10px;     background-image: linear-gradient(270deg, Hsla(0, 100%, 30%, 1), Hsl(0, 100%, 30%, 100%)); } .submenu__link {   display: block;   color: #fff;     text-decoration: none;     text-transform: uppercase;     font-size: .875rem;     font-weight: normal;     line-height: 1rem;   padding: 10px 0; } .navigation__item:hover .submenu {   display: block; } .navigation__link {     color: #fff;     text-decoration: none;     text-transform: uppercase;     font-size: .875rem;     font-weight: normal;     line-height: 1rem; }  .main__content ul li::marker {     color: #8d0505; }  .main__content ol {     list-style: none;     counter-reset: section;     padding: 0; }  .main__content li {     margin-bottom: 15px;     position: relative; }  .main__content ol li {     padding-left: 40px; }  .main__content ol li::before {     counter-increment: section;     content: counter(section);     background: #8d0505;     padding: 5px 10px;     color: #ffffff;     border-radius: 50%;     position: absolute;     left: 5px;     top: -4px; }  .main__content table {     width: 100%; }  .main__content table th {     background: #8d0505;     padding: 10px 0;     color: #ffffff; }  .main__content table td {     border: 1px solid #8d0505; }  .main__content a {     color: #d70b0b; }  h1 {     text-align: center; }  .footer {     background: hsla(0, 0%, 19%, 1);     padding: 1.07143em;     margin-top: 25px; }  .footer .container {     display: flex;     justify-content: space-between; }  .footer__nav__wrapper {     display: flex;     gap: 30PX; }  .footer__nav__title {     color: #ffffff;     text-transform: uppercase;     font-size: .875em;     font-weight: 700;     line-height: 1.14286em;     margin: 0 0 .7em; }  .footer__nav__list {     list-style: none;     padding: 0;     margin: 0; }  .footer__nav__list__item {     margin-bottom: 5px; }  .footer__nav__list__link {     color: #ffffff;     text-decoration: none;     font-size: .75em;     line-height: 1.3333333333em; }  .footer__copy p {     color: #ffffff;     font-size: .65em; }  .footer__copy__trast {     display: flex;     gap: 20px; }  .breadcrumbs-list * {     color: #8d0505;     text-decoration: none; }  .author {     background: hsla(0, 0%, 17%, 1);     border-radius: 8px;     padding: 30px 40px;     display: flex;     justify-content: space-between;     align-items: center;     color: #ffffff; }  .photo-name img {     margin-right: 15px;     max-width: 100px;     overflow: hidden; }  .photo-name {     display: flex;     align-items: center; }  .name {     color: #ffffff; }  @media (max-width: 768px) {     .banner__link {         gap: 15px;     }      .header__burger {         display: flex;     }      .navigation {         display: none;         padding: 20px 10px;     }      .navigation.active {         display: flex;     }      .navigation__list {         flex-direction: column;     }      .footer .container {         flex-direction: column;         gap: 25px;     } }  @media (max-width: 570px) {     .header .btn__wrap .btn:last-child {         display: none;     }      .btn {         padding: 10px 10px;         font-size: 14px;     }      .logotype__link {         width: 100px;     }      .author {         flex-direction: column;     } }  .promo {     background: hsla(0, 0%, 17%, 1);     padding: 2rem;     margin-bottom: 32px }  .line-list {     font-size: 15px;     padding: 0;     margin: 0;     list-style: none;     border-top: 1px solid rgba(45, 49, 66, 0.08);     color: #ffffff; }  .line-list--item {     position: relative;     padding-top: 8px;     padding-bottom: 8px;     box-sizing: border-box;     border-bottom: 1px solid rgb(165, 165, 165); }  .txt-center {     text-align: center;     border-top: 1px solid rgb(165, 165, 165); }  .txt-center a {     color: #ffffff; }  .wrap {     display: flex;     gap: 20px; }  .main__wrap {     order: 1;     width: 70%; }  .side {     width: 28%;     margin-top: 21.44px; }  .promo .logotype__link {     width: 100%;     display: -webkit-box;     display: flex;     -webkit-box-pack: center;     justify-content: center;     padding: 15px;     margin: 0 auto 15px;     box-sizing: border-box; }  .half-indent-top {     text-align: center; }  .promo__title {     font-size: 20px;     letter-spacing: 0;     line-height: normal;     margin-bottom: 16px;     display: flex;     -webkit-box-align: center;     align-items: center;     -webkit-box-pack: justify;     justify-content: space-between;     color: #ffffff; }  .promo-card-rating {     background: #1f1f1f;     width: 36px;     height: 36px;     font-size: 18px;     color: #fff;     display: -webkit-box;     display: flex;     -webkit-box-pack: center;     justify-content: center;     -webkit-box-align: center;     align-items: center;     border-radius: 50%;     border: 3px solid #e6362d; }  .line-list__rating {     height: 7px;     margin-top: 10px;     background: #eee;     position: relative; }  .line-list__rating > span {     position: absolute;     height: 100%;     background: #ffc600; }  .sticky .promo__title {     font-size: 2rem;     text-align: center;     margin: 0; }  .promo__subtitle {     color: #ffc600;     font-size: 1.3rem; }  .sticky .text-center {     text-align: center;     font-size: 22px;     font-weight: 700;     color: #ffffff; }  .sticky {     position: -webkit-sticky;     position: sticky;     top: 32px; }  @media (max-width: 1024px) {     .wrap {         flex-direction: column;     }      .main__wrap {         order: 0;         width: 100%;     }      .banner__link {         margin-bottom: 0;     }      .side {         width: 100%;     } }  @media (max-width: 570px) {     .side {         width: 100%;     } }  .sale__title {     display: block;     font-size: 3rem;     letter-spacing: 0;     line-height: normal; }  .sale__cards {     display: grid;     grid-template-columns: repeat(2, 377px);     gap: 32px; }  .card-casino-logo {     position: relative;     z-index: 1;     margin-top: -14px;     margin-left: auto;     margin-right: auto;     width: 75%; }  .card-casino-logo img {     box-sizing: border-box;     display: block;     height: 40px;     background: #1f1f1f;     object-fit: contain;     margin: 0 auto;     padding: 4px 18px;     border-radius: 18px;     border: 2px solid #eee; }  .sale__link {     text-decoration: none; }  .desc {     margin-top: 8px;     margin-bottom: 0;     color: #1f1f1f; }  .sale__img {     height: 188px;     overflow: hidden; }  @media (max-width: 1100px) {     .sale__cards {         display: grid;         grid-template-columns: repeat(2, 1fr);         gap: 1%;     } }  @media (max-width: 620px) {     .sale__cards {         display: grid;         grid-template-columns: repeat(1, 1fr);         gap: 32px;     }      .sale__title {         font-size: 2rem;     } } .panel_mode {     display: flex;     position: fixed;     bottom: 20px;     right: 20px;     cursor: pointer;     background: #bcc0c2;     color: #fff;     padding: 10px;     border-radius: 50%;     height: 50px;     width: 50px;     transition: 0.3s;     align-items: center;     justify-content: center; }