/* On screens that are 992px or less */
@media screen and (max-width: 992px) {
  .nav-container li{
    display: block;
    margin: 1rem 0 0 0 ;
    text-align: center;
  }

  .social-links a{
    margin: 0 10px 0 10px;
  }

  #info-banner {
    width: 100vw;
    height: 280px;
    
    gap: 0.5rem;
  
    font-size: 1.0em;
    letter-spacing: 1px;
    
  }
  .container-info-text{
    margin: 1rem;
  }  
  .container-info-btns  {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }
  
  button.info-btn {
    padding: 0.5rem;
    font-family: var(--block-font);
    font-size: 1.0rem;
    color: white;
    cursor: pointer;
    background-color: #61402d;
    border: 2px solid white;
  }
  
  button.info-btn:hover {
    color: #61402d;
    background-color: white;
    border: 2px solid #61402d;
  }
  
  .info-btn a:hover {
    color: #61402d;
    background-color: white;
    text-decoration: none;
    
  }
 
}

/* On screens that are 600px or less */
@media screen and (max-width: 600px) {
  body {

    font-size: 12px;
  }

  h1 {
    font-size: 4rem;
  }
  
  h2 {
    
    font-size: 2.4rem;
  }


  .main-title, .flex-subtitle {
    width: 90%;
  }

  .section-title {

    font-size: 2.0rem;
    
  }
  .section-content {
    width: 95%;
  }

  .section-info, .section-menu, .section-short-info {
    margin-top: 1rem;
    width: 95%;
  }

  

  .container-css-properties {       
    font-size: 1.0rem;
    letter-spacing: 0px;
    
  }

  .blocks {
    width: 40px;
  }
  
  footer nav li {
    display: block;
    margin: 1rem 0;

    text-align: center;    
    font-size: 1.4rem;
  }


}

@media screen and (max-width: 320px) {
  .blocks {
    width: 25px;
  }

  .social-links a img {
    height: 25px;
  }
  .social-links a{
    margin: 0 8px 0 10px;
  }


}