@import "reset.css";
@import "font.css";

:root {
  --font-fancy: "Mynerve", cursive;
  --font-basic: "Ysabeau", sans-serif;
  --ratio: 1.414;
  --xxs: calc(1rem / pow(var(--ratio), 3));
  --xs: calc(1rem / pow(var(--ratio), 2));
  --s: calc(1rem / var(--ratio));
  --l: calc(1rem * var(--ratio));
  --xl: calc(1rem * pow(var(--ratio), 2));
  --xxl: calc(1rem * pow(var(--ratio), 3));
  --color-white: #ffffff;
  --color-black: #393e41;
  --color-grey: #d2d2d2;
  --color-primary-light: #addaa3;
  --color-primary: #68d520;
  --color-primary-dark: #287e3b;
  --color-accent-red: #ca2f18;
  --color-accent-violet: #5c415d;
}

:root {
  color: var(--color-black);
  font-family: var(--font-basic);
  letter-spacing: 0.02em;
  line-height: 1em * var(--ratio);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-fancy);
}

.bg-primary-light {
  background-color: var(--color-primary-light);
  color: var(--color-black);
}

.bg-primary {
  background-color: var(--color-primary);
  color: var(--color-black);
}

.bg-primary-dark {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
}

.bg-accent-red {
  background-color: var(--color-accent-red);
  color: var(--color-white);
}

.bg-accent-violet {
  background-color: var(--color-accent-violet);
  color: var(--color-white);
}

.bg-black {
  background-color: var(--color-black);
  color: var(--color-white);
}

.bg-grey {
  background-color: var(--color-grey);
  color: var(--color-black);
}


h1 {
  background: no-repeat url("/images/h1.png");
  background-size: auto 1em;
  padding-left: calc(1em * sqrt(var(--ratio)));
  font-size: var(--xxl);
  letter-spacing: -0.05em;
  line-height: 1em;
  max-width: 20ch;
}

h2 {
  background: no-repeat url("/images/h2.png");
  background-size: auto 1em;
  padding-left: calc(1em * sqrt(var(--ratio)));
  font-size: var(--xl);
  letter-spacing: -0.02em;
  line-height: 1em;
  max-width: 30ch;
}

p {
  max-width: 60ch;
}

ul,
ol {
  max-width: 50ch;
}

article,
section,
hgroup {
  max-width: 65ch;
  margin-inline: auto;
}

.intro {
  font-size: var(--l);
  line-height: 1.414em;
}

.article-meta {
  text-align: right;
  font-style: italic;
}

ul>li {
  list-style: none;
}

li::before {
  content: "";
  display: inline-block;
  margin-inline: 0.5em;
  background: no-repeat url("/images/bullet.png");
  background-size: contain;
  width: calc(1em / var(--ratio));
  height: calc(1em / var(--ratio));
}

li li::before {
  background-image: url("/images/bullet-sub.png");
}

/* Links & buttons */
a {
  text-decoration-color: var(--color-primary-dark);
  text-decoration-style: dotted;
  text-decoration-thickness: 0.15em;
}

a.button {
  color: var(--color-black);
  text-decoration-color: var(--color-black);
}

a:visited {
  text-decoration-color: var(--color-accent-violet);
}

a:hover, a:focus {
  color: var(--color-primary-dark);
  text-decoration-color: var(--color-primary-dark);
  text-decoration-style: solid;
}

.button:hover, .button:focus {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  text-decoration-color: var(--color-white);
}

a:active {
  color: var(--color-accent-red);
  text-decoration-color: var(--color-accent-red);
}

.button,
.bg-primary-light,
.bg-primary,
.bg-primary-dark,
.bg-accent-red,
.bg-accent-violet,
.bg-black,
.bg-grey {
  mask-image: url("/images/button.png");
  mask-size: 100% 100%;
  padding-inline: calc(1em / pow(var(--ratio), 1));
}

.button {
  font-family: var(--font-fancy);
  font-weight: bold;
  display: inline-block;
  background-color: var(--color-primary-light);
  padding-block: var(--xs);
  padding-inline: 1em;
}

/* Layout */
body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

body>*+* {
  margin-block-start: var(--xl);
}

main>*+* {
  margin-block-start: var(--l);
}

footer {
  inline-size: 100%;
  min-block-size: 20vh;
  max-block-size: 30vh;
  background-color: var(--color-grey);
}