:root {
  --theme-color1:#1536EA;
  --theme-color2:#5E15EA;
  --theme-color3:#15A1EA;
  --support-color1:#0B1C7A;
  --support-color2:#310B7A;
  --support-color3:#0B547A;
  --grey-color1: #99A7F6;
  --grey-color2: #B999F6;
  --grey-color3: #99D6F6;
}

/* my colors */
.theme1 {
  color: var(--theme-color1)
}
.theme2 {
  color: var(--theme-color2)
}
.theme3 {
  color: var(--theme-color3)
}
.bg-theme1 {
  background-color: var(--theme-color1)
}
.bg-theme2 {
  background-color: var(--theme-color2)
}
.bg-theme3 {
  background-color: var(--theme-color3)
}
.support1 {
  color: var(--support-color1)
}
.support2 {
  color: var(--theme-color2)
}
.support3 {
  color: var(--theme-color3)
}
.bg-support1 {
  background-color: var(--support-color1)
}
.bg-support2 {
  background-color: var(--support-color2)
}
.bg-support3 {
  background-color: var(--support-color3)
}
.grey1 {
  color: var(--grey-color1)
}
.grey2 {
  color: var(--theme-color2)
}
.grey3 {
  color: var(--theme-color3)
}
.bg-grey1 {
  background-color: var(--grey-color1)
}
.bg-grey2 {
  background-color: var(--grey-color2)
}
.bg-grey3 {
  background-color: var(--grey-color3)
}

/* !end of my colors */

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
main {
  flex-grow: 1;
}
section {
  background-color: var(--support-color2);
  color: white; 
  min-height: 15vh;
}
.row{
  margin: 16px 0px;
}
.col{
  margin: 64px 0px;
}
.card {
  color: black;
  padding: 16px;
}

/* navigation bar */
.logo {
  max-height: 5vh;
}
nav li {
  list-style-type: none;
}

nav li a.btn {
  text-color: var(--theme-color3);
}

/* quote/comment cards */

.best-review {
  background-color: rgba(124, 255, 124, 0.445);
  border-radius: 16px;
  padding: 8px;
}

span.mdi.mid-star {
  color: rgba(124, 255, 124, 0.445);
}

.quote-name {
    font-family: "Italianno", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: xx-large;
}

.bg-img1 {
  background-image: url(https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    background-color: rgba(0, 0, 0, 0.75);
    background-blend-mode: color;
}

.bg-img-body {
  background-image: url(https://images.unsplash.com/photo-1557683316-973673baf926?q=80&w=3829&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  min-height: 25vh;
  min-width: 100%;
  background-size: cover;
  background-position: center;
}
.bg-img-section {
  background-image: url(https://images.unsplash.com/photo-1557683316-973673baf926?q=80&w=3829&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  min-height: 25vh;
  min-width: 100%;
  background-size: cover;
  background-position: top;
  background-color: rgba(0, 0, 0, 0.25);
  background-blend-mode: color;
}
.bg-img-foot {
  background-image: url(https://images.unsplash.com/photo-1557683316-973673baf926?q=80&w=3829&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  min-height: 25vh;
  min-width: 100%;
  background-size: cover;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.25);
  background-blend-mode: color;
}

.img-stars {
  max-width: 100%;
  padding: 8px; 
  background-color: var(--grey-color3);
  border-radius: 16px;
}

.half-on {
  margin: auto;
  position: absolute;
  top: 75vh;
  min-width: 45%;
  /* max-width: 45%; */
  /* margin: auto; */
}

a {
  text-decoration: none;
}

footer a, footer a span {
  background-color: rgba(255, 255, 255, .25);
  border-radius: 16px;
  padding: 8px;
}

/* id :: before broke the anchors in a weird way that I actually really like */
/* [id]::before {
  content: '';
  display: block;
  height:      175px; 
  margin-top: -175px;
  visibility: hidden;
} */
/* #family::before {
  content: '';
  display: block;
  height:      175px; 
  margin-top: -175px;
  visibility: hidden;
} */
/* #shield::before {
  content: '';
  display: block;
  height:      175px; 
  margin-top: -175px;
  visibility: hidden;
} */
/* #quote::before {
  content: '';
  display: block;
  height:      175px; 
  margin-top: -175px;
  visibility: hidden;
} */
/* #map::before {
  content: '';
  display: block;
  height:      175px; 
  margin-top: -175px;
  visibility: hidden;
} */


@media screen AND (max-width: 768px) {
  .half-on {
    position: unset;
    max-width: none;
    margin: clear;
  }
}