body,
html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

#box3 {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.img_spacer {
    height: 20vh;
    width: 100%;
}

@media (min-width: 640px) {
    .img_spacer {
        width: 30vw;
        height: 100%;
    }
}

.segment_content_spacer {
    height: 50vh;
    width: 100%;
}

@media (min-width: 640px) {
    .segment_content_spacer {
        height: 100%;
    }
}

@media (min-width: 767px) {
    .segment_content_spacer {
        height: 100%;
        width: 100%;
    }
}

.segment_content {
    z-index: 1;
    margin-top: -100vh;
}

.segment_intro_decoration {
    z-index: -1;
    min-height: 400px;
}

.button,
.box-button {
    transition: background-color 0.21s cubic-bezier(0.35, 0, 0.65, 1);
}

.box-button:hover {
    background-color: #222c34;
}

#appStoreLink {
    transition: transform 0.21s cubic-bezier(0.35, 0, 0.65, 1);
    transform: scale(1);
}

#appStoreLink:hover {
    transition: transform 0.21s cubic-bezier(0.35, 0, 0.65, 1);
    transform: scale(.85);
}

.segment_intro_text_wrapper {
    max-width: 470px;
}

.segment_body_text_wrapper {
    max-width: 1080px;
}

.segment_body_header {
    max-width: 220px;
}

.header_logo {
    transition: opacity 0.21s cubic-bezier(0.35, 0, 0.65, 1);
}

.header_logo:focus {
    opacity: 30%;
}

.header_logo:hover {
    opacity: 30%;
}

.segment_intro_img {
    transform: scale(1.3, 1.3);
    transition: all 2.10s  ease-in-out;
}

.segment_intro_img.active {
    transform: scale(1, 1);
}

.roadmap_milestone {
    width: 50px;
    height: 50px;
}

.roadmap_year_wrapper {
    height: 50px;
}

.segment_body_hero {
    max-width: 210px;
}

.any---story_card_slider {
    scrollbar-width: none;
}

.any---story_card_slider::-webkit-scrollbar {
    display: none;
}

/* story card */
.any---story_card {
    width: 100%;
    aspect-ratio: 3/4;
    background-color: #f4f4f4;
    border-radius: 20px;
    transition: transform 0.3s ease;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.any---story_card-bio_text {
    width: calc(100vw - 6rem);
    max-width: 300px;
}

.any---story_card-gradient {
    background-image: linear-gradient(0deg, rgb(34, 44, 52) 12%, rgba(34, 44, 52, 0) 62%);
    z-index: -1;
}

.slope {
    top: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #171B20;
    transform: skew(0deg, 12deg);
    width: 100%;
    height: 200%;
    margin-left: 0%;
    margin-bottom: 0%;
    margin-top: -10%;
}

@media (min-width: 1024px) {
    .slope {
        top: 0;
        left: 0;
        bottom: 0;
        width: 200%;
        height: 100%;
        margin-left: -100%;
        margin-bottom: 0%;
        background-color: #171B20;
        transform: skew(12deg, 0deg);
        margin-top: 0%;
    }
}

.loader {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 100;
    pointer-events: none;
    transition: all 0.21s cubic-bezier(0.35, 0, 0.65, 1);
}

.canvas {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: top 2s cubic-bezier(.92, .01, .15, 1),
    left 2s cubic-bezier(.92, .01, .15, 1),
    transform 2s cubic-bezier(.92, .01, .15, 1);
    height: 35.98px;
    width: 271px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.canvas.ended {
    top: 2rem;
    left: 2rem;
    transform: translate(0%, 0%);
}

.loader-wall {
    background-color: #171B20;
    width: 100%;
    position: absolute;
    height: 100%;
    transition: opacity 2s cubic-bezier(0.35, 0, 0.65, 1);
    opacity: 100%;
}

.loader-wall.ended {
    opacity: 0%;
}

.grid_img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}

.grid_img:nth-child(1) {
    background-image: url('../img/wbs_rolfgang-rolff_worldbitsports.jpg');
}

.grid_img:nth-child(2) {
    background-image: url('../img/wbs_mark-mcghee_worldbitsports.jpg');
}

.grid_img:nth-child(3) {
    background-image: url('../img/wbs_jens-duve_worldbitsports.JPG');
}

.grid_img:nth-child(4) {
    background-image: url('../img/wbs_oliver-buch_worldbitsports.jpg');
}

.grid_img:nth-child(5) {
    background-image: url('../img/wbs_herman-vissia_worldbitsports.jpg');
}

.grid_img:nth-child(6) {
    background-image: url('../img/wbs_alexander-pick_worldbitsports.jpg');
}

.grid_img:nth-child(7) {
    background-image: url('../img/wbs_mao-lal_worldbitsports.jpg');
}