:root {
  /* FONT VARIABLE NAMES */
  --bold-font-family: 'Anton', sans-serif;
  --thicc-font-family: 'Bakbak One', cursive;
  --sans-font-family: 'EB Garamond', serif;
  --robo-font-family: 'Roboto Mono', monospace;

  /* COLOR VARIABLE NAMES */
 --background: #231C1D;
 --accent: #723B55;
 --forest-green: #3B6444;
 --light-green: #518C61;
 --eggshell-white: #E0CFA5;
 --super-green: #0D8B00;

}
  .bold-text {font-family: var(--bold-font-family);}
  .robo-text {font-family: var(--robo-font-family);}
  .sans-text {font-family: var(--sans-font-family);}
  .thicc-text {font-family: var(--thicc-font-family);}
  .background {background-color: var(--background);}
  .back-accent {background-color: var(--accent);}
  .back-green {background-color: var(--super-green);}
  .back-forest {background-color: var(--forest-green);}
  .back-light {background-color: var(--light-green);}
  .back-eggshell {background-color: var(--eggshell-white);}
  .font-background {color: var(--background);}
  .font-accent {color: var(--accent);}
  .font-forest {color: var(--forest-green);}
  .font-light {color: var(--light-green);}
  .font-eggshell {color: var(--eggshell-white);}

  body {
    background-color: black;
    margin: 0px;
  }
  p {
    color: #ccffcc;
  }
  h1{
    font-family: var(--robo-font-family);
    background-color: var(--super-green);
    color: white;
    text-align: center;
  }
  header h1 {
  position: relative;
  width: max-content;
  }
  header h1::before,
  header h1::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  header h1::before {
    background: var(--super-green);
    animation:
      typewriter 4s steps(22) forwards;
  }
  header h1::after{
    width: 0.12em;
    background: white;
    animation:
      typewriter 4s steps(22) forwards,
      blinker .5s steps(22) infinite;

  }
  @keyframes typewriter {
    to {
      left: 100%;
    }
  }
  @keyframes blinker {
    0% {background: transparent;}
    50% {background: transparent;}
    51% {background: white}
    100% {background: white}
  }
  h2, h3 {
    text-align: center;
    border-top: solid #ccffcc;
    border-bottom: solid #ccffcc;
    color: #ccffcc;
    margin: 5px;
  }
  #container {
    background-color: #001a00;
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
  }
  .container{
    background-color: #001a00;
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
  }
  .nopad {
    padding: 0px;
  }
  button {
    background-color: #006600;
    border: 1px solid #003300;
    color: #ccffcc;
    text-align: center;
    margin: 10px;
  }
  main p{
    padding: 10px;
  }
  footer {
    padding-left: 10px;
  }
  .dropdown {
    position: relative;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #006600;
    color: #b3ffb3;
  }
  .flex-container {
    display: flex;
    flex-wrap: wrap;
    padding: 10px
  }
  .three-col-out {
    width: 30%;
    padding: 10px;
  }
  .three-col-in {
    width: 31%;
    border-left: solid #ccffcc;
    border-right: solid #ccffcc;
    background-color: #003300;
    padding: 10px;
  }
  .flex-container img{
    border-radius: 50%;
    margin: 10px 16% 0px;
    width: 200px;
    height: auto;
  }
  .banner img {
    width: 100%;
    height: auto;
    margin: 0px;
  }
  .show {
    display: block;
    height: 60px;
  }
  .row {
    margin: 0px;
  }
  .center {
    align-items: center;
    justify-items: center;
  }
  .nav-btn {
    color: var(--background);
    background-color: var(--super-green);
  }
  .nav-btn::hover {
    color: var(--super-green);
    background-color: var(--background);
  }
  .dropdown-menu, .dropdown-menu a{
    background-color: var(--super-green);
    color: var(--background);
  }
  .dropdown-item a{
      color: var(--background);
  }
  .dropdown-toggle:active, .open .dropdown-toggle {
    background-color: var(---super-green);
    color: var(--background);
  }
  .btn-myrror {
    color: white !important;
    background-image: linear-gradient(135deg, #56B5DB, black, #DE85D3) !important;
    text-shadow: 1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
    border: 1px black !important;
  }
  .btn-myrror:hover {
    background-image: linear-gradient(135deg, cyan, black, magenta) !important;
  }
  .btn-image {
    color:white !important;
    text-shadow: 1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
    border: 1px black !important;
  }
  .btn-image:hover{
    transform: scale(1.05);
    border: 1px white !important;
  }
  .mybadge {
    height: 3rem !important;
    width: auto !important;
    border-radius: 5% !important;
  }