@import url("./grid.css");

/* Default styles */
* { margin: 0; padding: 0; }
:root { font-size: 16px; }
:root a { text-decoration: none; }
:root { font-family: "S-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }
h1 { font-weight: normal; }
ul, ol { list-style: none; }

h2 { margin-top: 1em; }
h3, h4, h5, h6 { margin-top: 1rem; }
h2, h3, h4, h5, h6 { margin-bottom: 0.5rem; }
p + p { margin-bottom: 1rem; }

table { margin-top: 1rem; border-spacing: 2rem 0; }
pre { margin: 1rem auto; width: 100%; }
pre code { display: block; background-color: #d7d7d7; width: 100%; padding: 0.5rem; }

/* Text colors */
.text-red { color: #EC1F27; }
.text-red-1 { color: #F04C53; }
.text-red-2 { color: #F4797E; }
.text-red-3 { color: #F7A5A9; }
.text-red-4 { color: #FBD2D4; }
.text-black { color: #231F20; }
.text-black-1 { color: #3B3838; }
.text-black-2 { color: #605C5C; }
.text-black-3 { color: #8C8989; }
.text-black-4 { color: #C1C0BF; }
.text-white { color: #FFFFFF; }

/* Background colors */
.bg-red { background-color: #EC1F27; }
.bg-red-1 { background-color: #F04C53; }
.bg-red-2 { background-color: #F4797E; }
.bg-red-3 { background-color: #F7A5A9; }
.bg-red-4 { background-color: #FBD2D4; }
.bg-black { background-color: #231F20; }
.bg-black-1 { background-color: #3B3838; }
.bg-black-2 { background-color: #605C5C; }
.bg-black-3 { background-color: #8C8989; }
.bg-black-4 { background-color: #C1C0BF; }

/* Link text */
.link-red a { color: #EC1F27; }
.link-red-1 a { color: #F04C53; }
.link-red-2 a { color: #F4797E; }
.link-red-3 a { color: #F7A5A9; }
.link-red-4 a { color: #FBD2D4; }
.link-black a { color: #231F20; }
.link-black-1 a { color: #3B3838; }
.link-black-2 a { color: #605C5C; }
.link-black-3 a { color: #8C8989; }
.link-black-4 a { color: #C1C0BF; }
.link-border a { text-decoration: solid 1px; }

/* Other typography classes */
/* Hero text is enormous, but reduced at higher resolutions. */
.text-size-rxl { font-size: 15vw; } 
@media screen and (min-width: 1200px) { .text-size-rxl { font-size: 11vw; } }
.text-center { text-align: center; }
.text-shadow { text-shadow: #231F20 -5px 5px 10px; }
.text-justify { text-align: justify; text-justify: inter-word; }
.text-line-sm { line-height: 1.3em; }
.text-line-lg { line-height: 2em; }
.text-nowrap { text-wrap: nowrap; }
.text-fade { opacity: 50%; }

/* Margin and padding classes */
.m-sm { margin: 1em; }
.p-sm { padding: 1em; }
.m-md { margin: 2em; }
.p-md { padding: 2em; }
.border { border: solid 1px black; }

/* Block sizing classes */
.h-whole { height: 100vh; }
.w-whole { width: 100vw; }
.h-quarter { height: 25vh; }
.w-quarter { width: 25vw; }
.h-parent { height: 100%; }
.w-parent { width: 100%; }
.h-sm { height: 60px; }
.w-sm { width: 60px; }
.h-md { height: 80px; }
.no-overflow { overflow: hidden; }
.sm-hide { display: none; }
@media screen and (min-width: 610) { .sm-hide { display: initial; } }

/* Alignment classes */
.list-linear li { display: inline; }
.list-spread { display: flex; column-gap: 1em; }
.flex { display: flex; }
.v-center { align-items: center; align-content: center; }
.h-center { justify-content: center; justify-items: center; }
.v-base { align-items: baseline; }
.m-auto { margin: 0 auto; }

/* Image filters */
.blur { filter: blur(1px); }
.obscure { filter: brightness(25%) blur(15px); transform: scale(1.06); }
.image-fit { background-size: cover; background-repeat: no-repeat; background-position: center center; }
.image-background { position: fixed; z-index: -2; }
section:has(> .image-background) { position: relative; }