@font-face {
    font-family: Spleen;
    font-style: normal;
    font-weight: 400;
    src: url("/src/fonts/spleen-32x64.otf") format("opentype");
}

html,
body {
    margin: 0;
    min-height: 100%;
}

html {
    background: black;
}

body {
    position: relative;
    min-height: 100vh;
    background: transparent;
    font-family: Spleen, system-ui, serif;
    color: greenyellow;
    font-size: 1.5vw;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: url("/src/media/bg.png");
    background-repeat: no-repeat;
    background-size: auto 150vh;
    background-position: top left;
    background-blend-mode: color-dodge;
    image-rendering: pixelated;
    pointer-events: none;
    opacity: 0.5;
}

body > * {
    position: relative;
    z-index: 1;
}

@media (orientation: portrait) {
    body {
        min-height: 100dvh;
    }

    body::before {
        background-size: cover;
        background-position: top center;
    }
}

.wrapper {
    padding-left: 1vh;
}

.header {
    font-size: 2vw;
    line-height: 0.5vh;
    padding-left: 2vh;
}

.shitpost {
    padding-left: 2vh;
    font-size: 1.5vw;
}

.contact {
    padding: 1vh;
}

.badges {
    display: flex;
    column-gap: 2vh;
    padding-left: 2vh;
    align-items: center;
    opacity: 0.8;
}

.badges img {
    width: auto !important;
    max-width: 10vw;
    max-height: 8vh;
}

@media (orientation: portrait) {
    .badges {
        flex-wrap: wrap;
        row-gap: 1vh;
    }

    .badges img {
        max-width: 28vw;
        max-height: 3.5vh;
    }
}

ul {
    margin-left: 2%;
    list-style-type: ">>> ";
}

li:hover {
    text-shadow: 0 0 1vh #ffffff;
}

li:visited, li:active {
    color: olivedrab;
}

h1:hover {
    color:magenta;
    text-shadow: 0 0 1vh #ff74fa;
}

h3:hover {
    color:magenta;
    text-shadow: 0 0 5px #ff74fa;
}

h4:hover {
    color:magenta;
    text-shadow: 0 0 5px #ff74fa;
}

h6:hover {
    color:magenta;
    text-shadow: 0 0 5px #ff74fa;
}

p:hover {
    text-shadow: 0 0 5px #ffffff;
}

a:hover {
    text-shadow: 0 0 1vh #ffffff;
}

a:link {
    color: magenta;
}

a:visited, a:active {
    color: olivedrab
}