.flex-container {
    display: flex;   
    justify-content: flex-start; 
    align-items: stretch; 
    /* flex-flow: column nowrap; */ 
    flex-direction: column; 
    flex-wrap: nowrap; 
    align-content: stretch;
    padding: 0;
    margin: 0;
    box-sizing: content-box;    
  }

  .flex-container > div{    
    border: 1px solid #a2e7e2;
    border-radius: 5px;   
  }

  body{
    box-sizing: border-box;
    padding: 0;   
  }

.item1
{    
    display: flex;    
    justify-content:flex-start;
    align-items: stretch; 
    flex-flow:wrap; 
    flex-direction: row; 
    flex-wrap: nowrap; 
    align-content: stretch; 
     position: fixed;     
     position: relative;
    padding:0;    
} 

  img
  {
    width: 100px;
    margin: 0;
    padding: 5px; 
    object-fit: cover;
   
  }
  #name{
    padding: 5px;
    padding-top: 20px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    letter-spacing: 5px;
    font-weight: bold;
    font-size: 20px;
    color: rgb(14, 74, 92);
    word-break: break-all;
    word-wrap: break-word;
  } 
  .menu
  {
     
     margin: 0 auto;
     padding: 0;
    
  }
 
  ul{   
    margin: 0;
    padding: 0;
   
     list-style-type: none;
     overflow: hidden;
     
    
  }
  ul>li{
   
    display: inline-block;
    padding: 0;
    margin: 0;
    background-color: red;
  
  }
  ul>li>a
  {
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 15px;
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    letter-spacing: 2px;
     
  }
   ul>li>a:hover
   {
       background-color: rgb(52, 41, 102);
    
   }
   
  .flex
  {
   
    width: 100%;
    margin: 0 auto;
    height: auto;
    overflow: hidden;
    height: 50vh;
    
  }
  .flex>img
  {
    object-fit:fill;
    width: 100%;
    height: 100%;
    padding: 5px;

  }
  .box
  {
     display: flex;
    
    justify-content:center;
    align-items: stretch; 
    /* flex-flow: row wrap; */ 
    flex-direction: row; 
    flex-wrap: wrap; 
    align-content: stretch;

    background-color: #bbdefb;
    height: 100%;
    padding: 15px;
    gap: 1px;
    box-sizing: content-box;

  }
   .box > div{
    background: #1b3b92;     
    border-radius: 2px;
    padding: 8px;
    width: 20%;
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 15px;
    text-align: center;
    letter-spacing: 1px;
    
    box-sizing: border-box;
    word-break: break-all;
    word-wrap: break-word;
    
    
  }
  
   .box > div:hover{
    background: #1b3b92;  
    cursor:pointer;   
     
  }
  .box>.item5
  {
    background-color: rgb(77, 36, 77);
  }
  
  .box>.item2
  {
    background-color: rgb(80, 66, 27);
  }
  
  .box>.item3
  {
    background-color: rgb(51, 152, 165);
  }
  
  .box>.item4
  {
    background-color: rgb(177, 32, 75);
  }
  p{
    font-size: 12px;
    font-family:'Courier New', Courier, monospace;
    font-weight: bold;
  }
  .bottom
  {
    box-sizing: content-box;
    
    background-color: rgb(58, 46, 70);    
    color: white;
    padding: 8px;  
    margin: 0;
  }
  p{
    font-size: 13px;
    padding: 5px;
     word-break: break-all;
    word-wrap: break-word;
  }
 

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: rgb(37, 3, 3);
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}