* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    transition: background-color 0.5s;
}

button {
    font-family: 'Montserrat';
}

body {
    font-family: 'Montserrat';
}

.center {
    padding-left: calc(50% - 601px);
    padding-right: calc(50% - 601px);
}

.top {
    padding-top: 196px;
    padding-bottom: 156px;
    background:
        url(/img/bg1.png) right top no-repeat,
        url(/img/Star\ 1.png) 63px 94px no-repeat,
        url(img/Star\ 2.png) 156px 69px no-repeat,
        url(img/Star\ 3.png) calc(100% - 455px) calc(100% - 135px) no-repeat,
        url(img/Star\ 4.png) calc(100% - 344px) calc(100% - 59px) no-repeat,
        rgba(225, 255, 143, 1);
}

.top__title {
    max-width: 769px;
    font-size: 64px;
}

.top__description {
    max-width: 720px;
    font-size: 24px;
    padding-top: 24px;
    padding-bottom: 48px;
}

.btn {
    width: 247px;
    height: 66px;
    border: 1px solid rgba(32, 32, 39, 1);
    border-radius: 60px;
    background: rgba(32, 32, 39, 1);
    color: white;
    font-size: 24px;
    font-weight: 500;
    transition: all 0.2s;
}

.btn:hover {
    cursor: pointer;
    background: white;
    color: rgba(32, 32, 39, 1);
}

.line-wrapper {
    width: 100%;
    overflow: hidden;
    background: rgba(188, 236, 48, 1);
}

.line-games {
    display: flex;
}

.line-track {
    display: flex;
    gap: 51px;
    padding: 27px 49px;
    width: max-content;
    animation: scroll 20s linear infinite;
}

.line-games__names {
    font-weight: 700;
    font-size: 30px;
    white-space: nowrap;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

main {
    background:
        url(/img/mainStar1.png) right 77px no-repeat,
        url(/img/mainStar2.png) 25px 770px no-repeat,
        url(img/mainStar3.png) 40px 822px no-repeat,
        url(img/mainStar4.png) calc(100% - 124px) 1563px no-repeat,
        url(img/mainStar5.png) calc(100% - 45px) 1596px no-repeat,
        url(img/mainStar7.png) calc(100% - 52px) calc(100% - 65px) no-repeat,
        url(img/mainStar6.png) calc(100% - 151px) calc(100% - 45px) no-repeat,
        rgba(32, 32, 39, 1);
    padding-top: 95px;
    padding-bottom: 144px;
}

.games-list__title {
    font-size: 64px;
    font-weight: 700;
    color: white;
}

.games-list__description {
    max-width: 788px;
    color: rgba(255, 255, 255, 1);
    font-size: 24px;
    padding-top: 24px;
    padding-bottom: 72px;
}

.games-list__content {
    display: flex;
    flex-wrap: wrap;
    gap: 0 32px;
    padding-bottom: 96px;
}

.card-link {
    flex: 1 1 calc(33.333% - 24px);
    text-decoration: none;
    color: inherit;
    display: block;
    transition: all 0.2s;
}

.card-link_end {
    align-self: end;
    ;
}

.card-link:hover {
    transform: scale(1.05);
}

.card {
    box-sizing: border-box;
    background: white;
    border-radius: 30px;
}

.card__img {
    border-radius: 30px;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    max-height: 314px;
}

.card__wrapper {
    padding: 32px;
}

.card__number {
    max-width: 108px;
    margin-bottom: 16px;
    border-radius: 53px;
    background: rgba(247, 247, 247, 1);
    display: flex;
    justify-content: center;
    padding: 10px;
}

.card__name {
    max-width: 306px;
    font-size: 32px;
    font-weight: 700;
}

.games__title {
    font-size: 64px;
    font-weight: 700;
    color: white;
    padding-bottom: 72px;
}

.games__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.game-card {
    background: white;
    display: flex;
    border-radius: 30px;
}

.game-card:nth-child(2n) {
    flex-direction: row-reverse;
}

.game-card__content {
    width: 50%;
    padding: 48px;
}

.game-card__img {
    width: 50%;
}

.game-card__name {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 24px;
}

.game-card__description {
    font-size: 24px;
    max-width: 408px;
    margin-bottom: 36px;
}

.game-card__description--big {
    max-width: 497px;
}

.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    background: rgba(189, 237, 53, 1);
}

.footer__text {
    font-size: 24px;
    font-weight: 600;
}






@media (max-width: 1200px) {
    .card__wrapper_mob {
        padding: 18px 32px;
    }
}


/*планшет*/
@media (max-width: 1023px) {
    .games-list {
        display: none;
    }

    .main {
        padding-top: 48px;
    }

    .games__title {
        padding-bottom: 48px;
    }

    .game-card__name {
        font-size: 35px;
    }
}

/* мобилка */
@media (max-width: 767px) {
    .center {
        padding-left: calc(50% - 171px);
        padding-right: calc(50% - 171px);
    }

    .top {
        padding-top: 147px;
        padding-bottom: 131px;
        background:
            url(/img/bg2.png) right top no-repeat,
            url(/img/StarMob1.png) 37px 97px no-repeat,
            url(img/StarMob2.png) 91px 64px no-repeat,
            url(img/StarMob3.png) calc(100% - 86px) calc(100% - 74px) no-repeat,
            url(img/StarMob4.png) calc(100% - 34px) calc(100% - 28px) no-repeat,
            rgba(225, 255, 143, 1);
    }

    .top__content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .top__title {
        max-width: 262px;
        font-size: 40px;
        text-align: center
    }

    .top__description {
        max-width: 296px;
        font-size: 16px;
        text-align: center;
    }

    .btn {
        width: 285px;
        height: 55px;
        font-size: 16px;
        transition: none;
    }

    .btn:hover {
        background: rgba(32, 32, 39, 1);
        color: white;
        cursor: default;
    }

    main {
        background: rgba(32, 32, 39, 1);
        padding: 10px;
    }

    .games__title {
        font-size: 40px;
    }

    .game-card:nth-child(2n) {
        flex-direction: column-reverse;
    }

    .game-card {
        flex-direction: column-reverse;
    }

    .game-card__img {
        width: 100%;
    }

    .game-card__content {
        padding: 30px;
    }

    .game-card__name {
        font-size: 32px;
        margin-bottom: 16px;
    }

    .game-card__description {
        font-size: 16px;
        margin-bottom: 32px;
        min-width: 285px;
    }

    .footer {
        height: 100px;
    }

    .footer__text {
        font-size: 16px;
    }
}