@import url('https://fonts.googleapis.com/css2?family=Codystar:wght@300;400&family=Inter+Tight:ital,wght@0,200;0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Oswald:wght@200;400;600&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Staatliches&family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Kosugi&family=Nothing+You+Could+Do&family=Share+Tech&family=VT323&display=swap');


:root {
    --font1: 'Rubik', sans-serif;
    --font2: 'Oswald', sans-serif;
    --font3: 'VT323', monospace;
    --font4: 'DotGothic16', sans-serif;
    --p1: #d37f8e;
    --p1rgb: 211, 127, 142;
    --b1: #038aaf;
}

*, *::before, *::after {
    background-clip:padding-box;
    box-sizing:border-box;
    padding:0;
    margin:0;
}


body {
    font-family:var(--font3);
    font-size:20px;
    background-color:var(--b1);
    color:#fff;
    padding-bottom:1rem;
}

body::after {
    position:fixed;
    top:0;
    right:0;
    width:100vw;
    height:100vh;
    content:"";
    z-index:5;
    background-image:url('ouji_transparent.png');
    background-size:auto 100vh;
    background-position:bottom right;
    background-attachment: fixed;
    background-repeat: no-repeat;
    pointer-events:none;
}

header {
    background-color: #eee;

    background-image: url('araou_bg_transparent.png');
        background-size: 110px auto;
}

h1{
    font-size:4rem;
    color:var(--p1);
    font-weight:normal;
    padding:1rem 1rem 1rem 3rem;
}

main {
    position:relative;
    max-width:calc(105vw - 100vh);
}

main * {
    padding:1rem;
}

nav {
    height:2rem;
    padding:0 2rem;
}

nav ul {
    margin:0;
    padding:0;
}

nav ul li {
    display:inline-block;
    list-style-type:square;
    margin:0;
    padding:0;
}

nav ul li:not(:last-child) a::after {
    content:"+";
    color:var(--b1);
    font-weight: bold;
    display:inline-block;
    margin:0 10px;
}

a {
    color:#777;
    text-decoration:none;
}

a:hover {
    color:var(--b1);
}

h2 {
    padding:0 1em;
    margin:1rem 0 0 0;
    background-color:#eee;
    display:inline-block;
    color:#000;
}

#jp {
    font-family:vaR(--font4);
    font-size:1rem;
}
/*
main::before {
    position:absolute;
    top:0;
    z-index:-4;
    width:90vw;
    height:100%;
    display:block;
    content:"";
    background:#fffc;
}*/


dl {
    padding:0rem 0 0 0;
}

dt {
    background-color:#e0b97f;
    color:#000;
    margin:10px;
    padding:3px 10px;
    transform:skew(-10deg);
    display:inline-block;
}

#jp dt {
    transform:none;
}

dd {
    margin-left:1rem;
    border-left:dashed 2px #ddd;
    padding:1rem;
}

hr {
    border:none;
    height:0;
    border-bottom:dashed 2px #ddd;
    margin:0;
    padding:0;
    margin-left:1rem;
    width:calc(100vw - 50vh);
}

@media screen and (orientation:portrait) {
    body::after {
        background-size: 100% auto;
        position: fixed;
        bottom: unset;
        top:calc(100vh - 60vw);
        height:100vh;
        background-origin: border-box;
        background-position:top;
        background-attachment: local;
        left:0;
    }

    #jp hr:last-child {
        margin-bottom:60vw;
    }

    main {
        width: 100vw;
        max-width: 100vw;
    }

    hr {
        width:calc(100vw - 2rem);
    }
}