/* Guardian Squad CSS */
body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Lato', sans-serif;
}

.w3-bar,
h1,
button {
  font-family: 'Montserrat', sans-serif;
}

.fa-anchor,
.fa-coffee {
  font-size: 200px;
}

.header-image {
  max-width: 67px;
  max-height: 67px;
}

.code-block {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #9e9e9e;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

/* Colors */
.guardian-squadYellow {
  color: #000 !important;
  background-color: #ffc40b !important;
}
.guardian-amber,
.guardian-hover-amber:hover {
  color: #000 !important;
  background-color: #ffc107 !important;
}
.guardian-aqua,
.guardian-hover-aqua:hover {
  color: #000 !important;
  background-color: #00ffff !important;
}
.guardian-blue,
.guardian-hover-blue:hover {
  color: #fff !important;
  background-color: #2196f3 !important;
}
.guardian-light-blue,
.guardian-hover-light-blue:hover {
  color: #000 !important;
  background-color: #87ceeb !important;
}
.guardian-brown,
.guardian-hover-brown:hover {
  color: #fff !important;
  background-color: #795548 !important;
}
.guardian-cyan,
.guardian-hover-cyan:hover {
  color: #000 !important;
  background-color: #00bcd4 !important;
}
.guardian-blue-grey,
.guardian-hover-blue-grey:hover,
.guardian-blue-gray,
.guardian-hover-blue-gray:hover {
  color: #fff !important;
  background-color: #607d8b !important;
}
.guardian-green,
.guardian-hover-green:hover {
  color: #fff !important;
  background-color: #4caf50 !important;
}
.guardian-light-green,
.guardian-hover-light-green:hover {
  color: #000 !important;
  background-color: #8bc34a !important;
}
.guardian-indigo,
.guardian-hover-indigo:hover {
  color: #fff !important;
  background-color: #3f51b5 !important;
}
.guardian-khaki,
.guardian-hover-khaki:hover {
  color: #000 !important;
  background-color: #f0e68c !important;
}
.guardian-lime,
.guardian-hover-lime:hover {
  color: #000 !important;
  background-color: #cddc39 !important;
}
.guardian-orange,
.guardian-hover-orange:hover {
  color: #000 !important;
  background-color: #ff9800 !important;
}
.guardian-deep-orange,
.guardian-hover-deep-orange:hover {
  color: #fff !important;
  background-color: #ff5722 !important;
}
.guardian-pink,
.guardian-hover-pink:hover {
  color: #fff !important;
  background-color: #e91e63 !important;
}
.guardian-purple,
.guardian-hover-purple:hover {
  color: #fff !important;
  background-color: #9c27b0 !important;
}
.guardian-deep-purple,
.guardian-hover-deep-purple:hover {
  color: #fff !important;
  background-color: #673ab7 !important;
}
.guardian-red,
.guardian-hover-red:hover {
  color: #fff !important;
  background-color: #f44336 !important;
}
.guardian-sand,
.guardian-hover-sand:hover {
  color: #000 !important;
  background-color: #fdf5e6 !important;
}
.guardian-teal,
.guardian-hover-teal:hover {
  color: #fff !important;
  background-color: #009688 !important;
}
.guardian-yellow,
.guardian-hover-yellow:hover {
  color: #000 !important;
  background-color: #ffeb3b !important;
}
.guardian-white,
.guardian-hover-white:hover {
  color: #000 !important;
  background-color: #fff !important;
}
.guardian-black,
.guardian-hover-black:hover {
  color: #fff !important;
  background-color: #000 !important;
}
.guardian-grey,
.guardian-hover-grey:hover,
.guardian-gray,
.guardian-hover-gray:hover {
  color: #000 !important;
  background-color: #9e9e9e !important;
}
.guardian-light-grey,
.guardian-hover-light-grey:hover,
.guardian-light-gray,
.guardian-hover-light-gray:hover {
  color: #000 !important;
  background-color: #f1f1f1 !important;
}
.guardian-dark-grey,
.guardian-hover-dark-grey:hover,
.guardian-dark-gray,
.guardian-hover-dark-gray:hover {
  color: #fff !important;
  background-color: #616161 !important;
}
.guardian-pale-red,
.guardian-hover-pale-red:hover {
  color: #000 !important;
  background-color: #ffdddd !important;
}
.guardian-pale-green,
.guardian-hover-pale-green:hover {
  color: #000 !important;
  background-color: #ddffdd !important;
}
.guardian-pale-yellow,
.guardian-hover-pale-yellow:hover {
  color: #000 !important;
  background-color: #ffffcc !important;
}
.guardian-pale-blue,
.guardian-hover-pale-blue:hover {
  color: #000 !important;
  background-color: #ddffff !important;
}
.guardian-text-amber,
.guardian-hover-text-amber:hover {
  color: #ffc107 !important;
}
.guardian-text-aqua,
.guardian-hover-text-aqua:hover {
  color: #00ffff !important;
}
.guardian-text-blue,
.guardian-hover-text-blue:hover {
  color: #2196f3 !important;
}
.guardian-text-light-blue,
.guardian-hover-text-light-blue:hover {
  color: #87ceeb !important;
}
.guardian-text-brown,
.guardian-hover-text-brown:hover {
  color: #795548 !important;
}
.guardian-text-cyan,
.guardian-hover-text-cyan:hover {
  color: #00bcd4 !important;
}
.guardian-text-blue-grey,
.guardian-hover-text-blue-grey:hover,
.guardian-text-blue-gray,
.guardian-hover-text-blue-gray:hover {
  color: #607d8b !important;
}
.guardian-text-green,
.guardian-hover-text-green:hover {
  color: #4caf50 !important;
}
.guardian-text-light-green,
.guardian-hover-text-light-green:hover {
  color: #8bc34a !important;
}
.guardian-text-indigo,
.guardian-hover-text-indigo:hover {
  color: #3f51b5 !important;
}
.guardian-text-khaki,
.guardian-hover-text-khaki:hover {
  color: #b4aa50 !important;
}
.guardian-text-lime,
.guardian-hover-text-lime:hover {
  color: #cddc39 !important;
}
.guardian-text-orange,
.guardian-hover-text-orange:hover {
  color: #ff9800 !important;
}
.guardian-text-deep-orange,
.guardian-hover-text-deep-orange:hover {
  color: #ff5722 !important;
}
.guardian-text-pink,
.guardian-hover-text-pink:hover {
  color: #e91e63 !important;
}
.guardian-text-purple,
.guardian-hover-text-purple:hover {
  color: #9c27b0 !important;
}
.guardian-text-deep-purple,
.guardian-hover-text-deep-purple:hover {
  color: #673ab7 !important;
}
.guardian-text-red,
.guardian-hover-text-red:hover {
  color: #f44336 !important;
}
.guardian-text-sand,
.guardian-hover-text-sand:hover {
  color: #fdf5e6 !important;
}
.guardian-text-teal,
.guardian-hover-text-teal:hover {
  color: #009688 !important;
}
.guardian-text-yellow,
.guardian-hover-text-yellow:hover {
  color: #d2be0e !important;
}
.guardian-text-white,
.guardian-hover-text-white:hover {
  color: #fff !important;
}
.guardian-text-black,
.guardian-hover-text-black:hover {
  color: #000 !important;
}
.guardian-text-grey,
.guardian-hover-text-grey:hover,
.guardian-text-gray,
.guardian-hover-text-gray:hover {
  color: #757575 !important;
}
.guardian-text-light-grey,
.guardian-hover-text-light-grey:hover,
.guardian-text-light-gray,
.guardian-hover-text-light-gray:hover {
  color: #f1f1f1 !important;
}
.guardian-text-dark-grey,
.guardian-hover-text-dark-grey:hover,
.guardian-text-dark-gray,
.guardian-hover-text-dark-gray:hover {
  color: #3a3a3a !important;
}
.guardian-border-amber,
.guardian-hover-border-amber:hover {
  border-color: #ffc107 !important;
}
.guardian-border-aqua,
.guardian-hover-border-aqua:hover {
  border-color: #00ffff !important;
}
.guardian-border-blue,
.guardian-hover-border-blue:hover {
  border-color: #2196f3 !important;
}
.guardian-border-light-blue,
.guardian-hover-border-light-blue:hover {
  border-color: #87ceeb !important;
}
.guardian-border-brown,
.guardian-hover-border-brown:hover {
  border-color: #795548 !important;
}
.guardian-border-cyan,
.guardian-hover-border-cyan:hover {
  border-color: #00bcd4 !important;
}
.guardian-border-blue-grey,
.guardian-hover-border-blue-grey:hover,
.guardian-border-blue-gray,
.guardian-hover-border-blue-gray:hover {
  border-color: #607d8b !important;
}
.guardian-border-green,
.guardian-hover-border-green:hover {
  border-color: #4caf50 !important;
}
.guardian-border-light-green,
.guardian-hover-border-light-green:hover {
  border-color: #8bc34a !important;
}
.guardian-border-indigo,
.guardian-hover-border-indigo:hover {
  border-color: #3f51b5 !important;
}
.guardian-border-khaki,
.guardian-hover-border-khaki:hover {
  border-color: #f0e68c !important;
}
.guardian-border-lime,
.guardian-hover-border-lime:hover {
  border-color: #cddc39 !important;
}
.guardian-border-orange,
.guardian-hover-border-orange:hover {
  border-color: #ff9800 !important;
}
.guardian-border-deep-orange,
.guardian-hover-border-deep-orange:hover {
  border-color: #ff5722 !important;
}
.guardian-border-pink,
.guardian-hover-border-pink:hover {
  border-color: #e91e63 !important;
}
.guardian-border-purple,
.guardian-hover-border-purple:hover {
  border-color: #9c27b0 !important;
}
.guardian-border-deep-purple,
.guardian-hover-border-deep-purple:hover {
  border-color: #673ab7 !important;
}
.guardian-border-red,
.guardian-hover-border-red:hover {
  border-color: #f44336 !important;
}
.guardian-border-sand,
.guardian-hover-border-sand:hover {
  border-color: #fdf5e6 !important;
}
.guardian-border-teal,
.guardian-hover-border-teal:hover {
  border-color: #009688 !important;
}
.guardian-border-yellow,
.guardian-hover-border-yellow:hover {
  border-color: #ffeb3b !important;
}
.guardian-border-white,
.guardian-hover-border-white:hover {
  border-color: #fff !important;
}
.guardian-border-black,
.guardian-hover-border-black:hover {
  border-color: #000 !important;
}
.guardian-border-grey,
.guardian-hover-border-grey:hover,
.guardian-border-gray,
.guardian-hover-border-gray:hover {
  border-color: #9e9e9e !important;
}
.guardian-border-light-grey,
.guardian-hover-border-light-grey:hover,
.guardian-border-light-gray,
.guardian-hover-border-light-gray:hover {
  border-color: #f1f1f1 !important;
}
.guardian-border-dark-grey,
.guardian-hover-border-dark-grey:hover,
.guardian-border-dark-gray,
.guardian-hover-border-dark-gray:hover {
  border-color: #616161 !important;
}
.guardian-border-pale-red,
.guardian-hover-border-pale-red:hover {
  border-color: #ffe7e7 !important;
}
.guardian-border-pale-green,
.guardian-hover-border-pale-green:hover {
  border-color: #e7ffe7 !important;
}
.guardian-border-pale-yellow,
.guardian-hover-border-pale-yellow:hover {
  border-color: #ffffcc !important;
}
.guardian-border-pale-blue,
.guardian-hover-border-pale-blue:hover {
  border-color: #e7ffff !important;
}

.footer {
  padding: 16px;
  font-weight: bold;
  border-top: 3px solid black;
  background-color: #e4e3e3;
  text-align: center;
}

ul.horizontal-list {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

ul.horizontal-list li {
  display: inline;
  margin: 10px;
}