/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

html {
    scrollbar-color: #B0965F #DECB93;
    scrollbar-width: thin;
    
}


      body {
        background-image: url(images/sitebox/background.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        min-height: 100%;
        font-family: "Courier New", monospace;
        max-width: 1000px;
        margin: 20px auto;
        
      }
      
      
      h2 {
        color: #4682B4;
        text-align: center;
      }
      
      
      a {
        color: #4682B4;
      }
      
      
      a:hover {
        color: gold;
      }
      
      .image-logo {
       width: 325px;
       flex: 1;
       display: flex;
       flex: 0 0 auto;
       z-index: 2;
       margin-left: -50px;
       margin-top: -10px;
      }
      
      .wrapper {
       display: flex;
       flex: 1;
      }
      
      .sidebar {
        max-width: 200px;
        overflow: visible;
        z-index: 1;
      }
      
      .sidebar-box-left {
        max-width: 200px;
        padding: 20px;
        background-image: url(images/sitebox/Sidebar.png);
        background-size: cover;
        z-index: 1;
      }
      
    
      .sidebar-box {
        max-width: 100px;
        background-size: cover;
        color: black;
        justify-content: left;
      }
      
      .center {
        background-image: url(images/sitebox/main.png);
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        padding: 30px;
        margin: 5px auto;
        margin-top: 25px;
        width: 600px;
        flex: 0 0 auto;
        
      }
      
      .main-content {
        max-width: 600px;
      }
      
      .empty-part {
        flex: 1;
        max-height: 1px;
      }
      
      .text-part {
        flex: 24;
        text-align: justify;
      }
    
      
      .upd-container {
        background-image: url(images/sitebox/laposts.png);
        background-repeat: no-repeat;
        background-size: contain;
        display: flex;
        max-width: 600px;
        height: 300px;
      }
      
      .upd {
        padding: 20px;
        width: 370px;
        height: 245px;
        text-align: justify;
        overflow: auto;
      }
      
      .cards-container {
        display: flex;
        margin: 0 auto;
        gap: 15px;
      }
      
      .card {
        background-image: url(images/sitebox/emptycard.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 175px;
        height: 250px;
      }