mystyles.scss

/*-- scss:defaults --*/

// Fonts
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

// Colors
$black: #262406;
$white: #ffffff;
$primary: #042940;
$secondary: #005C53;
$accent1: #DBF227;
$accent2: #DB8655;
$accent3: #62771B;

// Base document colors
$navbar-bg: $primary; // navbar
$sidebar-bg: $accent3; // sidebar
$navbar-fg: $accent2; // navbar foreground elements
$navbar-hl: $accent1; // highlight color when hovering over navbar links
$body-bg: $white; // page background 
$body-color: $black; // page text 
$footer-bg: $secondary; // footer 
$footer-fg: $accent1; // footer 
$link-color: $secondary; // hyperlinks 

/*-- scss:rules --*/

// CSS rules

h1 {
  font-family: Raleway;
  font-size: 2.5rem;
  font-weight: 600;
  color: $accent2;
  text-transform: uppercase;
}

h2 {
  color: $secondary;
  font-family: Raleway;
  font-size: 2.0rem;
  font-weight: 600;
}

h3 {
  color: $secondary;
  font-family: Raleway;
  font-size: 1.5rem;
  font-weight: 500;
}

.sidebar-title {
  color: $primary;
  font-family: Raleway;
  font-weight: 600;
}