/*Reset*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
========================================================================== */

html {
    line-height: 1.25;
    -webkit-text-size-adjust: 100%;
    font-size: 12pt;
    scroll-behavior: smooth;
}

/* Sections
========================================================================== */

html, body, ul {
    margin: 0;
	padding: 0;
	border: 0;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
}

main {
    display: block;
}

/* Other
========================================================================== */

h1, h2, h3, h4 {
    width: 100%;
    margin: 0;
}

h1 {
    line-height: .75;
    font-weight: normal;
}

p {
    margin: 0;
    max-width: 68ch;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

img {
    display: block;
    max-width: 100%;
}

figure, figcaption {
    padding: 0;
    margin: 0;
}

* {
    box-sizing: border-box;
}

/**************************************************/
/* Special */
/**************************************************/

/* Albertella Light by Moji Waku */
/* https://moji-waku.com/albertella/index.html */
@font-face {
    font-family: 'Albertella';
    src: url(../fonts/albertella-light.otf);
}


/* KFひま字ドット by KF Studio */
/* https://www.kfstudio.net/font/kfhimajidot/ */
@font-face {
    font-family: 'KFHimajiDOT';
    src: url(../fonts/kfhimajidot.otf);
}

:root {
    --black: #2A302E;
    --black-alt: #344040;
    --gray: #B9C6C4;
    --white: #DFDFDD;
    --main: #7972AB;
    --accent: #BC9AC9;
    --highlight: #B9C6C4;
    
    --glass: rgba(188,154,201,.5);
    --screen: rgba(185,198,196,.8);
    --tint: rgba(42,48,46,.9);
    --filter-effect: blur(5px);
    
    --page-margin: 4vw;
    
    --mono: normal normal .8rem/1.2rem 'KFHimajiDOT','Consolas', 'Monaco', monospace;
    --monokern: 1pt;
    --headers: normal normal 1rem/1rem 'Albertella', 'Times New Roman', serif;
    --body: normal normal .8rem/1.35rem 'Tahoma', sans-serif;
}

/**************************************************/
/* Layout */
/**************************************************/

html {
    background: var(--white);
}

body {
    width: 100%;
    color: var(--black);
    font: var(--body);
}

.highlight {
    color: var(--black);
    display: inline-block;
    background: var(--highlight);
    padding: 1px 4px;
}

a, a:visited {
    color: var(--main);
}

a:active, a:hover {
    color: var(--accent);
}

p:not(:last-child) {
    margin-bottom: 1ch;
}

hr {
    border: var(--accent) 1px solid;
}


h1 {
    font: var(--headers);
    letter-spacing: .25ch;
    color: var(--accent);
    text-transform: uppercase;
    margin-top: 1.5rem;
    font-size: 8rem;
    line-height: 4rem;
}

h2 {
    font: var(--mono);
    font-size: 2rem;
    letter-spacing: .25ch;
    margin: 4rem 0 2rem 0;
}

h3 {
    font: var(--mono);
    letter-spacing: var(--monokern);
    text-transform: uppercase;
    margin: 2rem 0 1rem 0;
}



@media screen and (max-width: 720px) {   
    
    :root {
        --page-margin: 20px;
    }
    
    h1 {
        font-size: 5rem;
    }

}