.flex-container {
    display: flex;
    justify-content: center;
    white-space: nowrap; /
}

body,h1 {font-family: sans-serif}
body, html {height: 100%}
.bgimg {
  background-image: url('https://i.ibb.co/ckWBnrb/steamlogo.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh; /* Ensure the background container takes full viewport height */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content to start (top of the page) */
  padding-top: 60px; /* Add space for the navbar */
}


.buttons-container {
    display: flex;
    justify-content: center;
    gap: 10px; 
  }
  
  .button {
    text-decoration: none; 
  }

  .title {
    --bulma-title-color: white;
  }

  a {
    color: var(--bulma-link-text);
    cursor: pointer;
    text-decoration: none;
    transition-duration: var(--bulma-duration);
    transition-property: background-color, border-color, color;
}

.h6 {
  color: white;
}

  .footer {
    --bulma-footer-background-color: var(--bulma-scheme-main-bis);
    --bulma-footer-color: false;
    --bulma-footer-padding: 3rem 1.5rem 6rem;
    background-color: var(--bulma-footer-background-color);
    padding: var(--bulma-footer-padding);
  }

  .strong {
    color: white;
    font-weight: var(--bulma-strong-weight);
}


  .box {
    max-width: 600px; /* Set a max width for the box */
    margin: 0 auto;   /* Center the box */
    padding: 10px;    /* Add some padding */
    --bulma-box-background-color: #333;
    --bulma-box-color: white;

    word-wrap: break-word;
    overflow: hidden;
    border-radius: 8px;
  }


  
  
  .media {
    display: flex;           /* Use flexbox for layout */
    flex-direction: row;    /* Row direction for desktop */
    align-items: center;     /* Center items vertically */
  }
  
  .media-left {
    margin-right: 15px;     /* Space between image and text */
  }
  
  @media (max-width: 768px) {
    .media {
      flex-direction: column; /* Column direction for mobile */
      align-items: flex-start; /* Align items to the start */
    }
  
    .media-left {
      margin-bottom: 10px;    /* Space below the image on mobile */
      margin-right: 0;        /* Remove right margin */
    }
  }

  .p {
    color: black;
  }
  
  .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
      color: hsl(0, 0%, 100%);
      font-weight: var(--bulma-content-heading-weight);
      line-height: var(--bulma-content-heading-line-height);
  }