/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --codepath-blue: #4653FF;
  --codepath-navy: #1B1C57;
  --codepath-green: #00C98E;
  --codepath-pink: #FFEEFF;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/Poppins-Regular-52c67f6e.woff") format('woff');
  font-weight: 400;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/Poppins-Light-cf4e6327.ttf") format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/Poppins-SemiBold-8f59aac1.ttf") format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/Poppins-Bold-72adf1e6.ttf") format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Neue-Machina";
  src: url("/assets/PPNeueMachina-Regular-0e24d25d.woff") format('woff');
}
@font-face {
  font-family: "Neue-Machina-Bold";
  src: url("/assets/PPNeueMachina-Ultrabold-ea7f61ee.woff") format('woff');
}
@font-face {
  font-family: "Space-Mono";
  src: url("/assets/SpaceMono-Regular-4e5d1b43.woff") format('woff');
}
@font-face {
  font-family: "Space-Mono-Bold";
  src: url("/assets/SpaceMono-Bold-94973ffd.woff") format('woff');
}
@font-face {
  font-family: "Libre-Caslon-Display";
  src: url("/assets/LibreCaslonDisplay-Regular-3fcce7ab.ttf") format('truetype');
}

body {
  font-family: Poppins !important;
}

/*a {
  color: var(--codepath-blue);
  text-decoration: underline;
}*/

.font-lcd {
  font-family: Libre-Caslon-Display, serif;
}

.h1, .h2, .h3 {
  font-family: Neue-Machina, Space-Mono;
  color: var(--codepath-navy);
}

h1, h2, h3, h4, h5 {
  font-family: Poppins, sans-serif;
  font-weight: bold;
  color: var(--codepath-navy);
}

.bg-cp-blue {
  background-color: var(--codepath-blue);
}

.text-cp-blue {
  color: var(--codepath-blue);
}

.border-cp-blue {
  border: 1px solid var(--codepath-blue);
}

.text-cp-green {
  color: var(--codepath-green);
}

.bg-cp-green {
  background-color: var(--codepath-green);
}

.bg-navy {
  background-color: var(--codepath-navy);
}

.text-navy {
  color: var(--codepath-navy);
}

.hover-bg-navy:hover {
  background-color: var(--codepath-navy);
}

.text-navy {
  color: var(--codepath-navy);
}

.bg-cp-pink {
  background-color: var(--codepath-pink);
}

.lead {
  font-family: Poppins, sans-serif;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 2rem;
  font-style: normal;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.font-bold {
  font-family: Poppins;
  font-weight: 600;
}

.bg-mint {
  background-color: #CBFEE8;
}