@font-face {
    font-family: 'fira';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/FiraCode-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 100 900;
    src: url('/fonts/Fraunces.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/Inter.ttf') format('truetype');
}

:root{
    --d1:1.0rem;
    --d2:1.5rem;
    --d3:2.25rem;
    --d4:3.375rem;
    --d5:5.0625rem;
    --d6:7.59375rem;
    --d7:11.390625rem;
    --d8:17.0859375rem;
    --d9:25.62890625rem;
    --d10:38.443359375rem;

    --border-round:var(--d2);
}


body {
	color: var(--rp-moon-text);
	background: var(--rp-moon-base);
    padding: 0;
    max-width: 60rem;
    width:100%;
    margin: auto;
    text-align: justify;
    font-family: Inter;
}

code {
    background: var(--rp-moon-surface) !important;
    padding: 3px;
    border-radius: 0.5rem;
    font-family: fira;
}

pre {
    background: var(--rp-moon-surface) !important;
    border-radius: 0.5rem;
}

pre code{
    padding:0px;
}

a {
    color: var(--rp-moon-iris);
    text-decoration: none;

    &:visited {
        color: hsl(from var(--rp-moon-iris) h s calc(l * 0.85))
    }
}

h1,h2,h3,h4,p:first-child {
	#margin-top: 0;
}


main {
    width: 100%;
    #box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85));
}

.date{
    text-align: right;
    color: var(--rp-moon-subtle);
    font-family: Fraunces;
}

hr {
    color: var(--rp-moon-muted);
}


h1{font-size: 2.986rem}
h2{font-size: 2.488rem}
h3{font-size: 2.074rem}
h4{font-size: 1.728rem}

 h1, h2, h3, h4{
    font-family: "Fraunces", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    font-variation-settings:
        "SOFT" 0,
        "WONK" 0;
}

h4{
    color: var(--rp-moon-foam);
}

.media-margin{
    margin: var(--d3);
}

@media only screen and (max-width: 700px) {
    .media-margin{ 
        margin: var(--d3) var(--d1);
    }
}


