#moveBoostBanner,#moveBoostDescription {
    width: 95%;
    margin-left: 5%
}

#fightTheBossBanner,#moveBoostBanner {
    background: linear-gradient(89.96deg,#5354c0 24.21%,rgba(153,154,238,.6) 110.53%)
}

#fightTheBossBanner,#fightTheBossDescription {
    width: 90%;
    margin-left: 10%
}

#fightTheBossDescription,#moveBoostDescription {
    padding: 1rem 2rem;
    background-color: #e4eeff;
    clip-path: polygon(0 0,100% 0%,100% 100%,3% 100%,0 75%)
}

.carousel-control-next-icon,.carousel-control-prev-icon {
    background-image: url(../design/tutorial/arrow_l.png)
}

#main strong {
    font-weight: 900
}

.main-section {
    width: 100%;
    height: auto;
    max-width: 1920px;
    margin: 0 auto
}

.section-banner {
    font-family: eurostile-extended,EnterSansman,'Courier New',Courier,monospace;
    color: #fff;
    font-style: italic;
    font-size: 3rem;
    font-weight: 700
}

.section-description {
    font-family: Nunito,'Courier New',Courier,monospace;
    color: #5b4dbb;
    font-weight: 600;
    font-size: 1.1rem
}

#moveBoostBanner {
    border-top-left-radius: 4rem;
    padding: 1rem 2rem
}

#changeControlCarousel,#fightTheBossCarousel,#moveBoostCarousel {
    display: block;
    width: 75%;
    margin: 1rem auto 4rem
}

#changeControlTutorial .content-section {
    margin: 0 auto;
    display: block
}

#changeControlTutorial .content {
    display: block;
    margin: 0 auto;
    width: calc(100% - 320px);
    max-width: 1920px;
    position: relative;
    font-style: normal;
    z-index: 10
}

#changeControlBanner {
    display: inline-block;
    background: linear-gradient(89.92deg,#8053e0 27.33%,rgba(204,93,222,.7) 118.95%);
    width: 55%;
    padding: 1rem;
    clip-path: polygon(0 0,99% 0,100% 100%,0 100%)
}

#changeControlDescription {
    vertical-align: top;
    display: inline-block;
    width: 40%;
    max-width: 480px;
    padding: 0 2rem
}

#fightTheBossTutorial {
    position: relative;
    top: -3rem
}

#fightTheBossTutorial .content-section {
    position: relative;
    margin-top: 6rem
}

#fightTheBossBanner {
    padding: 1rem 2rem;
    border-top-left-radius: 4.5rem;
    text-indent: 2rem
}

.carousel-control-next {
    right: -15%
}

.carousel-control-prev {
    left: -15%
}

.carousel-control-next-icon {
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1)
}

.carousel-control-next:hover .carousel-control-next-icon {
    background-image: url(../design/tutorial/arrow_r_p.png);
    transform: scaleX(1);
    -moz-transform: scaleX(1);
    -o-transform: scaleX(1);
    -webkit-transform: scaleX(1)
}

.carousel-control-prev:hover .carousel-control-prev-icon {
    background-image: url(../design/tutorial/arrow_r_p.png);
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1)
}

.carousel-control-next-icon,.carousel-control-prev-icon {
    width: 2.125rem;
    height: 3.313rem
}

.carousel-indicators [data-bs-target] {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin-left: 1rem;
    margin-right: 1rem;
    background-color: #d8d4d4;
    opacity: 1
}

.carousel-indicators .active {
    background-color: #5854c4
}

.carousel-indicators {
    bottom: -4rem
}

@media screen and (max-width: 1024px) {
    #changeControlTutorial .content,#fightTheBossTutorial .content-section,#moveBoostTutorial .content-section {
        width:100%
    }

    #changeControlBanner,#fightTheBossBanner,#moveBoostBanner {
        font-size: 1.88rem;
        text-indent: unset
    }

    #changeControlDescription {
        padding: 0 1rem
    }
}

@media screen and (max-width: 760px) {
    #changeControlBanner,#fightTheBossBanner,#moveBoostBanner {
        font-size:1.45rem
    }

    #moveBoostBanner {
        border-top-left-radius: 2.5rem
    }

    #moveBoostDescription {
        clip-path: polygon(0 0,100% 0%,100% 100%,5% 100%,0 85%)
    }

    .carousel-control-next-icon,.carousel-control-prev-icon {
        width: 1.5rem;
        height: 2.24rem
    }

    .carousel-indicators [data-bs-target] {
        width: .8rem;
        height: .8rem;
        border-radius: 50%;
        margin-left: .5rem;
        margin-right: .5rem
    }

    #changeControlBanner {
        width: 95%;
        display: block
    }

    #changeControlDescription {
        width: 90%;
        margin: 0 auto;
        display: block;
        padding: .8rem
    }

    #changeControlDescription p {
        margin-bottom: unset
    }

    .content-section {
        min-height: 420px
    }

    .section-description {
        font-size: .85rem
    }
}

@media screen and (max-width: 420px) {
    #changeControlBanner,#fightTheBossBanner,#moveBoostBanner {
        font-size:1.25rem;
        padding: 1rem
    }

    #fightTheBossBanner,#fightTheBossDescription {
        width: 95%;
        margin-left: 5%;
        padding: 1rem
    }

    #moveBoostDescription {
        padding: 1rem
    }

    #fightTheBossBanner {
        border-top-left-radius: 2.5rem
    }

    .carousel-control-next-icon,.carousel-control-prev-icon {
        width: 1rem;
        height: 1.49rem
    }
}