<main id="main">
  <h1 id="title">Ada Lovelace</h1>
  <figure id="img-div">
    <picture>
      <source media="(max-width: 415px)"
          srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Ada_Lovelace_Chalon_portrait.jpg/240px-Ada_Lovelace_Chalon_portrait.jpg">
      <source media="(max-width: 668px)"
          srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Ada_Lovelace_Chalon_portrait.jpg/480px-Ada_Lovelace_Chalon_portrait.jpg">
      <source media="(max-width: 963px)"
          srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Ada_Lovelace_Chalon_portrait.jpg/768px-Ada_Lovelace_Chalon_portrait.jpg">
      <img id="image"
          src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Ada_Lovelace_Chalon_portrait.jpg"
          alt="">
    </picture>
    <figcaption id="img-caption">Many consider Ada Lovelace to be the world's
      first computer programmer.</figcaption>
  </figure>
  <article id="tribute-info">
    <h2>About Ada Lovelace</h2>
    <p>Ada Lovelace was an English mathematician primarily known for her work on
      Charles Babbage's proposed mechanical computer, the Analytical Machine.
      She was the first to recognize that the machine's applications extended
      far beyond pure calculations and that it could potentially solve problems
      of any complexity. Many people consider Lovelace to be the world's first
      programmer because she was also the first person to write and publish an
      algorithm for it.</p>
    <p>To learn more about Ada Lovelace, read this <a
          href="https://en.wikipedia.org/wiki/Ada_Lovelace" id="tribute-link"
          target="_blank">Wikipedia article</a></p>
  </article>
</main>

@media only screen and (min-width: 963px) {
  #image {
    max-width: 1118px;
  }
}

@media only screen and (max-width: 963px) {
  #image {
    max-width: 768px;
  }
}

@media only screen and (max-width: 668px) {
  #image {
    max-width: 480px;
  }
}

@media only screen and (max-width: 415px) {
  #image {
    max-width: 240px;
  }
}

* {
  box-sizing: border-box;
}

body {
  background: #6f71c6 linear-gradient(to bottom right, #6f71c6, #6f3039) fixed;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  margin: max(2vw, 16px);
}

#main {
  display: grid;
  grid-gap: max(2vw, 16px);
}

#main > * {
  background-color: #000;
  border: 2px solid #fff;
  border-radius: max(1vw, 8px);
  padding: max(1vw, 8px);
}

#title {
  margin: 0;
  text-align: center;
}

#img-div {
  display: inherit;
  grid-gap: max(1vw, 8px);
  text-align: center;
  margin: 0;
}

#image,
#img-caption {
  margin-right: auto;
  margin-left: auto;
  width: 50%;
}

#image {
  border: 2px solid #c0c0c0;
  border-radius: max(1vw, 8px);
  display: block;
}

#tribute-link {
  color: #5b92ff;
}

#tribute-link:hover {
  color: #80aaff;
}

const projectName = 'tribute-page';