:root {
  color: #000000;
  font-family: Serif;
  background-color: #5c6a59;
  background-image: url("https://www.transparenttextures.com/patterns/rough-cloth.png");
  background-blend-mode: multiply;
  background-repeat: repeat;
                              }

  @font-face {
        font-family: 'basteleur';
        src: url('https://jesterautophagy.neocities.org/fonts/Basteleur-Moonlight.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
      }
      h1, h2, h3, h4, h5, h6 {
        font-family: 'basteleur', serif;
      }
  
  #flexcontain {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 10px 20px;
  padding: 5px;
}
    
  
  .right-column  {
    padding: 10px;    
    background-color: #D4D8CF;
    width:60%;}
    
   #moodboard {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 10px;
     margin: 0 auto; /* this helps center it if it's inline-block or block */
     width: fit-content;
   }
     
     #moodboard img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        }
   #name {
     display: flex;
     
     
    }
  
   #brif {
     display: flex;
     
    }
 
  .left-column {width:20%; padding: 10px;}
      
  #image {display: flex; justify-content: center; margin-bottom: 20px;}
    

    #info {
    padding: 10px;
    border: 1px solid black;
    background-color: #000000;
    color: #FFFFFF;
    }
    
    table {
      font-size: 15px;
      width: 100%;
      height: 100%;
    }
    
    th, td {padding: 2px 4px;
      vertical-align: top;
      }
      td {text-align: left;}
      th {text-align: right}
      th.center {text-align: center; padding:0px;}
      
  #image img {
  width: 250px;
  height: 250px;
  border-radius: 50%; /* makes it round */
  object-fit: cover;  /* crops to fit if not square */
  margin-bottom: 5px;
}