/* ###################################################### */
/* LOCAL FONTS */

@font-face {
  font-display: swap;
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  src: local(''),
    /* IE9 Compat Modes */
    url('../fonts/courier-prime-v9-latin-regular.eot');
  src: local(''),
    /* IE6-IE8 */
    url('../fonts/courier-prime-v9-latin-regular.eot?#iefix') format('embedded-opentype'),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('../fonts/courier-prime-v9-latin-regular.woff2') format('woff2'),
    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
    url('../fonts/courier-prime-v9-latin-regular.woff') format('woff'),
    /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
    url('../fonts/courier-prime-v9-latin-regular.ttf') format('truetype'),
    /* Legacy iOS */
    url('../fonts/courier-prime-v9-latin-regular.svg#CourierPrime') format('svg');
}

/* ###################################################### */
/* GLOBAL VARIABLES */

:root {
  /* custom colors: 1=bluedark 2=white 3=bluelight 4=orange */
  --color_1: rgb(20,30,40);
  --color_2: rgb(240,230,210);
  --color_3: rgb(10,80,100);
  --color_4: rgb(230,150,50);
  /* set cassiopeia fonts family */
  --cassiopeia-font-family-body: 'Courier Prime', monospace;
  --cassiopeia-font-family-headings: 'Courier Prime', monospace;
  /* set cassiopeia fonts thickness */
  --cassiopeia-font-weight-headings: 700;
  --cassiopeia-font-weight-normal: 400;
  /* set website fonts family */
  --body-font-family: var(--cassiopeia-font-family-body);
  /* set website fonts size */
  --body-font-size: 1rem;
  /* set website fonts thickness */
  --body-font-weight: 400;
  /* set website fonts distance between lines */
  --body-line-height: 1.5;
  /* set website body fonts color */
  --body-color: var(--color_2);
  /* set website body background color */
  --body-bg: var(--color_1);
}

/* ###################################################### */
/* MAIN SETUP */

body {
  /* set main fonts */
  font-family: var(--cassiopeia-font-family-body);
}

/* ###################################################### */
/* HEADER SETUP */

.header {
  /* set header background color */
  background: var(--color_3);
  /* set header colored border */
  border: 2px solid var(--color_2);
}

.brand-logo span {
  /* set logo fonts color */
  color: var(--color_2);
}
.brand-logo span:hover {
  /* set logo hover color */
  color: var(--color_1);
}

.container-header .site-description {
  /* set site description fonts color */
  color: var(--color_2);
}

/* ###################################################### */
/* MAIN MENU SETUP */

.sidebar-left.card {
  /* set main menu background color */
  background: var(--color_4);
  /* set main menu colored border */
  border: 2px solid var(--color_2);
}

/* set base fonts color of each main menu item */
.nav-item.item-101 a { color: var(--color_2); }
.nav-item.item-102 a { color: var(--color_2); }
.nav-item.item-103 a { color: var(--color_2); }
.nav-item.item-104 a { color: var(--color_2); }
/* set hover fonts color of each main menu item */
.nav-item.item-101 a:hover { color: var(--color_1); }
.nav-item.item-102 a:hover { color: var(--color_1); }
.nav-item.item-103 a:hover { color: var(--color_1); }
.nav-item.item-104 a:hover { color: var(--color_1); }

/* ###################################################### */
/* ARTICLE SETUP */

/* fonts: terminal             */
/* max characters: 60 per line */
/* size: default 16px          */
/* style: preformatted         */

.com-content-article__body span {
  /* set default article fonts size */
  font-size: 14px;
}

.com-content-article__body span img {
  /* set colored border around article images */
  border: 2px solid var(--color_2);
}

/* ###################################################### */
/* MEDIA QUERIES */

/* settings for article body */
/* (ie .com-content-article__body span) */
/* 1st, set article fonts size depending on screen size */

/* settings for extra small devices */
@media screen and (min-width: 0px) and (max-width: 575.98px) {
  .com-content-article__body span {
    font-size: 8px;
  }
}

/* settings for small devices devices */
@media screen and (min-width: 576px) and (max-width: 767.98px) {
  .com-content-article__body span {
    font-size: 14px;
  }
}

/* settings for medium devices devices */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  .com-content-article__body span {
    font-size: 14px;
  }
}

/* settings for large devices */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
  .com-content-article__body span {
    font-size: 14px;
  }
}

/* settings for extra large devices */
@media screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .com-content-article__body span {
    font-size: 14px;
  }
}

/* settings for extra extra large devices */
@media screen and (min-width: 1400px) {
  .com-content-article__body span {
    font-size: 14px;
  }
}

/* ###################################################### */