/*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, h5, h6 {
    width: 100%;
    margin: 0;
}

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

p {
    margin: 0;
}

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 */
/**************************************************/

/* Isenheim Regular by Tunera and Benoit Ferran*/
/* https://www.tunera.xyz/fonts/isenheim/ */
@font-face {
    font-family: 'Ishheim';
    src: url(../fonts/isenheim_regulier.otf);
}

/* Hachipochi-Eight alphabet by Maniackers Design */
/* https://mksd.jp/Hachipochi.html */
@font-face {
    font-family: 'Hachipochi';
    src: url(../fonts/hachea.ttf);
}

:root {
    
    --black: #515062;
    --white: #f3f3f3;
    
    --primary: #FBB5F9;
    --primary-muted: #FFD9FB;
    --secondary: #D85CD4;
    
    --highlight: #0078bf;
    
   
    
    --screen: rgba(81,80,98,.8);
    --filter-effect: blur(2px);
    
    --page-margin: 6vw;
    --page-margin-small: 4vw;
    
    --gutter: 1rem;
    
    --max-page-size: 1400px;
        
    
    --mono: normal bold .65rem/1.2rem 'Hachipochi','Consolas', 'Monaco', monospace;
    --monokern: 1pt;
    
    --headers: normal normal 4.5rem/1 'Ishheim', 'Times New Roman', serif;
    --subheaders: normal 600 2rem/1 'Ishheim', 'Times New Roman', serif;
    --body: normal normal 1rem/1.5rem 'Tahoma', sans-serif;
    
    --body-smaller: normal normal .75rem/1.15rem 'Tahoma', sans-serif;
}

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

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

body { 
    color: var(--black);
    font: var(--body);
    letter-spacing: .25pt;
    background: var(--white);
    scroll-behavior: smooth;
}

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

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

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

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

p, li {
    max-width: 68ch;
}

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

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

h1 {
    font: var(--headers);
    letter-spacing: -.1rem;
    word-spacing: -.75rem;
    text-transform: capitalize;
    margin-bottom: -.45ch;
}

h2 {
    font: var(--subheaders);
}

h3 {
    font-weight: bold;
    margin: 2rem 0 1rem 0;
}

h3, .small-caps, .label {
    font: var(--body-smaller);
    font-size: .7rem;
    line-height: 1.2rem;
    letter-spacing: .05rem;
    text-transform: uppercase;
    font-weight: bold;
}


summary {
    cursor: pointer;
}
summary:hover {
    color: var(--secondary);
}
.small {
    font: var(--body-smaller);
    text-transform: initial;
}

button {
    color: var(--white);
    font: var(--mono);
    letter-spacing: var(--monokern);
    text-transform: uppercase;
    text-decoration: none;
    padding: 4px 12px 4px 4px;
    border: none;
    background: var(--black);
    clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0 100%);
    transition: all .2s;
}

button:hover {
    color: var(--black);
    background: var(--primary);
    padding-right: 16px;
    padding-left: 8px;
}

.callout {
    font-weight: 600;
}


@media screen and (max-width: 786px) {   
    
    :root {
        --page-margin: 24px;
        --page-margin-small: 18px;
        --gutter: 10px;
    }
    
    h1 {
        font-size: 4rem;
        margin-bottom: 1rem;
    }

}