/* ------------------------------ GENERAL PAGE STYLING ------------------------------ */

section {
  border-top: 3px solid black;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

p {
  padding: 0;
}
h1, h2, h3, h4 {
  margin-bottom: 1rem;
}

h1 {
  font-size: 2.5rem;
}

/* ------------------------------ BRANDING ELEMENTS ------------------------------ */

/* Ask about putting this in the middle of div */
.brand-label {
  /* text-align: center; */
}

.righteous-p {
  font-family: Righteous, sans-serif;
  font-size: 2rem;
}

.raleway-p {
  font-size: 2rem;
}

.color-box {
  max-width: 100%;
  height: 4rem;
  margin-bottom: 0.5rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
}

.matte-black {
  background-color: #1E1E20;
}

.gloss-white {
  background-color: #FFFFFF;
}

.brick-red {
  background-color: #962715;
}

.sunflower-yellow {
  background-color: #E5C41F;
}

.grey92 {
  background-color: #EBEBEB;
}

/* ------------------------------ TEXT ELEMENTS ------------------------------ */

.p-regular {
  font-size: 2rem;
}

.p-bold {
  font-size:2rem;
  font-weight: 700;
}

/* ------------------------------ INTERACTIVE ELEMENTS ------------------------------ */

.button {
  margin: 2rem 60% 0 0;
}

.style-guide-header {
  position: relative;
  z-index: 99;
}

.image-link {
  max-width: 100%;
}


/* ------------------------------ CODE ELEMENTS ------------------------------ */

code {
  display: block;
  background-color: #EEE;
  font-size: 1rem;

  margin-bottom: 1rem;
  margin-right: 0.5em;
}