/* =========================================
  CSS class naming: https://suitcss.github.io/ 
========================================= */

@import url('reset.css');
@import url('expose.css'); /* https://www.fontshare.com/ */
@import url('supreme.css'); /* https://www.fontshare.com/ */

:root {
  --padding: 0.5em;
  --contentWidth: 600px;
  --borderWidth: 4px;
}

html {
   font-size: 20px;
}

h1,h2,h3,h4,h5,h6 {
  font-family: Expose-Medium;
}

p, blockquote, ul, ol, li {
  font-family: "Supreme-Regular", serif;
}

a {
  color: inherit;
}

a:hover {
  color: red;
}

/* =========================================
   Page (global component)
========================================= */

.Page-content {
   max-width: var(--contentWidth);
   margin: 0 auto;
   padding: var(--padding);
}

.Page-section:not(:last-child) {
    padding-bottom: 20px;
    border-bottom: var(--borderWidth) solid red;
}

.Page-sectionTitle {
  font-size: 1.8rem;
}


/* =========================================
   Nav component (stacked full-width)
========================================= */

.Nav {
  display: flex;
  flex-wrap: wrap;
}

.Nav-logo {
  flex-basis: 100%;
  min-width: 400px;
  padding-bottom: 20px;
}

@media (min-width: 600px) {
  .Nav-logo {
    flex-basis: 40%;
    padding-right: 40px;
    padding-bottom: 0px;
  }
}

.Nav-logoImage {
  display: block;
}

.Nav-list {
  flex: 1 1 600px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  border-bottom: var(--borderWidth) solid red;
}

.Nav-item {
  flex: 0 0 auto;
  padding: 0 var(--padding);
  font-family: Expose-Bold;
  font-size: 1.4rem;
  text-transform: uppercase;
}

.Nav-link {
  display: inline-flex;
  align-items: center;
  color: black;
  text-decoration: none;
}

.Nav-link:hover {
  text-decoration: underline;
}



/* =========================================
   Footer component
========================================= */

.Footer {
  margin-top: 40px;
  padding: var(--padding);
  color: white;
  background-color: black;
}

.Footer-section {
   max-width: var(--contentWidth);
   margin: 0 auto;
 }

 .Footer-contentTitle {
  display: inline-block;
  width: auto;
  margin-bottom: 0;
  border-bottom: var(--borderWidth) solid red;
 }