:root {
      --t-sans: "proxima-nova",
      sans-serif;
      --t-serif: "ff-tisa-web-pro",
      serif;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  font-size: 16px;
  --c-text: #242424;
  --c-text-body: rgba(0, 0, 0, 0.8);
  --c-accent: #FF004C;
}

.page-title {
  text-decoration: none;
}


/**
 * General
 */

 html {
   overflow-x: hidden;
 }
body {
  /* background: #eee; */
  font-family: var(--t-sans);
  font-weight: 400;
  font-style: normal;
  overflow-x: hidden;
  /* padding-top: 1rem; */
}
header {
  padding: 1.5rem;
  margin-top: 1rem;
}

header section + section {
  margin-top: 1rem;
}

header h1 {
  text-transform: uppercase;
  font-size: 2rem;
  line-height: 0.85;
  margin-bottom: 0;
}

header h3 {
  font-weight: normal;
}
header p {
  line-height: 1.4;
}

header h1 + h3 {
  margin-top: 0.125rem;
  margin-bottom: 2rem;
}

header a {
  color: currentColor;
}

header h3 + p {
  margin-top: 1rem;
}
header p + p {
  margin-top: 1rem;
}

.hide-mobile {
  display: none; 
}

@media (min-width: 1440px) {
  .hide-mobile { display: block}
  header {
    margin-top: 0;
    padding: 0;
  }
  nav {
        grid-gap: 1rem 4rem;
        margin-bottom: 2rem;
  }
}

.hide-desktop {
  display: block;
}
@media (min-width: 1440px) {
  .hide-desktop {
    display: none !important;
  }
}

@media (min-width: 800px) {
  nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem 4rem;
  }
  header {
    padding: 0;
    margin-bottom: 4rem;
  }
      body {
        padding-top: 0;
      }
        header section+section {
          margin-top: 0;
        }
}


@media (min-width: 1440px) {
  body {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 4rem;
  }

  nav {
    display: grid;
    grid-template-columns: 1fr ;
  }
  


}

@media (min-width: 2000px) {
    nav {
      display: grid;
      grid-template-columns: 1fr 1fr;
      margin-bottom: 4rem;
    }
}

footer h2  {
  margin-bottom: 1rem;
}

.font-tools-trigger {
  position: fixed;
  width: 72px;
  height: 72px;
  border-radius: 72px;
  bottom: 24px;
  right: 24px;
  background: white;
  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.2);
}
.font-tools {
  display: none;
  position: fixed;
  flex-direction: column;
  bottom: 24px;
  width: calc(100% - 48px);
  padding: 1.5rem;
  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.2);
  left: 24px;
  background: white;
  border-radius: 8px;
}
.font-tools.visible {
  display: flex;
}

fieldset {
  border: none;
}
fieldset label {
  display: flex;
  justify-content: space-between;
}

fieldset+fieldset{
  margin-top: 1rem;
}
.font-tools button {
  padding: 0.25rem 1rem;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 15px;
  margin: 0;
  border-radius: 4px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12);
}