/* Constants */

:root {
  --color-header: #68c64e;
  --color-title: #68c64e;
  --color-bullet: #68c64e;
  --color-border: #bebebe;
  --color-light-background: #eee;
  --color-link: #0377bb;

  --font-size-cat: 0.75rem;
  --font-size-dog: 1rem;
  --font-size-lion: 1.25rem;
  --font-size-bear: 1.5rem;
  --font-size-cow: 1.75rem;

  --spacing-mouse: 0.25rem;
  --spacing-cat: 0.5rem;
  --spacing-dog: 1rem;
  --spacing-horse: 2rem;
  --spacing-elephant: 4rem;

  --border-radius-bee: 0.2rem;
  --border-radius-mouse: 0.4rem;
  --border-radius-cat: 0.8rem;

  --border-width-ant: 0.1rem;
  --border-width-beetle: 0.2rem;
  --border-width-mouse: 0.4rem;
}

/* Media */

@media screen and (max-width: 499px) {
  html { font-size: 16px; }
}

@media screen and (min-width: 500px) and (max-width: 799px) {
  html { font-size: 18px; }
}

@media screen and (min-width: 800px) {
  html { font-size: 20px; }
}

/* Body */

body {
  margin: 0;
  line-height: var(--font-size-bear);
  font-family: sans-serif;
  max-width: 800px;
  margin: 0 auto;
}

/* Header */

header {
  display: flex;
  background-color: var(--color-header);
  color: white;
  margin-bottom: var(--spacing-horse);
  padding: var(--spacing-dog);
  font-size: var(--font-size-lion);
  display: flex;
  justify-content: center;
}

@media screen and (min-width: 800px) {
  header { 
    border-bottom-left-radius: var(--border-radius-bee);
    border-bottom-right-radius: var(--border-radius-bee);
  }
}

/* Main */

@media screen and (max-width: 799px) {
  main { 
    margin-left: var(--spacing-dog);
    margin-right: var(--spacing-dog);
  }
}

/* Sections */

section {
  margin-bottom: var(--spacing-horse);
}

/* Contact */

.contact {
  font-size: var(--font-size-cat);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.contact a {
  display: flex;
  align-items: center;
  margin-right: var(--spacing-dog);
}

.contact svg {
  margin-right: var(--spacing-mouse);
}

/* Images */

img {
  border: solid 1px var(--color-border);
  border-radius: var(--border-radius-mouse);
  margin-bottom: var(--spacing-dog);
  width: 100%;
  max-width: 800px;
}

/* Title */

h1 {
  color: var(--color-title);
  font-size: var(--font-size-lion);
  font-weight: bold;
  border-bottom: 0.1rem solid var(--color-title);
  margin: 0 0 var(--spacing-horse);
}

h1 a:hover {
  text-decoration: underline;
}

h2 {
  display: inline-block;
  font-size: var(--font-size-lion);
  margin: 0;
  font-weight: bold;
  margin: 0 0 var(--spacing-dog);
}

.subtitle {
  font-weight: normal;
  font-style: italic;
  font-size: var(--font-size-cat);
  font-family: sans-serif;
  margin: var(--spacing-mouse) 0 0;
}


/* Paragraphs */

p {
  margin: 0 0 var(--spacing-dog);
  font-family: serif;
}

/* Links */

a {
  font-style: normal;
  color: var(--color-link);
}

a:hover {
  filter: brightness(150%);
}

/* Lists */

ul {
  list-style-type: none;
  padding-left: 0;
  font-family: serif;
  margin: 0;
}

ul:not(.technos) {
  margin-bottom: var(--spacing-dog);
}

ul.bullets {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-cat);
}

ul.bullets > li {
  position: relative;
  padding-left: var(--spacing-dog);
}

ul.bullets > li::before {
  position: absolute;
  left: 0;
  content: "•";
  color: var(--color-bullet);
  display: inline-block;
}

ul.technos {
  display: inline-flex;
  flex-wrap: wrap;
  padding-left: 0;
  font-family: sans-serif;
  row-gap: var(--spacing-cat);
  column-gap: calc(2 * var(--spacing-mouse));
}

ul.technos > li {
  background-color: var(--color-light-background);
  border-radius: var(--border-radius-bee);
  padding: 0 var(--spacing-cat);
  font-size: var(--font-size-cat);
  line-height: var(--font-size-lion);
}

/* Project footer */

.project-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.project-footer a {
  font-size: var(--font-size-cat);
}