/* colors */
:root {
  --black: #000000;
  --rich-black: #141414;
  --white: #ffffff;
  --gray: #808080;
  --very-dark-gray: #1e1e1e;
  --charcoal-gray: #1c1c1c;
  --dark-gray: #4d4d4d;
  --dark-gray2: #2e2e2f;
  --light-gray: #f2f2f2;
  --light-gray2: #cccccc;
  --silver-gray: #d7d7d7;
  --medium-gray: #999999;
  --pale-yellow: #fee373;
  --bright-green: #80dd59;
  --aqua-blue: #79e1e8;
  --teal-blue: #5bc4c1;
  --deep-blue: #0b0754;
  --royal-blue: #004daa;
  --peach-cream: #f4caae;
  --yellow-green: #dfe279;
  --sky-blue: #33c9ff;
  --vivid-sky-blue: #1d82dd;
  --ocean-blue: #1a76c9;
  --blush-pink: #f9bfc1;
  --vivid-orange: #f7931e;
  --amber: #f68721;
  --vibrant-red: #ec0037;
  --coral-red: #d64000;
  --link-color: var(--aqua-blue);
  --highlight-color: var(--vibrant-red);
  /* --link-hover-color: var(--teal-blue); */
  --link-hover-color: var(--royal-blue);
  --link-hover-color2: var(--vibrant-red);
  --border-color-1: var(--gray);
  --border-color-2: var(--dark-gray);
  --border-color3: var(--vivid-orange);
  --border-color4: var(--silver-gray);
  --border-color5: var(--dark-gray2);
}

.bg-auqua-blue {
  background: var(--aqua-blue);
}

.bg-deep-blue {
  background: var(--deep-blue);
}

.bg-royal-blue {
  background: var(--royal-blue);
}

body {
  background: var(--silver-gray);
}