/* A set of default style */
:root {
  /* Generic sizing for the page */
  --wrapper-height: 100vh;
  --avatar-max-width: 15rem;

  /* Fonts for different elements */
  --font-family: sans-serif;
  --font-family-header: sans-serif;
  --font-family-list: monospace;

  /* Colors you'll see cascade through the elements */
  --color-bg: lightgreen; /* Used for the page body background */
  --color-bg-alt: yellow; /* Used for social icons on hover */
  --color-text-main: #000000; /* List text ann social icons on hover */
  --color-primary: teal; /* Headers and borders */
}

/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

/* Page structure */
body {
  font-family: var(--font-family);
  text-align: center;
  font-size: large;
  background-image: linear-gradient(var(--color-bg-alt), var(--color-bg));
}
.wrapper {
  min-height: var(--wrapper-height);
  place-items: center;
  margin: 1rem 1rem 0;
}
.content {
  display: flex;
  flex-direction: column;
  max-width: 550px;
  margin: 0 auto;
}

/* Typography */
p {
  line-height: 1.5 !important;
}
h1,
h2,
h3,
h4,
h5 {
  color: var(--color-text-main);
}
h1 {
  display: inline-flex;
  color: var(--color-primary);
  justify-content: center;
  font-size: 2.5rem;
}

/* Link styles */
a:link,
a:visited {
  text-decoration: none;
  border-bottom: 2px solid var(--color-primary);
  color: var(--color-primary);
  transition: background 0.2s linear;
  font-weight: 500;
}
a:hover,
a:active,
a:focus {
  background: var(--color-primary);
  color:var(--color-bg-alt);
}
a.remix:hover {
  background: var(--color-primary);
  color:var(--color-bg-alt);
  border-color: var(--color-primary);
}
.img-container {
  display: flex;
  justify-content: flex-end;
}
.illustration {
  max-height: var(--avatar-max-width);
  margin:auto;
  border: 3px solid var(--color-bg-alt);
}
/* Navigation grid */
.footer {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
}
a.remix {
  background-color: white;
  border: 2px solid var(--color-primary);
  border-radius: 5px;
  padding: 0.5rem;
  font-weight: bold;
}
.instructions {
    padding:0.5rem 0 1rem 0;
}