body {
    height: 100vh;
    overflow: auto;
    background: url("../img/background-pattern.svg"), linear-gradient(to bottom, #BAD8A8, #CCE9AF);
    background-attachment: fixed;
    background-blend-mode: overlay, normal;
    font-family: 'Lexend';
    font-size: 18px;

    --ff-title: 'Tiny5';
}

button {
    all: unset;
    box-sizing: border-box;
}

h2 {
    /*font: 64px var(--ff-title);*/
    text-align: center;
}

/* Basic hexagon */

.hex,
.left-hex,
.right-hex {
    position: relative;
}

.hex::before,
.hex::after,
.left-hex::before,
.right-hex::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    aspect-ratio: calc(cos(30) * 2);
    background: inherit;
}

.hex:before,
.left-hex:before {
    left: 0;
    clip-path: polygon(100% 0, 100% 100%, 0 75%, 0 25%);
    transform: translateX(-100%);
}

.hex::after,
.right-hex::after {
    right: 0;
    clip-path: polygon(0 0, 0 100%, 100% 75%, 100% 25%);
    transform: translateX(calc(round(down, 100%, 1px)));
}

/* Bordered hexagon */

.bordered-hex {
    display: inline-block;
    height: var(--height);
    align-content: center;
    position: relative;
    z-index: 1;
}

.bordered-hex::before,
.bordered-hex::after {
    content: "";
    position: absolute;
    z-index: -1;
}

.bordered-hex::before {
    background: var(--border-color);
    top: calc(-1 * var(--border-width));
    right: calc(-1 * var(--border-width));
    bottom: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));

    --x: calc(calc(var(--height) / 2 + var(--border-width)) * cos(30deg));
    clip-path: polygon(0 25%, var(--x) 0, calc(100% - var(--x)) 0, 100% 25%, 100% 75%, calc(100% - var(--x)) 100%, var(--x) 100%, 0 75%);
}

.bordered-hex::after {
    background: var(--inner-background);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    --x: calc(var(--height) * cos(30deg) / 2);
    clip-path: polygon(0 25%, var(--x) 0, calc(100% - var(--x)) 0, 100% 25%, 100% 75%, calc(100% - var(--x)) 100%, var(--x) 100%, 0 75%);
}

/* Navbar */

.navbar {
    background: #232721;
    display: flex;
    gap: .25rem;
    align-content: center;
    text-transform: uppercase;
    font-family: var(--ff-title);
    font-size: 1rem;
}

.nav-link .bi {
    margin-right: .25rem;
    vertical-align: middle;
}

.btn.discord {
    background-color: #4047b3;
    color: #FFF;
}

.btn.discord:hover {
    background-color: #5865f2;
}

/* Home header */

.main_header {
    --border-width: 16px;

    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-auto-flow: dense;
    gap: var(--stroke-size);
    margin-bottom: calc(-1 * var(--stroke-size));
    align-items: center;
    font-family: var(--ff-title);
}

header:has(.header_wrapper) {
    filter: drop-shadow(0 8px 0 white);
}

.header_wrapper {
    all: inherit;
    height: 75vh !important;
    max-height: 1024px;
    width: 100%;
    position: relative;
    z-index: 0;

    background-image: url("../img/spawn-minecraft.webp");
    background-size: cover;
    background-position: center left;

    mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2286%22%20height%3D%221024%22%20viewBox%3D%220%200%2086%201024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M43%200H86L86%20998.984L43%201024L0%20998.984V0H43Z%22%20fill%3D%22%23D9D9D9%22%2F%3E%0A%3C%2Fsvg%3E");
    mask-repeat: repeat-x;
    mask-position: bottom;
}

.minecraft-spawn {
    width: calc(50% + 100px);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    filter: drop-shadow(-8px 0 0 white);
}

.minecraft-spawn:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../img/spawn-minecraft.webp");
    background-size: cover;
    background-position: center right;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.logo_wrapper {
    position: relative;
    z-index: 2;
    grid-column: 2;
}

.logo_wrapper img {
    height: 300px;
    z-index: 3;
}

.logo_wrapper::after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--border-width));
    right: calc(-1 * var(--border-width));
    bottom: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    background: #FFF;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: -1;
}

.main_header .minecraft {
    position: absolute;
    top: 0;
    left: 0;
    bottom: auto;
    z-index: 2;
    padding: 0;
    font-family: var(--ff-title);
    text-transform: uppercase;
}

.main_header .minecraft .server-status {
    position: static;
    text-align: left;
    line-height: 1.2;
}

/* Home header > button */
header .server-ip {
    --border-width: 16px;
    --height: calc(80px + 2 * var(--border-width));
    padding: var(--border-width);
    position: relative;
    font-family: var(--ff-title);
    z-index: 1;
}

header .server-ip::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #F8F6F9;
    --x: calc(var(--height) * cos(30deg) / 2);
    clip-path: polygon(0 25%, var(--x) 0, calc(100% - var(--x)) 0, 100% 25%, 100% 75%, calc(100% - var(--x)) 100%, var(--x) 100%, 0 75%);
}

header .server-ip:after {
    content: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40.4961 18.4931L25.2968 24.5046L25.0898 24.5861L25.0125 24.7948L19.3096 40.1135L1.0191 0.998587L40.4961 18.4931Z' fill='%23182710' stroke='%23F8F6F9'/%3E%3C/svg%3E");
    position: absolute;
    right: 20px;
    bottom: 10px;
    height: 20px;
    z-index: 11;
}

h1.bordered-hex {
    --height: 70px;
    --inner-background: linear-gradient(to right, #9BE244 15%, #3BD42D 87%);
    --border-width: 3px;
    --border-color: #0E9817;

    padding: 0 42px;
    margin: 0 3px 4px;
    color: #F8F6F9;
    transition: 0.3s;
    filter: drop-shadow(0 4px 0 #00370C);
    text-transform: uppercase;
    z-index: 10;
    font-size: 40px;
}

h1.bordered-hex::before {
    transition: 0.3s;
}

.server-ip:hover {
    animation: bounce .3s;
}

.server-ip:hover h1.bordered-hex {
    --inner-background: linear-gradient(to right, #3BD42D 15%, #0E9817);
}

/* Home main section */

#main_content h2 {
    display: none;
    background: linear-gradient(to bottom, #3BD42D 15%, #0E9817);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 4px 0 #0004);
    margin-bottom: -32px;
}

#gamemode {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#gamemode>li {
    list-style: none;
    display: flex;
    align-items: center;
    filter: drop-shadow(0 10px 0 #2E4E2B);
}

#gamemode figure {
    all: unset;
    height: 300px;
    aspect-ratio: cos(30deg);
    position: relative;
    z-index: 1;

    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%22260%22%20height%3D%22293%22%20viewBox%3D%220%200%20260%20293%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M117.904%203.21537C125.329%20-1.07182%20134.478%20-1.07181%20141.904%203.21537L247.808%2064.359C255.233%2068.6462%20259.808%2076.5692%20259.808%2085.1436V207.431C259.808%20216.005%20255.233%20223.928%20247.808%20228.215L141.904%20289.359C134.478%20293.646%20125.329%20293.646%20117.904%20289.359L12%20228.215C4.57437%20223.928%200%20216.005%200%20207.431V85.1436C0%2076.5692%204.57437%2068.6462%2012%2064.359L117.904%203.21537Z%22%20fill%3D%22url(%23paint0_linear_169_13)%22%2F%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22paint0_linear_169_13%22%20x1%3D%22129.904%22%20y1%3D%22-3.71283%22%20x2%3D%22129.904%22%20y2%3D%22296.287%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color%3D%22%23AAF152%22%2F%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2366B92D%22%2F%3E%0A%3C%2FlinearGradient%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#gamemode figure img {
    max-width: unset;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#gamemode li>div {
    box-sizing: border-box;
    max-width: 680px;
    max-height: 100%;
    padding: 32px 0 40px 130px;
    margin-left: -100px;
    position: relative;
    background: #FFF;
    color: #6C6C6C;
}

#gamemode li div:after {
    content: "";
    position: absolute;
    height: 100%;
    aspect-ratio: 1;
    top: 0;
    right: 0;
    z-index: -1;
    background: url('data:image/svg+xml,%3Csvg%20width%3D%22167%22%20height%3D%22185%22%20viewBox%3D%220%200%20167%20185%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M71.2054%203.21537C78.631%20-1.07182%2087.7798%20-1.07181%2095.2054%203.21537L154.411%2037.3977C161.836%2041.6848%20166.411%2049.6079%20166.411%2058.1823V126.547C166.411%20135.121%20161.836%20143.044%20154.411%20147.331L95.2054%20181.514C87.7798%20185.801%2078.631%20185.801%2071.2054%20181.514L12%20147.331C4.57435%20143.044%20-2.28882e-05%20135.121%20-2.28882e-05%20126.547V58.1823C-2.28882e-05%2049.6079%204.57435%2041.6848%2012%2037.3976L71.2054%203.21537Z%22%20fill%3D%22white%22%20style%3D%22%22%2F%3E%0A%3C%2Fsvg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateX(50%);
}

#gamemode h3 {

    font-size: 28px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #000;
}
#gamemode li p {
    margin: 0 -40px 0 0;
    line-height: 1.2em;
}

#gamemode li:nth-child(even) {
    flex-direction: row-reverse;
}

#gamemode li:nth-child(even)>div {
    padding: 24px 130px 32px 0;
    margin-left: 0;
    margin-right: -100px;
    text-align: right;
}

#gamemode li:nth-child(even)>div:after {
    left: 0;
    transform: translateX(-50%);
}

#gamemode li:nth-child(even) p {
    margin: 0 0 0 -40px;
}

.footer {
    padding: 16px;
    background: #232721;
    font-size: 14px;
    color: #FFF;
}

.footer .col {
    display: grid;
    grid-template-rows: 50px auto;
    gap: 8px;
    padding-bottom: 24px;
}

.footer h5 {
    font: 20px var(--ff-title);
    margin: 0;
    align-self: center;
}

.footer a {
    color: #FFF;
    text-decoration: none;
}

.footer .links {
    display: flex;
    flex-direction: column;
    padding: 0 24px;
}

.footer .links a {
    display: list-item;
    list-style-type: disc;
}

.footer .social,
.footer .social a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.footer .social h5 {
    margin-right: 4px;
}

.footer .social a {
    height: 25px;
    aspect-ratio: 1;
    background: #FFF;
    border-radius: 50%;
    text-align: center;
    color: #000;
    transform: translateY(1px);
}

.footer .h-links {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.footer .h-links a:not(:first-child)::before {
    content: "-";
    margin-right: 12px;
}

.footer .container:last-child {
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
    color: #FFFFFF80;
    position: relative;
}

.footer .container:last-child::before {
    content: "";
    position: absolute;
    top: 0;
    left: 49.4%;
    width: 100vw;
    border-bottom: solid 1px currentColor;
    transform: translateX(-50%);
}

.footer p {
    margin: 0;
}

/* ─── 768px — right: 484px × 576px ─────────────────── */
@media (min-width: 768px) {
    .minecraft-spawn::after {
        animation-name: header_animation_768;
    }
}

/* ─── 1024px — right: 612px × 768px ────────────────── */
@media (min-width: 1024px) {
    .minecraft-spawn::after {
        animation-name: header_animation_1024;
    }
}

/* ─── 1280px — right: 740px × 960px ────────────────── */
@media (min-width: 1280px) {
    .minecraft-spawn::after {
        animation-name: header_animation_1280;
    }
}

/* ─── 1440px — right: 820px × 1080px ───────────────── */
@media (min-width: 1440px) {
    .minecraft-spawn::after {
        animation-name: header_animation_1440;
    }
}

/* ─── 1920px — right: 1060px × 1440px ──────────────── */
@media (min-width: 1920px) {
    .minecraft-spawn::after {
        animation-name: header_animation_1920;
    }
}

/* ── 768px ── */
@keyframes header_animation_768 {
    0% {
        clip-path: path("M 0 0 C 30 57.6, 90 172.8, 70 259.2 C 50 345.6, 20 460.8, 0 576 L 9999 576 L 9999 0 Z");
    }

    50% {
        clip-path: path("M 0 0 C 15 46.08, 70 126.72, 45 218.88 C 20 311.04, 10 432.0, 0 576 L 9999 576 L 9999 0 Z");
    }

    100% {
        clip-path: path("M 0 0 C 10 34.56, 60 218.88, 50 299.52 C 40 380.16, 130 472.32, 0 576 L 9999 576 L 9999 0 Z");
    }
}

/* ── 1024px ── */
@keyframes header_animation_1024 {
    0% {
        clip-path: path("M 0 0 C 30 76.8, 90 230.4, 70 345.6 C 50 460.8, 20 614.4, 0 768 L 9999 768 L 9999 0 Z");
    }

    50% {
        clip-path: path("M 0 0 C 15 61.44, 70 168.96, 45 291.84 C 20 414.72, 10 576.0, 0 768 L 9999 768 L 9999 0 Z");
    }

    100% {
        clip-path: path("M 0 0 C 10 46.08, 60 291.84, 50 399.36 C 40 506.88, 130 629.76, 0 768 L 9999 768 L 9999 0 Z");
    }
}

/* ── 1280px ── */
@keyframes header_animation_1280 {
    0% {
        clip-path: path("M 0 0 C 30 96.0, 90 288.0, 70 432.0 C 50 576.0, 20 768.0, 0 960 L 9999 960 L 9999 0 Z");
    }

    50% {
        clip-path: path("M 0 0 C 15 76.8, 70 211.2, 45 364.8 C 20 518.4, 10 720.0, 0 960 L 9999 960 L 9999 0 Z");
    }

    100% {
        clip-path: path("M 0 0 C 10 57.6, 60 364.8, 50 499.2 C 40 633.6, 130 787.2, 0 960 L 9999 960 L 9999 0 Z");
    }
}

/* ── 1440px ── */
@keyframes header_animation_1440 {
    0% {
        clip-path: path("M 0 0 C 30 108.0, 90 324.0, 70 486.0 C 50 648.0, 20 864.0, 0 1080 L 9999 1080 L 9999 0 Z");
    }

    50% {
        clip-path: path("M 0 0 C 15 86.4, 70 237.6, 45 410.4 C 20 583.2, 10 810.0, 0 1080 L 9999 1080 L 9999 0 Z");
    }

    100% {
        clip-path: path("M 0 0 C 10 64.8, 60 410.4, 50 561.6 C 40 712.8, 130 885.6, 0 1080 L 9999 1080 L 9999 0 Z");
    }
}

/* ── 1920px ── */
@keyframes header_animation_1920 {
    0% {
        clip-path: path("M 0 0 C 30 144.0, 90 432.0, 70 648.0 C 50 864.0, 20 1152.0, 0 1440 L 9999 1440 L 9999 0 Z");
    }

    50% {
        clip-path: path("M 0 0 C 15 115.2, 70 316.8, 45 547.2 C 20 777.6, 10 1080.0, 0 1440 L 9999 1440 L 9999 0 Z");
    }

    100% {
        clip-path: path("M 0 0 C 10 86.4, 60 547.2, 50 748.8 C 40 950.4, 130 1180.8, 0 1440 L 9999 1440 L 9999 0 Z");
    }
}

/* Button:hover animation */
@keyframes bounce {

    0%,
    100% {
        transform: scale(1);
    }

    66% {
        transform: scale(1.2);
    }
}
.navbar .player-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    min-height: 34px;
    margin-right: 1rem;
    padding: 0 0.75rem;
    color: #fff;
    font-family: var(--ff-title);
    font-size: 0.9rem;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .navbar .player-status {
        margin: 0.5rem 0;
    }
}
@media (min-width: 768px) {
    .navbar > .container {
        width: 100%;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Pied de page : blocs centrés et responsive */
.footer > .container:first-child {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
    width: 100%;
}

.footer > .container:first-child > .col {
    width: auto;
    min-width: 0;
    text-align: center;
}

.footer > .container:first-child > .col > div:first-child {
    justify-content: center;
}

.footer .links {
    align-items: center;
}

.footer .social,
.footer .h-links {
    justify-content: center;
}

/* Tablette */
@media (max-width: 991px) {
    .footer > .container:first-child {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer > .container:first-child > .col:last-child {
        grid-column: 1 / -1;
    }
}

/* Téléphone */
@media (max-width: 575px) {
    .footer > .container:first-child {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer > .container:first-child > .col:last-child {
        grid-column: auto;
    }

    .footer .social {
        flex-wrap: wrap;
    }

    .footer .h-links {
        flex-wrap: wrap;
    }
}

.links .partner-link {
    position: relative;
    top: -15px;
}
.footer .col > h5 {
    margin: 0;
    align-self: center;
}

.footer .social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: -15px;
}

.social-icons a {
    height: 25px;
    aspect-ratio: 1;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
}
.footer .social-icons {
    position: relative;
    top: -15px;
}
.page-wrapper {
    min-height: 31em;
    display: flex;
    flex-direction: column;
}

.page-wrapper > main,
.page-wrapper > #main_content {
    flex: 1;
}

.page-wrapper > .footer {
    margin-top: auto;
}