/*
Common Styling
*/
:root {
  --primary-blue: #0069ca;
  --secondary-seafoam: #80d2c8;
  --gray: #657788;
  --primary-dark: #172a3a; /*Dark Blue*/
  --primary-dark-2: #2e5987; /* Dark Blue level 2*/
  --background: #d7fdff; /*Light Light Blue*/
  --accent-orange: #f2594b;
  --black: #171717; /*Black*/
  --white: #ffffff; /*White*/
  --neutral: #8c8c8c; /*Gray*/
  --nav-height: 70px;
  --font-family: 'HK Grotesk', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

@media (max-width: 600px) {
  :root {
    --nav-height: 50px;
  }
}

@font-face {
  font-family: 'HK Grotesk';
  src: local('HK Grotesk'), local('HKGrotesk-Regular'),
    url('/fonts/hkgrotesk-regular.woff2') format('woff2'),
    url('/fonts/hkgrotesk-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'HK Grotesk';
  src: local('HK Grotesk'), local('HKGrotesk-Bold'),
    url('/fonts/hkgrotesk-bold.woff2') format('woff2'),
    url('/fonts/hkgrotesk-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

h1,
h2,
h3 {
  font-weight: bold !important;
}

h2 {
  font-size: 38px !important;
  margin-bottom: 32px !important;
}

h3 {
  margin-bottom: 10px;
}

body {
  font-family: var(--font-family) !important;
  letter-spacing: 0.3px;
  line-height: 1.5;
  background: #445261;
}

button {
  font-family: inherit;
  font-size: inherit;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.container {
  max-width: 1000px !important;
}

.text-center {
  text-align: center;
  margin: 0 auto;
}
.center {
  text-align: center;
  margin: auto;
}

section {
  padding: 90px 0;
  display: inline-block;
}

/**
* Bootstrap was overriding the margins for the row to be -15px on each side,
* causing some elements to be pushed to the very edge of the page.
**/
.row {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.section-title {
  font-size: 30px;
  margin-bottom: 25px;
  font-weight: bold;
}

.class-title {
  font-size: 24px;
  margin-bottom: 25px;
  font-weight: bold;
}

.text-title {
  font-size: 25px;
  margin-bottom: 25px;
  font-weight: bold;
}
.project-detail-title {
  font-size: 30px;
  margin-bottom: 25px;
}

.shadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.light-shadow {
  box-shadow: 0 5px 30px rgba(44, 62, 80, 0.1);
}

.white-text {
  color: white;
}

a {
  text-decoration: none !important;
}

h2 {
  font-weight: 400;
}

.gray-subsection {
  padding-top: 50px;
  background-color: #ebeff2;
}

.margin-lg-top {
  margin-top: 9%;
}

.margin-sm-all {
  margin: 2%;
}

.link-wrap {
  /* Technically the same, but use both for cross-browser compatibility */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.styled-btn {
  border-image: initial;
  overflow: hidden;
  transition: all 0.15s ease 0s;
  height: 2.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  padding: 0px 2rem;
  border: none;
  color: white;
}
.styled-btn {
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
}
.white-button {
  background: white;
}
.white-button {
  color: black !important;
}
.action-button {
  background: #155da1;
}

.action-button {
  color: white !important;
}

.styled-btn:hover {
  box-shadow: rgba(0, 0, 0, 0.12) 3px 5px 20px;
  transition: border 0.2s, background 0.2s, color 0.2s ease-out;
}

/*
  Blockquotes
*/
.blockquote-fancy {
  line-height: 1.5em;
  padding-top: 7%;
}

.blockquote-fancy:before {
  position: absolute;
  content: '\201C';
  font-size: 40pt;
  font-family: Georgia, serif;
  color: #7a7a7a;
  margin: 1% 0 0 -7%;
}

.blockquote-fancy-cite {
  font-style: italic;
  color: #808080;
  margin-bottom: 0;
}

.blockquote-fancy-title {
  font-style: italic;
  font-size: 12.5px;
  white-space: nowrap;
  margin-bottom: 7%;
}

.blockquote-footer {
  color: #555;
}

.explanation {
  background: #f8f9fa;
  border-left: 4px solid var(--primary-blue);
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 4px;
  text-align: left;
}

.explanation p {
  margin: 0;
  line-height: 1.6;
  color: #495057;
}

@media (max-width: 900px) {
  .blockquote-fancy-title {
    white-space: initial;
  }
}

@media (max-width: 990px) {
  .gradient-banner-section,
  .project-page-banner {
    margin-top: 61px;
  }
}