:root {
  --main-bg-color: #0F181C;/*Dark Dark Blue*/
  --main-accent: #785943;/* Orangeish*/
  --main-body-color: #D6DCE2;/*Light Light BLue*/
  --main-body-font: #4B4745;/*Light Brown*/
  --main-accent-font: #7B93A3;/*Teal*/
}

.bg-color {color: var(--main-bg-color);}
.ac-color {color: var(--main-accent);}
.bc-color {color: var(--main-body-color);}
.bf-color {color: var(--main-body-font);}
.af-color {color: var(--main-accent-font);}
.bg-back {background-color: var(--main-bg-color);}
.ac-back {background-color: var(--main-accent);}
.bc-back {background-color: var(--main-body-color);}
.bf-back {background-color: var(--main-body-font);}
.af-back {background-color: var(--main-accent-font);}
.font {font-family: 'Anton', sans-serif;}
.center {text-align: center;}
.left {text-align: left;}
.txt-shadow {text-shadow: .1rem .11rem black}
.wht-glow {background-image: radial-gradient(circle, white, var(--main-bg-color) 75%);}



body {
  background-color: var(--main-bg-color);
}

main {
  background-color: var(--main-body-color);
  color: var(--main-body-font);
  padding: 0vw;
}

nav {
  background-color: var(--main-accent);
  color: var(--main-accent-font);
  padding: 0vw;
}

nav .btn-block {color: white;}

nav .btn, nav button:hover,{
  background-color: var(--main-accent);
  border-color: var(--main-accent);
  color: var(--main-bg-color);
}

header {
  padding: 0vw;
}

/* PARAGRAPH SECTION */

p {
  color: var(--main-body-font);
  line-height: 1.7em;
}

p::first-letter {
  color: var(--main-bg-color);
  font-size: 150%;
}

footer p {
  color: var(--main-body-color);
}

footer p::first-letter{
  color: var(--main-body-color);
  font-size: 150%;
}

/* IMAGE SECTION */

.imgfull img {
  width: 100%;
  height: auto;
}

.imgcir {
  display: flex;
  justify-content: center;
  align-items: center;
}

.imgcir img {
  border-radius: 50%;
  width: 100%;
  height: auto;
  align-items: center;
}

/* UTILITY SECTION */

.divider {
  height: 1px;
  border-top: 2px dashed var(--main-accent-font);
  margin: 1rem .5rem 1rem .5rem;
}

/* PADDING-MARGIN SECTION */

.padding {padding: 1em;}

.nopad {
  padding: 0px;
}

.botline {
  box-shadow: 0px 5px black;
}

/* BOOSTRAP EDITS */

.jumbotron {
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

.jumbotron *{
  color: white;
  font-family: 'Anton', sans-serif;
  text-shadow: 2px 2px 5px black;
  visibility: hidden;
}

.jumbotron:hover *{
  visibility: visible;
}

.jumbotron p::first-letter {
  color: white;
  font-size: 125%;
}

/* MEDIA QUERY SECTION */

@media only screen and (max-width: 768px; min-width: 576px) {
  body > .container {margin-left: 5vw; margin-right: 5vw;}
}

@media only screen and (max-width: 768px) {
  .jumbotron *{visibility: visible;}
  .jumbotron {padding: 2vw 2vw}
  html {font-size: 2vw;}
}

@media only screen and (max-width: 576px) {
  .container {margin: 0px;}
  html {font-size: 2vw;}
}