<header id="header">
  <section id="logo-and-nav">
    <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
        alt="Original Trombones" id="header-img">
    <nav id="nav-bar">
      <a href="#features" class="nav-link">Features</a>
      <a href="#how-it-works" class="nav-link">How It Works</a>
      <a href="#contact" class="nav-link">Contact</a>
    </nav>
  </section>
  <section id="title-and-subtitle">
    <h1>Original Trombones</h1>
    <p>Handcrafted, home-made masterpieces</p>
  </section>
</header>
<main>
  <section id="features">
    <h2>Features</h2>
    <dl>
      <dt>Premium Materials</dt>
      <dd>Our trombones use the shiniest brass which is sourced locally. This
        will increase the longevity of your purchase.</dd>
      <dt> Fast Shipping</dt>
      <dd>We make sure you recieve your trombone as soon as we have finished
        making it. We also provide free returns if you are not satisfied.</dd>
      <dt> Quality Assurance</dt>
      <dd>For every purchase you make, we will ensure there are no damages or
        faults and we will check and test the pitch of your instrument.</dd>
    </dl>
  </section>
  <section id="how-it-works">
    <h2>How it Works</h2>
    <iframe id="video" height="315"
        src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0"
        frameborder="0" allowfullscreen></iframe>
  </section>
  <section id="contact">
    <h2>Get In Touch</h2>
    <form action="https://www.freecodecamp.com/email-submit" id="form">
      <input type="email" id="email" name="email" placeholder="Email address"
          required>
      <input type="submit" id="submit" value="Request Info">
    </form>
  </section>
</main>

* {
  box-sizing: border-box;
}

body {
  background-color: #808080;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

#header {
  background: #927c00 radial-gradient(#ffd700, #927c00) fixed;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#logo-and-nav {
  align-items: center;
  background-color: #000;
  display: grid;
  flex-grow: 0;
  grid-gap: max(4vw, 32px);
  grid-template-columns: minmax(214px, 33%) 1fr;
  padding: max(1vw, 8px);
  position: fixed;
  width: 100%;
}

#header-img {
  filter: invert(100%);
  width: 100%;
}

#nav-bar {
  display: flex;
  flex-wrap: wrap;
  gap: max(1vw, 8px);
  justify-content: flex-end;
  text-align: right;
}

#nav-bar > a {
  color: #fff;
}

#nav-bar > a:hover {
  color: #c8c8c8;
}

#title-and-subtitle {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  font-size: 32px;
  justify-content: center;
}

#title-and-subtitle > * {
  margin: 0;
}

@media only screen and (min-width: 576px) {
  main {
    grid-template-areas:
      "features how-it-works"
      "contact contact";
    grid-template-columns: 1fr min-content;
  }

  #features {
    grid-area: features;
  }

  #how-it-works {
    grid-area: how-it-works;
  }

  #contact {
    grid-area: contact;
  }
}

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

main > section {
  background-color: #fff;
  border: 3px solid #927c00;
  border-radius: max(1vw, 8px);
  padding: max(1vw, 8px);
}

dt {
  font-size: 1.17em;
  font-weight: bold;
}

dd {
  margin-left: 0;
}

dd:not(:last-child) {
  margin-bottom: 1em;
}

#email,
#submit {
  font-size: 1em;
  padding: .5em;
}

#email {
  border: 1px solid #4a3f00;
}

#submit {
  background-color: #3d7f00;
  border-style: none;
  color: #f2ffe5;
}

#submit:hover {
  background-color: #336a00;
}

'use strict';

/**
 * This function adjusts the top margin of a non-fixed element in a container
 * with a fixed one above it so that the fixed element doesn't possibly overlap
 * with it.
 * @param {htmlElement} fixedElement
 * @param {htmlElement} notFixedElement
 */
const adjustNotFixedElement = (fixedElement, notFixedElement) => {
  notFixedElement.style.marginTop = fixedElement.offsetHeight + 'px';
};

/**
 * Modifies the CSS of a given element so that it's an
 * [obround](https://www.wordnik.com/words/obround). The function does so by
 * setting the `border-radius`, `padding-right`, and `padding-left` properties
 * to half of the element's height.
 * @param {HTMLElement} htmlElement - HTML element to change
 */
const makeElementObround = (htmlElement) => {
  /*
   * Even though the `halfHeight` variable never gets reassigned, its name
   * doesn't use constant case because its value depends on that of
   * `htmlElement`. Thus, it's not truly "constant."
   */
  const halfHeight = ~~(.5 * htmlElement.offsetHeight) + 'px';

  htmlElement.style.borderRadius = halfHeight;
  htmlElement.style.paddingRight = halfHeight;
  htmlElement.style.paddingLeft = halfHeight;
};

const projectName = 'product-landing-page';

const logoAndNav = document.getElementById('logo-and-nav');
const titleAndSubtitle = document.getElementById('title-and-subtitle');

adjustNotFixedElement(logoAndNav, titleAndSubtitle);

window.addEventListener('resize', () =>
  adjustNotFixedElement(logoAndNav, titleAndSubtitle));

makeElementObround(document.getElementById('email'));
makeElementObround(document.getElementById('submit'));