@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Fira+Code:wght@300..700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined");
* {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: 100%;
  font-style: normal;
  box-sizing: border-box;
}

:root {
  --type-sans: "IBM Plex Sans", sans-serif;
  --type-serif: "Cormorant Garamond", serif;
  --type-monospace: "Fira Code", monospace;
  --type-icons: "Material Symbols Outlined";
  --type-scale: 84.375%;
  --palette-background: #0a0c10;
  --palette-elevated: #11151b;
  --palette-panels: #171c23;
  --palette-foreground: #e6edf3;
  --palette-secondary: #9ba7b4;
  --palette-tertiary: #5f6b7a;
  --palette-signal: #4cc9f0;
  --palette-signal-dark: rgb(28.9432989691, 186.8041237113, 236.0567010309);
  --palette-signal-darker: rgb(18.5180412371, 172.8350515464, 220.9819587629);
  --palette-signal-darkest: rgb(16.5463917526, 154.4329896907, 197.4536082474);
  --palette-signal-light: rgb(123.0567010309, 215.1958762887, 243.9432989691);
  --palette-signal-lighter: rgb(146.5850515464, 222.293814433, 245.9149484536);
  --palette-signal-lightest: rgb(170.1134020619, 229.3917525773, 247.8865979381);
  --palette-amber: #d9a441;
  --palette-amber-dark: rgb(192.5, 138.8026315789, 38.5);
  --palette-amber-darker: rgb(171.25, 123.4802631579, 34.25);
  --palette-amber-darkest: rgb(150, 108.1578947368, 30);
  --palette-amber-light: rgb(225.5, 184.3552631579, 107.5);
  --palette-amber-lighter: rgb(229.75, 194.5328947368, 128.75);
  --palette-amber-lightest: rgb(234, 204.7105263158, 150);
  --palette-oxide: #a64e4e;
  --palette-oxide-dark: rgb(131.3032786885, 61.6967213115, 61.6967213115);
  --palette-oxide-darker: rgb(113.9549180328, 53.5450819672, 53.5450819672);
  --palette-oxide-darkest: rgb(96.606557377, 45.393442623, 45.393442623);
  --palette-oxide-light: rgb(186.2704918033, 108.7295081967, 108.7295081967);
  --palette-oxide-lighter: rgb(194.4221311475, 126.0778688525, 126.0778688525);
  --palette-oxide-lightest: rgb(202.5737704918, 143.4262295082, 143.4262295082);
  --palette-deep: #5c6ac4;
  --palette-deep-dark: rgb(62.9864864865, 77.9324324324, 174.0135135135);
  --palette-deep-darker: rgb(56.2094594595, 69.5472972973, 155.2905405405);
  --palette-deep-darkest: rgb(49.4324324324, 61.1621621622, 136.5675675676);
  --palette-deep-light: rgb(129.4459459459, 140.2297297297, 209.5540540541);
  --palette-deep-lighter: rgb(148.1689189189, 157.3445945946, 216.3310810811);
  --palette-deep-lightest: rgb(166.8918918919, 174.4594594595, 223.1081081081);
  --palette-corundum: #3fa47c;
  --palette-corundum-dark: rgb(48.845814978, 127.154185022, 96.140969163);
  --palette-corundum-darker: rgb(41.768722467, 108.731277533, 82.2114537445);
  --palette-corundum-darkest: rgb(34.6916299559, 90.3083700441, 68.281938326);
  --palette-corundum-light: rgb(87.3876651982, 190.6123348018, 149.731277533);
  --palette-corundum-lighter: rgb(105.8105726872, 197.6894273128, 161.3017621145);
  --palette-corundum-lightest: rgb(124.2334801762, 204.7665198238, 172.872246696);
  --length-5: 0.37rem;
  --length-10: 0.741rem;
  --length-15: 1.111rem;
  --length-20: 1.481rem;
  --length-25: 1.852rem;
  --length-30: 2.222rem;
  --length-35: 2.593rem;
  --length-40: 2.963rem;
  --length-45: 3.333rem;
  --length-50: 3.704rem;
}

html {
  font: var(--type-scale)/1.65 var(--type-sans);
  background: var(--palette-background);
  color: var(--palette-foreground);
}

html, body {
  width: 100%;
  height: 100dvh;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 90dvh;
}
main h1 {
  font: 4rem/1.85 var(--type-serif);
  letter-spacing: 0.05em;
}
main h1 span {
  font-style: italic;
  margin-right: 5px;
  color: var(--palette-amber);
}
main h2 {
  font: var(--length-25)/1.85 var(--type-sans);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
main h3 {
  font: var(--length-15)/1.85 var(--type-sans);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

footer {
  height: 10dvh;
}
footer div {
  height: 10dvh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 2dvw;
}
footer p {
  font-size: var(--length-10);
  letter-spacing: 0.15em;
}
footer p span, footer p a {
  text-transform: uppercase;
}
footer p a {
  color: var(--palette-signal);
  text-decoration: none;
  transition: color 120ms linear;
}
footer p a:focus, footer p a:hover {
  color: var(--palette-amber);
}