/* Style the navigation menu */
.topnav {
    overflow: hidden;
    background-color: #333;
    position: relative;
  }
  
  /* Hide the links inside the navigation menu (except for logo/home) */
  .topnav #myLinks {
    display: none;
  }
  
  /* Style navigation menu links */
  .topnav a {
    color: black;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
  }
  
  /* Style the hamburger menu */
  .topnav a.icon {
    background: olivedrab;
    display: block;
    position: absolute;
    right:0;
    top: 0;
    bottom:0;
  }
  
  /* Add a grey background color on mouse-over */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Style the active link (or home/logo) */
  .active {
    background-color: #81613c ;
    color: white;
  }

  .fa {
    /* padding: 20px; */
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
  }
  
  /* Add a hover effect if you want */
  .fa:hover {
    opacity: 0.7;
  }
  
  /* Set a specific color for each brand */
  
  /* Facebook */
  .fa-facebook {
    background: #3B5998;
    color: white;
    /* border-radius: 120px; */
  }
  
  /* Twitter */
  .fa-twitter {
    background: #55ACEE;
    color: white;
    /* border-radius: 50%; */
  }

  /* Twitch */
  .fa-twitch{
    background: #9147ff;
    color:white;
  }

  /* Instagram */
  .fa-instagram{
    background:#DD2A7B;
    color: white;
  }


  #CTA {
    /* border: 1px solid red; */
    width: 100%;
    /* padding:10%; */
    color: white;
    
  }
  #social {
    /* border:1px solid white; */
    justify-content: center;
    width: 100%;
    /* padding-top: 20%; */
    display:flex;

  }

#body {
  display: inline-block;
  max-width: fit-content;
  background-image: url('https://i0.hippopx.com/photos/572/305/168/ash-blaze-bonfire-burn-preview.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
  /* background-position: 0 -1000px; */
  /* background-color: rgba(255,255,255,.5); */
}

#greeting {
  color: whitesmoke;
  background-color:rgba(255,255,255,0);
  display: grid;
  justify-content: center;
  align-content: center;
  padding-top: 0%;
}

 #cards {
  max-width:auto;
  height: auto;
  display:flex;
  background-color: rgba(255,255,255,0);
  
  
 } 
 
 


@media only screen and (max-width: 767px){
#body {
  background-image: 100%;
}
.hamburger{
  display: none;
}
}
  

@media only screen and (max-width: 1023px){
  #body {
    background-image: 100%;
  }
  .hamburger {
    display:none;
  }
  }
}