body {
    font-family: 'Space Grotesk', sans-serif;
    background: #fff;
    color: #fff;
    font-size: 50px;
    margin: 0;
}


.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    --val: 1;

    /* diameter of the circle */
    --d: calc(2px * var(--val));

    background: radial-gradient(
            circle at var(--d) var(--d),
            #888888 calc(var(--d) - 1px),
            #0000 var(--d)
    ) 0 0 / calc(40px * var(--val)) calc(40px * var(--val));
}

.bg:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 100%);
}


.center {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.logo {
    display: block;
    height: auto;
}

/*
.buttons {display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center;}
.buttons a {text-decoration: none; color: inherit;}
.button {background-color: #000; border-radius: 10px; font-size: 30px; padding: 5px 20px 5px 60px; background-position: 20px center; background-size: 25px; background-repeat: no-repeat;}
.button.twitch {background-color: #6441a5; background-image: url("../img/icons/twitch.svg");}
.button.instagram {background-color: #405de6; background-image: url("../img/icons/instagram.svg");}
.button.web {background-color: #000; background-image: url("../img/icons/web.svg");}
.button.youtube {background-color: #c4302b; background-image: url("../img/icons/youtube.svg");background-size: 30px;padding-left: 65px;}
.button.kick {background-color: #53fc19; background-image: url("../img/icons/kick.svg");background-size: 20px;padding-left: 55px;}
*/


.buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.buttons a {
    text-decoration: none;
    color: inherit;
}

.button {
    background-color: #000;
    --size: 50px;
    width: var(--size);
    height: var(--size);
    min-width: var(--size);
    min-height: var(--size);
    border-radius: 10px;
    font-size: 30px;
    background-position: center;
    background-size: 25px;
    background-repeat: no-repeat;
}

.button.twitch {
    background-color: #6441a5;
    background-image: url("../img/icons/twitch.svg");
}

.button.instagram {
    background-color: #405de6;
    background-image: url("../img/icons/instagram.svg");
}

.button.web {
    background-color: #000;
    background-image: url("../img/icons/web.svg");
}

.button.youtube {
    background-color: #c4302b;
    background-image: url("../img/icons/youtube.svg");
    background-size: 30px;
}

.button.kick {
    background-color: #53fc19;
    background-image: url("../img/icons/kick.svg");
    background-size: 20px;
}

@media (max-width: 700px) {
    .logo {width: calc(100vw - 100px);}
    .center {gap: 15px;}
}