*, *::before, *::after {
    box-sizing: border-box;
}

:root {
--jet: hsla(270, 2%, 21%, 1);
--air-force-blue: hsla(198, 37%, 46%, 1);
--timber-wolf: hsla(322, 10%, 84%, 1);
--coquelicot: hsla(15, 100%, 50%, 1);
--folly: hsla(343, 100%, 53%, 1);
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--jet);
    color: var(--timber-wolf);
    font-size: 18px;
    line-height: 1.5;
}

.new-scraps {
    --padding-inline: 1rem;
    --content-width: minmax( 2rem, 65ch);

    display: grid;
    grid-template-columns: 
     [full-width-start] 100px [breakout-start] 100px 1fr [content-start] var(--content-width) [content-end] 1fr  100px [breakout-end] 100px [full-width-end];

     > * {
    grid-column: content;
     }
    }

.new-scraps > .breakout,
.highlight {
    grid-column: breakout;
}
pre {
    width: 100%;
    background-color: #252525 !important;
}

.new-scraps > .full-width,
.full-width > img {
    grid-column: full-width;
}

.standout {
    background-color: var(--folly);
    padding-inline: 1em;

    & a {
        color: rgb(0, 110, 255);
        font-weight: bold;
    }
}


img {
    width: 100%;
}

h1,
h2,
h3 {
    color: var(--air-force-blue);
}

a {
    color: var(--coquelicot);
}