@charset "UTF-8";

@import url("./main_comp/header.css");
@import url("./main_comp/footer.css");

@font-face {
    font-family: kusanagi;
    src: url(../font/Kusanagi+.otf);
    font-display: swap;
}


:root {
    --bg: #0A0908;
    --bg1: #342E37;
    --bg2: #484041;

    --f_color: #dadada;
    --f2_color: #8D99AE;

    --f: tahoma;
    --fh: kusanagi;
    --fh2: impact;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: 0.1em;
}

html, body {
    width: 100%;
    min-height: 100%;
    min-height: 100dvh;
}

body {
    position: relative;
    background-color: var(--bg);
    font-family: var(--f);
    color: var(--f_color);

    display: flex;
    flex-direction: column;

    overflow-x: clip;

    padding-top: var(--header-height);
}

.development-alert {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 0.65rem 1rem;
    background: #d9a441;
    color: #1d160b;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-align: center;
}

body > *:not(header) {
    position: relative;
}

.bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url("../media/bg.svg") no-repeat center / cover;
    transform-origin: center;
    opacity: 0.2;
    filter: invert(1);
}

article {
    font-family: var(--f);
}