@font-face{
    font-family: "NatureBeauty";
    src: url("/NatureBeauty.ttf") format("truetype");
}

@font-face {
    font-family: "Rasputin";
    src: url("/Rasputin.otf");
}

@font-face {
    font-family: "NerdFontIcons";
    src: url("/NerdFontIcons.ttf") format("truetype");
}

:root {
    font-size: min(3vw, 3vh);
    font-family: Helvetica, "NerdFontIcons";
    color-scheme: dark;

    --color1: #fca382;
    --color2: #a6a6a6;
    --color3: black;

    --text: black;
    --background: white;
    --background2: oklch(from var(--color2) calc(l - 0.0) c h);

    color: var(--text);
}

* { margin: 0; padding: 0; }
body { background-color: var(--background); }

nav {
    position: fixed;
    z-index: 1;
    top: 0;
    width: 100vw;

    display: flex;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    padding: .2em .8em;
    padding-bottom: 2em;

    /* font-size: 110%; */
    font-weight: bold;
    font-family: "Rasputin", "NerdFontIcons";

    text-shadow: var(--text) 0 0 1px;
    background:
        radial-gradient(
            ellipse 50% 2em at center bottom,
            transparent   100%,
            var(--color1) calc(100% + 2px)
        ),
        radial-gradient(
            ellipse 50% 1.7em at center bottom,
            transparent   100%,
            var(--color3) calc(100% + 2px) 
        );
}
nav > a {
    margin: 0 .8em;
    text-decoration: none;
    color: var(--color3);
}
nav > a:hover { text-decoration: underline; }
nav > a:not(:first-child) { flex-grow: 1; }
nav img {
    height: 2em;
    margin-top: .4em;
    vertical-align: bottom;
    scale: 1.5;
}

h1, h2, h3 {
    margin: 0.5em 0;
    text-align: center;

    font-family: "Rasputin";
    font-size: 300%;
    text-shadow:
        var(--text)      0  .05em 3px,
        var(--text)  .05em      0 3px,
        var(--text)      0 -.05em 3px,
        var(--text) -.05em      0 3px,
        var(--text)  .05em  .05em 3px,
        var(--text)  .05em -.05em 3px,
        var(--text) -.05em  .05em 3px,
        var(--text) -.05em -.05em 3px;
    color: var(--color1);
}
h2 { font-size: 200%; }
h3 { font-size: 150%; }
h4 {
    text-align: center;
    /* text-shadow: var(--color1) 0px 0px 2px; */
}

article {
    margin: 2em;
    padding: .3em 0;
    border-radius: 100% / 2.5em;
    background: var(--color3);
}
article > div {
    overflow: hidden;

    border-radius: 100% / 2em;
    padding: 1em;

    background: var(--background2);
}

address { font-style: normal; }

p {
    text-indent: 2em;
    text-wrap: balance;
}

div.wrap-point {
    translate: 0 -6em;
    opacity: 0;
}

button, .button {
    display: inline-block;

    margin: .3em;
    border: none;
    border-top: .1em solid var(--color3); 
    border-bottom: .1em solid var(--color3); 
    border-radius: 50% / 20%;
    padding: .2em .5em;

    color: var(--color3);
    background: var(--color1);
    text-decoration: none;
    font-size: 110%;
    font-weight: bold;
}
button:hover, button:active, .button:hover, .button:active { text-decoration: underline; }

footer {
    display: flex;
    align-items: center;
    text-align: center;

    padding: 1em;
    padding-top: 2.5em;

    color: oklch(from var(--color1) l calc(c - 0.02) h / 0.7);
    font-size: 50%;

    background:
        radial-gradient(
            ellipse 50% 2em at center top,
            transparent   100%,
            var(--color3) 100%
        );
}
footer > table { width: 100%; }
footer > table td { min-width: 5vw; }

.obfs { display: none; }

@keyframes banner-slide-zoom-in {
from {
    background-position-x: 100vw;
}
10% { background-position-x: 0%; }
to {
    background-position-x: 100%;
}
}