.landing {
    max-width: 1200px;
    width: 100vw;
    height: calc(100dvh - 100px);   

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    margin: 0px auto;
}

.landing .cover {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.landing .name {
    width: 50%;
    height: fit-content;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: relative;
}

.landing .name #intro_title {
    margin-top: auto;
    text-align: center;
    line-height: var(--step-8);
    font-size: var(--step-8);
}

.landing .name #intro_subtitle {
    margin-bottom: auto;

    font-size: small;
    font-style: normal;
    display: flex;
    justify-content: center;
    gap: 2vw;
}

.landing .hexagon {
    height: fit-content;
    width: 50%;
}

.landing .hexagon .hexagon-inner {
    height: 100%;

    aspect-ratio: 0.8;
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    overflow: hidden;
    position: relative;
}

.landing .hexagon .hexagon-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0px 0px;
    display: block;
}

.statistics {
    width: 100%;
    height: fit-content;

    margin-top:  25px;
    margin-bottom: 50px;
} 

.statistics .numbers {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    /* background-color: #222222; */

    padding: 25px;
}

.statistics .numbers .box {
    width: 350px;
    height: 300px;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;

    padding: 25px;

    border-radius: 30px;
    border: 2px solid #a04e8b;
}

.statistics .numbers .box:nth-child(2) {
    margin: 0px 100px;
}

.statistics .numbers .box .icon {
    text-align: center;
    font-size: 45px;
    color: white;
}

.statistics .numbers .box .number {
    font-size: 60px;
    color: #f5b1e4;
    text-align: center;
    font-weight: 500;
    text-shadow: 0px 0px 50px #f5b1e4;

    overflow: visible;
}

.statistics .numbers .box .number .plus {
    color: #f5b1e4;
}

.statistics .numbers .box .title {
    text-align: center;

    padding-top: 25px;
}


.hero {
    height: fit-content;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 25px;
}

.hero h1 {
    width: fit-content;
    margin: 0px auto;
    font-size: 40px;
}

.hero p {
    width: fit-content;
    margin: 0px auto;
    font-size: 20px;
}


.mods {
    width: 100vw;
    height: fit-content;

    padding: 25px;
}

.mods .title {
    width: fit-content;

    font-size: 40px;

    margin: 0px auto;

    margin-bottom: 25px;
}

.mods .container {
    width: calc(100% - 50px);
    max-width: 1500px;
    height: fit-content;
    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    padding: 25px;

    background-color: #222222;

    margin: 0px auto;

    border-radius: 30px;
}

.mods .container .left {
    width: calc(50%);

    padding-right: 12.5px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mods .container .left .banner {
    width: 100%;
    height: fit-content;

    margin-bottom: 25px;
}

.mods .container .left .banner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.mods .container .left .downloads {
    display: flex;
    justify-content: center;

    margin-top: 25px;
}

.mods .container .left .downloads a {
    display: flex;
    flex-direction: row;
    align-items: center;
} 

.mods .container .left .downloads a .amount {
    padding-left: 15px;

    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.mods .container .left .downloads a .amount .icon {
    width: 25px;
    height: 25px;
}

.mods .container .left .downloads a .amount .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.mods .container .left .downloads a:first-child {
    margin-right: 25px;
} 

.mods .container .left .downloads a:first-child .amount {
    flex-direction: row;
    padding-right: 15px;
}

.mods .container .left .downloads a img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    object-position: center;
}

.mods .container .right {
    width: calc(50%);
    padding-left: 12.5px;
}

.mods .container .right .screenshot {
    width: 100%;
    height: 100%;
}

.mods .container .right .screenshot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

@media screen and (max-width: 1055px) {

    .statistics {
        height: fit-content;
    }

    .statistics .numbers {
        flex-wrap: wrap;
    }

    .statistics .numbers .box {
        max-width: 300px;
        width: 90%;

        margin: 12.5px !important;
    }

    .mods .title {
        text-align: center;
    }

    .mods .container {
        width: 100%;
        flex-direction: column;
        margin: 0px;
    }

    .mods .container .left {
        width: 100%;
        padding-right: 0px;
    }

    .mods .container .left .downloads {
        flex-direction: row;
        align-items: flex-start;
    }

    .mods .container .right {
        width: 100%;
    }

    .mods .container .right .screenshot {
        margin-top: 25px;
    }
}

@media screen and (max-width: 750px) {
    .landing {
        flex-direction: column-reverse;
    }

    .landing .name {
        margin-top: 25px;
    }

    .landing .hexagon {
        width: 75%;;
    }

    .statistics {
        height: fit-content;
    }

    .statistics .numbers {
        flex-direction: column;
    }

    .statistics .numbers .box {
        max-width: 300px;
        width: 90%;

        margin: 12.5px 0px !important;
    }

    .hero h1 {
        text-align: center;
    }

    .hero p {
        text-align: center;
    }

    .mods .title {
        text-align: center;
    }

    .mods .container {
        width: 100%;
        flex-direction: column;
        margin: 0px;
    }

    .mods .container .left {
        width: 100%;
        padding-right: 0px;
    }

    .mods .container .right {
        width: 100%;
    }

    .mods .container .right .screenshot {
        margin-top: 25px;
    }
}