/* 変数定義 */
@property --main-bg-color{
    syntax: '<color>';
    inherits: false;
    initial-value: #fff;
}
@property --main-txt-size{
    syntax: '<length>';
    inherits: false;
    initial-value: 1.7rem;
}
@property --bg-color{
    syntax: '<color>';
    inherits: false;
    initial-value: #d8ffa6;
}
@keyframes  bg-color-anim {
    0%  {--bg-color: #d8ffa6;}
    33% {--bg-color: #a6cdff;}
    66%{--bg-color: #ffa6ec;}
    100%  {--bg-color: #d8ffa6;}
}
/* 初期化 */
:root{
    --main-bg-color: #fff;
    --main-txt-size: 1.7rem;
    --bg-color: #d8ffa6;
}

html{
    background-color: #d8ffa6;
}

*{
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-family:"Roboto Mono", "M PLUS U", monospace;
    font-optical-sizing: auto;
    font-style: normal;
    overflow-x: hidden;
    animation: bg-color-anim 10s 0s linear infinite;
}
a{
    color: #000;
    text-decoration: none;
    transition: color .1s;
    &:hover{
    color: #21ae76;
    text-decoration: underline;
    }
    &:active{
        color: #21ae76;
        filter: blur(2px);
    }
}
body{
    width: 100vw;
    height: 100vh;
    background-color: #d8ffa6;
    background: 
        radial-gradient(circle at -10% 110%, #60caff, #60caff80 5%, transparent 40%, #ffcece80 95%, #ffcece),
        url(noise.svg),
        var(--bg-color) ;
}

@supports (-webkit-touch-callout: none){
    body{
        animation: none;
    }
}
header{
    display: flex;
    position: sticky;
    top: 0;
    padding: .5rem 1rem;
    z-index: 10;
    background: #fff2;
    backdrop-filter: blur(10px);
    >*{
        line-height: 2rem;
    }
    >a{
        font-weight: bold;
        display: inline-block;
        font-size: 1.2rem;
    }
    >#header-items{
        margin: 0 2rem 0 auto;
        display: flex;
    }
}
h1{
    margin-top: 10rem;
    text-align: center;
    font-size: 2.5rem;
}
h2{
    text-align: center;
}
main{
    background: var(--main-bg-color);
    display: grid;
    place-items: center;
    >h2::after,h2::before{
        content: "-";
        margin: 0 .5rem;
    }
}
.separator1{
    margin-top: 4rem;
    width: 100vw;
    height: 15vw;
    background: linear-gradient(-7deg, var(--main-bg-color) 45%, #0000 45%, #0000 47%, var(--main-bg-color) 47%, var(--main-bg-color) 50%,#0000 50%);
}
.separator2{
    width: 100vw;
    height: 15vw;
    background: linear-gradient(-187deg, var(--main-bg-color) 45%, #0000 45%, #0000 47%, var(--main-bg-color) 47%, var(--main-bg-color) 50%,#0000 50%);
}
table{
    font-size: var(--main-txt-size);
    margin: .5rem 0;
    text-align: left;
    max-width: 90vw;
}
caption{
    font-size: var(--main-txt-size);
    font-weight: bold;
    &::before,&::after{
        content: "-";
        margin: 0 .5rem;
    }
}
th,td,td>a{
    font-size: var(--main-txt-size);
    white-space: pre;
}
footer{
    margin-top: 2rem;
    padding: 3rem 0;
    text-align: center;
    background: #fff5;
    backdrop-filter: blur(10px);
    >p{
        display: inline-block;
        padding: 0 .5rem;
        background: linear-gradient( #0000 50%, #fff 50%, #fff 93%, #0000 93%);
    }
}