:root {
  --primary-bg-color: #fff;
  --secondary-bg-color: #eee;
  --highlight-color: purple;

  --header-font: 'Arial', sans-serif;
  --paragraph-font: 'Georgia', serif;

  --btn-primary-color: #007bff; /* Primary button color */
}

body {
  background-color: var(--secondary-bg-color) !important;
  font-family: var(--paragraph-font);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--header-font);
}

.app-bg-primary {
  background-color: var(--primary-bg-color);
}

.app-bg-secondary {
  background-color: var(--secondary-bg-color);
}

.btn-primary {
  background-color: var(--btn-primary-color);
  border-color: var(--btn-primary-color);
}

.btn-primary:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}


@font-face {
  font-family: LeagueGothic;
  src: url(./fonts/league-gothic.regular.ttf);
}

h1, h2, h3, h4 {
  font-family: LeagueGothic, sans-serif;

}
h5, h6, p, form{
  font-family: Arial, Helvetica, sans-serif;
}

.megafont { 
  font-size: 11vw;
}
@media screen and (max-width: 768px) {
  .megafont {
     font-size: 80px;
  }
}

@media screen and (min-width: 1920px) {
  .megafont {
     font-size: 120px;
  }
}
/* bgs */
.bg-onyx {
  background-color: #373d43;
}
.bg-charleston {
  background-color: #25292d;
}
.bg-orange {
  background-color: #dda448;
}
.bg-teal {
  background-color: #488286;
}
.bg-grey {
  background-color: #cccccc;
}

/* fonts */
.onyx {
  color: #373d43;
}


.charleston {
  color: #25292d;
}
a.charleston {
  transition: 0.3s;
}

a.charleston:hover {
  color: #dda448 !important; 

}
.border-charleston {
  border-color: #25292d !important;
}


.orange {
  color: #dda448 !important;
}
.border-orange {
  border-color: #dda448 !important;

}
a.orange {
  transition: 0.3s;

}

a.orange:hover{
color: #cccccc !important; 

}

.teal {
  color: #488286;
}
.border-teal {
  border-color: #488286 !important ;
}


.grey {
  color: #cccccc !important;
}
a.grey {
  transition: 0.3s;
  text-decoration: none !important;

}
a.grey:hover, a.grey:active{
color: #dda448 !important; 
text-decoration: none !important;
}









/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/