:root {
    --cassiopeia-color-primary: #cf1f3e;
    --tri-size: 400px; /* height of triangles */
    --color1: #fff; /* first triangle color */
    --color2: #959595; /* second triangle color */
    --overlap: 50px; /* how much the top triangle overlaps */
}

body {
    background-color: #0a0203;
    color: #fff;
}

.header .grid-child {
    z-index: 1000;
    padding: 0;
    margin: 0;
    background-image:
        /* front (top) triangle */
        linear-gradient(15deg, transparent 50%, var(--color1) 50%), linear-gradient(-15deg, transparent 50%, var(--color1) 50%),
        /* back (bottom) triangle */
        linear-gradient(15deg, transparent 50%, var(--color2) 50%), linear-gradient(-15deg, transparent 50%, var(--color2) 50%);
    /* Each triangle pair forms a full triangle when mirrored */
    background-size: 50.1% var(--tri-size), 50.1% var(--tri-size), 50.1% var(--tri-size), 50.1% var(--tri-size);
    /* Position back triangle at the bottom, front triangle overlapping */
    background-position: left calc(var(--overlap) * -1), right calc(var(--overlap) * -1), left 0, right 0;
    background-repeat: no-repeat;
    background-blend-mode: normal;
    max-width: unset;
}

@media (width <= 1000px) {
    .header .grid-child {
        min-height: 300px;
    }

    .header .container-nav {
        min-height: unset;
    }
}
@media (width <= 500px) {
    .header .grid-child {
        min-height: 250px;
    }

    .header .container-nav {
        min-height: unset;
    }
}@media (width >= 1440px) {
    .header .grid-child {
        min-height: 350px;
    }
    .header .container-nav {
        min-height: unset;
    }
}


    .header {
        background-image: none;
        padding: 0;
        margin: 0;
        background-color: #0a0203;
    }

        .header h1 {
            margin-block-end: unset;
        }

    .container-topbar {
        color: #0a0203;
        background-color: #fff;
    }


    .navbar-brand {
        margin-left: auto;
        margin-right: auto;
        overflow: visible;
    }

    .header .container-nav {
        background-color: #000 !important;
        background-image: none !important;
    }

        .header .container-nav,
        .header .container-nav .navbar {
            justify-content: center;
            margin-top: 25px;
            margin-bottom: 25px;
            height: auto;
            max-height: unset;
        }

    .random-image img {
        min-width: 100%;
        padding: 0;
    }

    .styled-content {
        background-image: url('/images/arm-collection.webp');
        background-size: cover;
        margin: -20px;
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 20px;
    }

        .styled-content img {
            max-width: 100%;
            width: 800px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }


    footer {
        background-color: #0a0203 !important;
        background-image: none !important;
    }

    .footer .grid-child {
        flex-wrap: wrap;
    }

    footer .nav {
        text-align: center;
    }

    footer .custom {
        margin-top: 25px;
        min-width: 100%;
    }

    footer .design-credit {
        text-align: center;
        color: #777;
    }