@font-face {
    font-family: 'calligraffitiregular';
    src: url('/fonts/Calligraffiti-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Bennuscribble';
    src: url('/fonts/Bennuscribble-Regular.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    --ink: hsl(0, 0%, 8%);
    --paper: hsl(240, 25%, 98%);
    --bg1: hsl(18, 30%, 33%);
    --border1: hsl(209, 49%, 72%);

    --font-sans: Cantarell, 'Noto Sans', sans-serif;
    --font-serif: 'IBM Plex Serif', Merriweather, serif;
    --font-mono: 'Oxygen Mono', 'Fira Code', Consolas, monospace;
    --font-cursive: Bennuscribble, Calligraffiti, cursive;

    --main-line-color: hsl(234, 62%, 86%);
    --side-line-color: hsl(350, 100%, 91%);
}

html {
    color: var(--ink);
    font-size: 1rem;
    font-family: var(--font-sans);
}

body {
    background-color: var(--bg1);
    font-size: 1.5em;
    line-height: 1.6;
}

main {
    max-width: 70em;
    margin: auto;
}

.wrapper {
    margin-bottom: 64px; 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-template-rows: 1fr;
}

/* messing around with https://codepen.io/kevinpowell/pen/dyavyPg */
.paper {
    font-family: var(--font-cursive);
    font-size: 1.5rem;
    background: var(--paper);
    padding: 2.5lh 3rem 2rem 5.5rem;
    max-width: 50ch;
    background-image:
    /* the red line */
    linear-gradient(90deg, transparent, transparent 4rem, var(--side-line-color) 4rem, var(--side-line-color) 4.25rem, transparent 4.25rem),
    /*  The top space  */
    linear-gradient( var(--paper), var(--paper) 3lh, transparent 3lh),
    /* the blue lines */
    repeating-linear-gradient(
        transparent,
        transparent calc(1lh - 2px),
        var(--main-line-color) calc(1lh - 2px),
        var(--main-line-color) 1lh,
        transparent 1lh
    );
    box-shadow: 6px 6px 4px 0px hsl(0 0% 10% / 0.5);
    grid-column: col 1 / span  3;
    grid-row: row 1;
}

.typewriter {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    background: var(--paper);
    padding: 2rem 4rem 5rem 3rem;
    max-width: 50ch;
    box-shadow: 6px 6px 4px 0px hsl(0 0% 10% / 0.4);
    grid-column: col 1 / span  3;
    grid-row: row 1;
}

.postit {
    font-family: var(--font-cursive);
    width: 250px;
    height: 240px;
    overflow: hidden;
    padding: 18px;
    background: hsl(60 100% 80%);
    color: hsl(0, 0%, 8%);
    box-shadow: 6px 6px 4px 4px hsl(0 0% 0% / 0.6);
}

.tilt-left {
    transform: rotate(-25deg);
}

.tilt-right {
    transform: rotate(15deg);
}

.floater {
    grid-column: col 3;
    grid-row: row 1;
    z-index: 20;
}

img,
picture,
svg,
video {
    max-width: 100%;
    object-fit: cover;
    aspect-ratio: 1;
}