:root {
  --codepath-blue: #4653FF;
  --codepath-navy: #1B1C57;
  --codepath-green: #00C98E;
  --codepath-pink: #FFEEFF;
  /* CRL LEVEL COLORS */
  --crl_level_0: #68B682;
  --crl_level_1: #8F46EA;
  --crl_level_2: #E29D8A;
  --crl_level_3: #D44F79;
  --crl_level_4: #4551EE;
  --crl_level_5: #8F46EA;
  --crl_level_6: #68B682;
  --crl_level_0_rgb: 104, 182, 130;
  --crl_level_1_rgb: 143, 70, 234;
  --crl_level_2_rgb: 226, 157, 138;
  --crl_level_3_rgb: 212, 79, 121;
  --crl_level_4_rgb: 69, 81, 238;
  --crl_level_5_rgb: 143, 70, 234;
  --crl_level_6_rgb: 104, 182, 130;
  /* CRL LEVEL BG COLORS */
  --crl_level_0_faded: #E5FDF0;
  --crl_level_1_faded: #FAEFFD;
  --crl_level_2_faded: #FAEEF0;
  --crl_level_3_faded: #FAEFFD;
  --crl_level_4_faded: #EBF6FE;
  --crl_level_5_faded: #FAEFFD;
  --crl_level_6_faded: #E5FDF0;
}

@font-face {
  font-family: "Poppins";
  src: url(/assets/Poppins-Regular-be07515bfe286cae1f4fe8fdbf541184a3fa226ddf4c13a08856161e0c6907d2.woff) format('woff');
  font-weight: 400;
}
@font-face {
  font-family: "Poppins";
  src: url(/assets/Poppins-Light-4ce037c9246e2b381ddef69f59e4b33a75dc325d70fde111f085798e282df4c6.ttf) format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Poppins";
  src: url(/assets/Poppins-SemiBold-a27799af8da2e1b65bc12769eb5f8da47b0689e24f5cf655a4fb58db80bd90b7.ttf) format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Poppins";
  src: url(/assets/Poppins-Bold-542ca15de37ab3bcf41f3ee5fdb9a8a4ba3346a27998196101a9a01a0f4ce0d8.ttf) format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Neue-Machina";
  src: url(/assets/PPNeueMachina-Regular-84a061d8c9a788c137008c5970fcc2ce04f994301067ca79281aa992ddcc799d.woff) format('woff');
}
@font-face {
  font-family: "Neue-Machina-Bold";
  src: url(/assets/PPNeueMachina-Ultrabold-982913c01a41ff5f78e9b80c748d84f4fa2f1427d758cc0ee08dc2135c1bc3eb.woff) format('woff');
}
@font-face {
  font-family: "Space-Mono";
  src: url(/assets/SpaceMono-Regular-c33561374d0b52ee92dab692e647faca9398234e7488b9c53219a0996e5bc286.woff) format('woff');
}
@font-face {
  font-family: "Space-Mono-Bold";
  src: url(/assets/SpaceMono-Bold-94567bc34ba70958f3df701e1a6c172261cbc848fbae7238282ea930fbd02577.woff) format('woff');
}
@font-face {
  font-family: "Libre-Caslon-Display";
  src: url(/assets/LibreCaslonDisplay-Regular-d6d7b59f14dffebf4eb947a714da93f08705fb6c8a5a4a901a88657b60eba181.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-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;
}


.relative {
  position: relative; /* Allows the .sunrise-bleed to use this as a reference for absolute positioning */
}

/* #87458c, #af486d */
.sunrise-bleed {
  background: linear-gradient(to right, #696FA2 10%, #C44069 50%, #F7B89E 60%);
  z-index: -1;
}

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

/* CRL COLORS */
.text-level-0 {
  color: var(--crl_level_0);
}
.text-level-1 {
  color: var(--crl_level_1);
}
.text-level-2 {
  color: var(--crl_level_2);
}
.text-level-3 {
  color: var(--crl_level_3);
}
.text-level-4 {
  color: var(--crl_level_4);
}
.text-level-5 {
  color: var(--crl_level_5);
}
.text-level-6 {
  color: var(--crl_level_6);
}

.bg-level-0 {
  background-color: var(--crl_level_0);
}
.bg-level-1 {
  background-color: var(--crl_level_1);
}
.bg-level-2 {
  background-color: var(--crl_level_2);
}
.bg-level-3 {
  background-color: var(--crl_level_3);
}
.bg-level-4 {
  background-color: var(--crl_level_4);
}
.bg-level-5 {
  background-color: var(--crl_level_5);
}
.bg-level-6 {
  background-color: var(--crl_level_6);
}

.bg-level-0-faded {
  background-color: var(--crl_level_0_faded);
}
.bg-level-1-faded {
  background-color: var(--crl_level_1_faded);
}
.bg-level-2-faded {
  background-color: var(--crl_level_2_faded);
}
.bg-level-3-faded {
  background-color: var(--crl_level_3_faded);
}
.bg-level-4-faded {
  background-color: var(--crl_level_4_faded);
}
.bg-level-5-faded {
  background-color: var(--crl_level_5_faded);
}
.bg-level-6-faded {
  background-color: var(--crl_level_6_faded);
}

.bg-level-0-hover:hover {
  background-color: rgba(var(--crl_level_0_rgb), 0.1);
}
.bg-level-1-hover:hover {
  background-color: rgba(var(--crl_level_1_rgb), 0.1);
}
.bg-level-2-hover:hover {
  background-color: rgba(var(--crl_level_2_rgb), 0.1);
}
.bg-level-3-hover:hover {
  background-color: rgba(var(--crl_level_3_rgb), 0.1);
}
.bg-level-4-hover:hover {
  background-color: rgba(var(--crl_level_4_rgb), 0.1);
}
.bg-level-5-hover:hover {
  background-color: rgba(var(--crl_level_5_rgb), 0.1);
}
.bg-level-6-hover:hover {
  background-color: rgba(var(--crl_level_6_rgb), 0.1);
}

.bg-level-0-semi-faded {
  background-color: rgba(var(--crl_level_0_rgb), 0.3);
}
.bg-level-1-semi-faded {
  background-color: rgba(var(--crl_level_1_rgb), 0.3);
}
.bg-level-2-semi-faded {
  background-color: rgba(var(--crl_level_2_rgb), 0.3);
}
.bg-level-3-semi-faded {
  background-color: rgba(var(--crl_level_3_rgb), 0.3);
}
.bg-level-4-semi-faded {
  background-color: rgba(var(--crl_level_4_rgb), 0.3);
}
.bg-level-5-semi-faded {
  background-color: rgba(var(--crl_level_5_rgb), 0.3);
}
.bg-level-6-semi-faded {
  background-color: rgba(var(--crl_level_6_rgb), 0.3);
}

.top-border-level-0-semi-faded {
  border-top-color: rgba(var(--crl_level_0_rgb), 0.3);
}
.top-border-level-1-semi-faded {
  border-top-color: rgba(var(--crl_level_1_rgb), 0.3);
}
.top-border-level-2-semi-faded {
  border-top-color: rgba(var(--crl_level_2_rgb), 0.3);
}
.top-border-level-3-semi-faded {
  border-top-color: rgba(var(--crl_level_3_rgb), 0.3);
}
.top-border-level-4-semi-faded {
  border-top-color: rgba(var(--crl_level_4_rgb), 0.3);
}
.top-border-level-5-semi-faded {
  border-top-color: rgba(var(--crl_level_5_rgb), 0.3);
}
.top-border-level-6-semi-faded {
  border-top-color: rgba(var(--crl_level_6_rgb), 0.3);
}

.bg-gradient-level-0-1 {
  background: linear-gradient(to right bottom, var(--crl_level_0), var(--crl_level_1));
}

.bg-gradient-level-1-2 {
  background: linear-gradient(to right bottom, var(--crl_level_1), var(--crl_level_2));
}

.bg-gradient-level-2-3 {
  background: linear-gradient(to right bottom, var(--crl_level_2), var(--crl_level_3));
}

.bg-gradient-level-3-4 {
  background: linear-gradient(to right bottom, var(--crl_level_3), var(--crl_level_4));
}

.bg-gradient-level-4-5 {
  background: linear-gradient(to right bottom, var(--crl_level_4), var(--crl_level_5));
}

.bg-gradient-level-5-6 {
  background: linear-gradient(to right bottom, var(--crl_level_5), var(--crl_level_6));
}

.bg-lab-complete {
  background-color: #F2FEF2;
}

.animate-spin {
  animation: spin 1s linear infinite;
}