:root {
  --muted-black: #231f20;
  --parchment: #ede7d9;
  --logo-red: #ed1c24;
  --mid-red: #881e22;
}

html {
  height: 100%;
  background-color: var(--parchment);
  color: var(--muted-black);
  font-family: "Archivo", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

body {
  margin: 0 auto;
  padding: 0.7rem;
  font-size: calc(1rem + 0.5vw);
  min-height: calc(100% - 1.4rem);
  display: flex;
  flex-direction: column;
}

h1 {
  font-size: calc(2rem + 0.5vw);
}

h2 {
  font-size: calc(1.5rem + 0.5vw);
}

.med {
  font-weight: 600;
}

/* https://css-tricks.com/couple-takes-sticky-footer/ */
main {
  max-width: 42rem;
  margin: 0 auto;
  line-height: 1.4;
  flex: 1 0 auto;
}

main a {
  color: var(--mid-red);
  transition: background-color 0.1s;
}

main a:active {
  color: var(--logo-red);
}

main a:hover {
  background: rgb(from var(--mid-red) r g b / 10%);
}

/* || Header */

.nav-menu {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin-top: 1rem;
  font-size: 110%;
  margin-inline: 2rem;
}

.nav-menu a {
  padding-inline: 0.3rem;
  margin-inline: 0.2rem;
  text-decoration: none;
  color: var(--muted-black);
  transition: color 0.15s;
}

.nav-menu a:hover {
  color: var(--logo-red);
}

.nav-menu li:not(:last-of-type) {
  border-right: 2px solid var(--muted-black);
}

.logo {
  display: block;
  max-width: 45rem;
  margin: 0 auto;
}

/* || Footer */

footer {
  text-align: right;
  margin-top: 2rem;
}

footer img {
  max-width: 7rem;
}

/* || Figures */

figure {
  margin: 0;
}

figure img {
  max-width: calc(100% - 4px);
  border: 2px solid var(--muted-black);
}

figcaption {
  text-align: center;
  color: gray;
  font-size: 80%;
}

/* || Homepage */

main:has(#logo-transformer) {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#logo-transformer {
  width: 80%;
}
/* 
#logo-transformer[src="/images/malamiko-logo-var3.svg"] {
  max-width: 90%;
} */