body {
    background: linear-gradient(rgb(0, 0, 0), rgb(32, 16, 43));
    color: white;
    min-height: 100dvh;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    transition: filter 0.5s;
}

p {
    overflow-wrap: anywhere;
}


#header {
    padding-top: 1rem;
    padding-bottom: 2rem;
    background: url("https://web.archive.org/web/20090725223313/http://www.geocities.com/arielpurkey/starstwinkle.gif");
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.separator {
    position: relative;
    z-index: 100;
    height: 20px;
    width: 100%;
    background-image: url("https://web.archive.org/web/20090726132008/http://it.geocities.com/l4dyshir4/vampiri/img/sangueseparatore.gif");
    background-repeat: repeat-x;
}

.feature-box {
    border: 1px solid black;
    width: 500px;
}

.feature-header {
    display: flex;
    justify-content: center;
    background: rgb(94, 28, 107)
}

.feature-header > img {
    height: 8rem;
}

.tight-header > img {
    margin: -2rem 0;
}

.feature-content {
    display: flex;
    flex-flow: row;
}

.feature-content > img {
    align-self: center;
}

.feature-content > p {
    flex-grow: 1;
    padding: 0.5rem;
}

#serverInfo {
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
    text-align: center;
    justify-content: center;
}

@font-face {
    font-family: custom;
    src: url("/fonts/Jacquard12.ttf");
  }

@font-face {
    font-family: timer;
    src: url("/fonts/atomicclock.ttf")
}

#ip {
    font-size: 2rem;
    letter-spacing: 2px;
    font-family: timer, monospace;
}

#serverInfo a {
    font-size: 2rem;
    letter-spacing: 2px;
    font-family: custom;
}

#features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    width: fit-content;
    justify-content: center;
}

#screenshots {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: custom;
}

#screenshots>img {
    max-width: 100%;
}


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

    #header img {
        height: 10vw;
    }
    
    .feature-box {
        width: 100% !important;
        margin: 0;
    }

    #features {
        grid-template-columns: 1fr;
        margin: 0;
        padding: 0;
        width: 100%;
    }
}


@keyframes artifactjiggle {
    0%, 20%, 40% {
        transform: rotate(0deg);
        filter: hue-rotate(0deg);
    }
    10%, 30% {
        transform: rotateY(10deg) rotateX(10deg);
        filter: hue-rotate(60deg);
    }
}

@keyframes deadartifactjiggle {
    from {
        transform: rotate(-10deg)
    }
    to {
        transform: rotate(-2deg)
    }
}

img#artifact {
    image-rendering: pixelated;
    animation-name: deadartifactjiggle;
    animation-duration: 30s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 0;
    filter: saturate(0%) brightness(0.7) contrast(2);
    transition: animation-duration 1s, filter 0.3s;
    cursor: crosshair
}

img#artifact:hover {
    filter: saturate(0%) brightness(0.6) contrast(3);
}

@keyframes bodypain {
    0% {
        transform: rotateX(0deg);
        filter: contrast(1);
    }
    40% {
        transform: rotateX(5deg) scaleX(0.9);
        filter: contrast(1.5) saturate(0.7);
    }
}

body[data-agony="4"]:has( #serverInfo > #artifact:hover) {
    filter: hue-rotate(180deg);
}

#lungs {
    animation: bodypain 2s ease infinite;
    display: block !important;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    position: absolute;
    overflow: hidden;
    left: 0%;
    right: 0%;
    z-index: -10;
    opacity: 0.03;
}

body[data-agony="2"] {
    animation: bodypain 5s linear infinite;
}

body[data-agony="3"] {
    animation: bodypain 5s linear infinite;
    animation-timing-function: cubic-bezier();
    filter: hue-rotate(180deg);
}

@keyframes trip {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(180deg);
    }
}

body[data-agony="4"] {
    animation: trip 1s linear alternate infinite;
}

@keyframes panic {
    from {
        transform: translate(1px,-1px) rotate(-2deg) scale(1);
    }
    to {
        transform: translate(-1px,1px) rotate(3deg) scale(1.05);
    }
}

@keyframes beckon {
    0%, 100%{
        transform: scale(1.1);
    }
    80%{
        transform: scale(0.9) translateY(4px);
    }
    90% {
        transform: scale(1.1) translateY(-8px);

    }
}

p.beckon {
    color: rgb(217, 255, 111);
    animation: beckon 0.5s ease infinite;
}

p.panic {
    color: rgb(169, 34, 34);
    animation: panic 0.05s linear alternate infinite;
}

body[data-agony] p[data-weak] {
    display: none;
}

body:not([data-agony]) p[data-summon] {
    display: none;
}

body[data-agony="1"] p[data-immune] {
    scale: 1.5;
}

body[data-agony="2"] p[data-immune] {
    scale: 2.5;
}

body[data-agony="3"] p[data-immune] {
    scale: 5;
}

body[data-agony="4"] p[data-immune] {
    display: none;
}

p[data-ascend] {
    display: none;
}

body[data-agony="4"] p[data-ascend] {
    display: block;
}

#summoningip {
    font-size: 2rem;
    color: yellowgreen;
    border: 1px dashed white;
    padding: 0.5rem;
    margin: 1rem;
}