:root { --bannock-red: #a00201; --bannock-red-alt: #c40c02; --bannock-off-white: #ededed; --bannock-black: #070707; line-height: 1.5; }

@media all and (color-gamut: p3) { :root { --bannock-red: color(display-p3 0.585 0.069 0.023); --bannock-blue: color(display-p3 0.07 0.54 0.518); --bannock-red-alt: color(display-p3 0.72 0.09 0.025); } }

html { box-sizing: border-box; }

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

body { margin: 0; font-size: 13px; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }

h1 { font-size: 4em; font-weight: bold; color: var(--bannock-red-alt); letter-spacing: -0.05em; text-transform: uppercase; line-height: 1; margin-bottom: 0; margin-top: 3rem; }

h3 { margin-top: 3rem; margin-bottom: 0; line-height: 1; font-size: 2rem; }

h2 { margin-top: 0; margin-bottom: 0; font-size: 3em; }

.description { margin-top: 0; margin-bottom: 1.5rem; margin-left: 0.25em; font-size: 15px; font-weight: bold; text-transform: uppercase; }

.contact { margin-top: 1.5rem; margin-bottom: 1.5rem; margin-left: 0.2em; font-size: 14px; }

.projects { padding: 1.5rem 0; }

main { background: var(--bannock-red); color: var(--bannock-off-white); }

@media all and (color-gamut: p3) { main .container { background-image: linear-gradient(in oklch to bottom, var(--bannock-red), var(--bannock-blue)); } }

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

main a:hover { color: #fff; }

.contact a, .contact a:visited { color: var(--bannock-black); font-weight: bold; text-decoration: none; }

.contact a:hover, .contact a:active { color: var(--bannock-red-alt); }

.time { font-variant-numeric: tabular-nums; }

.wrapper { max-width: 1200px; margin: 0 auto; padding: 0 1rem; position: relative; }

.project { margin: 3rem 0; padding: 1.5rem 0; }

h2 + .project { margin-top: 0; }

.project p { margin-top: 1.5rem; margin-bottom: 1.5rem; max-width: 50ch; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); }

.project__image::before { content: ""; display: block; width: 100%; height: 26px; background: #111; border-radius: 4px 4px 0 0; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035), 0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07); }

.project__image::after { content: ""; top: -32px; left: -135px; width: 12px; height: 12px; border-radius: 50%; position: absolute; box-shadow: 143px 39px 0 0 #f16063, 163px 39px 0 0 #fdbd37, 183px 39px 0 0 #40c246; }

.project__image { position: relative; padding: 0; margin: 0; border-radius: 0 0 4px 4px; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035), 0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07); }

.project__image picture, .project__image img { max-width: 100%; height: auto; display: block; overflow: hidden; border-radius: 0 0 4px 4px; }

.project .project__links { margin-top: 0.3125rem; font-size: 0.8rem; }

.project-bg { position: relative; overflow: hidden; }

.project-bg-image { position: absolute; width: 100%; height: 600px; object-fit: cover; object-position: center; opacity: 0.4; }

.project__details { margin: 0 auto; max-width: 50ch; }

.nowrap { white-space: nowrap; }

@media all and (min-width: 728px) { .project__details { margin: 0; max-width: 100%; } body { font-size: 14px; } h1 { font-size: 6em; } h3 { margin-top: 3rem; } .description, .contact { font-size: 1.8em; } .project { margin: 1.5rem 0; padding: 1.5rem 0; display: grid; grid-template-columns: 21rem 1fr; grid-gap: 3rem; gap: 3rem; } }

@media all and (min-width: 960px) { body { font-size: 15px; } h1 { font-size: 9em; } h2 { margin-top: 0.75rem; font-size: 4.5rem; } h2 + .project { margin: 1.5rem 0; } .description, .contact { font-size: 2.65em; } .project { grid-template-columns: 25rem 1fr; } }

@media all and (min-width: 1200px) { body { font-size: 16px; } h1 { font-size: 10em; } .description, .contact { font-size: 3em; } .projects { padding: 1.5rem 0.5rem; } }

/*# sourceMappingURL=main.css.map */