/* main */

@font-face {
    font-family: "Inria";
    src: url("/asset/font/inria/regular.ttf"),url("/asset/font/inria/italic.ttf"),url("/asset/font/inria/bold.ttf"),url("/asset/font/inria/light.ttf"),url("/asset/font/inria/bold-italic.ttf"),url("/asset/font/inria/light-italic.ttf"),;
}

body {
    margin: 0px;
    padding: 0px;

    font-family: "Inria", "serif";
    color: #161616;

    background: url("/asset/img/bg.png?v=2") repeat top center;
    image-rendering: pixelated;
}

#root {
    padding: 10px;
    image-rendering: auto;
}

.container {
    display: block;

    font-size: 14px;
    width: 520px;
}

.heading {
    filter: drop-shadow(0px 0px 18px #48070caa);
    color: #fff;

    position: relative;
    z-index: 0;
}

.content {
    margin: 1em 0px 0px;
    padding: 20px;
    
    background: #fefefe;
    border: 1px solid #48070caa;
    
    position: relative;
    z-index: 1;
}

.end {
    margin: 1em 0px 0px;

    text-align: center;
    filter: drop-shadow(0px 0px 18px #48070caa);
    
    position: relative;
    image-rendering: pixelated;
    z-index: 0;
}

.end img {
    padding: 0px 2px;
}

.list p {
    margin: 0.5em 0px;
}

.list p::before {
    content: "- "
}

@media only screen and (max-width: 1200px) {
    .container {
        margin: 100px auto 0px 330px;
    }
}

@media only screen and (min-width: 1200px) {
    .container {
        margin: 100px auto 0px;
    }
}

/* fucking awesome aradia */

.aradia {
    display: inline-block;
    position: absolute;
    
    margin: -200px 0px 0px -450px;

    height: 885px;
    transform: scale(0.5);
    image-rendering: pixelated;
}

.aradia::before {
    display: inline-block;
    
    content: url("/asset/img/aradia/still.png");
    height: 885px;

    filter: drop-shadow(0px 0px 18px #48070caa)
}

.aradia:hover::before {
    display: inline-block;

    content: url("/asset/img/aradia/open.png");

    margin-right: -112px;
    height: 885px;

    filter: drop-shadow(0px 0px 18px #48070caa)
}

.aradia-hat {
    width: 150px;  
    height: 110px;

    margin: -90px 0px 0px 350px;
    transform: rotateY(180deg);

    object-position: top;
    object-fit: cover;
    position: absolute;

    image-rendering: pixelated;
    user-select: none;
}

/* font-scaling whatever */

h1, h2, p {
    margin: 0px;
}

h1 {
    font-size: 36px;
}

h2 {
    font-size: 22px;
}

p {
    font-size: 14px;
}

a {
    text-decoration: none;
    color: #161616;
    cursor: pointer;
    font-weight: bolder;
}