/* FONT */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Caveat+Brush:wght@100;200;300;400;500;600;700;800;900&display=swap");

/* @import url("https://fonts.googleapis.com/css2?family=__FONT__NAME__:wght@100;200;300;400;500;600;700;800;900&display=swap"); */
/* --- */
/* COLOURS */
:root {
  --primary: rgb(212, 41, 41);
  --primary-d: rgb(169, 31, 31);
  --primary-l: rgb(239, 45, 45);
  
  --secondary: #ff0285;
  --secondary-d: #e64545;
  --secondary-l: #ffa5a5;
  
  --tertiary: #51cf66;
  --tertiary-d: #42ad53;
  --tertiary-l: #6be981;
  
  --accent: #ffcc29;
  --accent-d: #f3b10d;
  --accent-l: #ffd755;
  
  --white: #ffffff;
  --offwhite: #f5f5f5;
  --black: #000000;
  --darkgray: #333333;
  --gray: #666666;
}  

/* TEXT */
p,
ul,
li {
  font-size: 1.05rem;
  line-height: 2rem;
  margin: 1rem 0;
  font-family: Poppins;
  list-style-type: none;
}

a {
  text-decoration: none !important;
  font-family: Roboto Mono !important;
}
.caption {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 1px;
  font-family: Roboto Mono;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.title,
.subtitle,
.heading,
.subheading {
  margin-bottom: 0.1rem;
  /* font-family: Righteous; */
  text-transform: uppercase;
  font-family: Roboto Mono;
  font-weight: 600;
}
.title {
  font-size: 4rem;
  /* letter-spacing: 2px; */
  font-family: Roboto Mono;
  text-transform: uppercase !important;
  line-height: 4rem;
  font-weight: 300;
}
.subtitle {
  font-size: 2.2rem;
}
.heading {
  font-size: 1.7rem;
}
.subheading {
  font-size: 1.5rem;
}
/* --- */
/* BUTTONS */
.btn {
  border: solid 2px transparent;
  outline: none;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: auto 0.2rem; 
  font-family: Roboto Mono !important;
  color: white;
  transition: 0.2s ease-in-out;
}
.primary-btn {
  background-color: var(--primary);
  color: var(--white);
}
.primary-btn:hover {
  transition: 0.2s ease-in-out;
  background-color: var(--primary-l);
}
.secondary-btn {
  background-color: var(--secondary);
  color: var(--white);
}
.secondary-btn:hover {
  background-color: var(--secondary-l);
  transition: 0.2s ease-in-out;
}
.tertiary-btn {
  background-color: var(--tertiary);
  color: var(--white);
}

.tertiary-btn:hover {
  background-color: var(--tertiary-l);
  transition: 0.2s ease-in-out;
}

.accent-btn {
  background-color: var(--accent);
  color: var(--white);
}
.darkgray-btn {
  background-color: var(--darkgray);
  color: var(--white);
}

.darkgray-btn:hover {
  background-color: var(--gray);
  transition: 0.2s ease-in-out;
}
.accent-btn:hover {
  background-color: var(--accent-l);
  transition: 0.2s ease-in-out;
}
.switch-btn {
  background-color: var(--primary);
  color: var(--white);
}
.switch-btn:hover {
  background-color: var(--primary);
  color: var(--white);
  transition: 0.4s ease-in-out;
  box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.233);
  border-left: 14px solid var(--white);
}
.line-btn {
  border: solid 2px white;
  background-color: transparent;
  color: var(--white);
}
.line-btn:hover {
  background-color: var(--white);
  color: var(--darkgray);
}