* {
    box-sizing: border-box;
}

/* Header/Blog Title */
.header {
    padding: 0px;
    text-align: center;
    background: rgb(0, 0, 0);
    color: white;
  }
  
  .header h1 {
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
  }

/*Menubar*/


body {
    font-family: 'Courier New', monospace;
    font-size: 14pt;
    margin: 0; /* to avoid white space around panels */
    cursor: pointer;
    background-color: black;
    
}

.flex-container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* for full size panels */
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
   
  }

  li {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  
  /* Change the link color to #111 (white) on hover */
  li a:hover {
    background-color: white;
    color: black;
    
  }

  .panel{

    border-top: 1px solid  rgb(255, 255, 255);


  }

.panel.item-2 {
    flex: 50%;
    color: rgb(255, 255, 255);
    /* justify text center */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.panel.item-1 {
    flex: 50%;
    color: rgb(255, 255, 255);
    /* justify text center */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    padding: 20px;
}



/* for larger devices:
change direction to row (left and right panel)
set flex to 50% */
@media (min-width: 992px) {
    .flex-container {
        flex-direction: row;
    }

    .panel {
        flex: 50%;
    }
}


.item-1 {
   /* background-image: url('../img/img_01_1920.jpg'); */
    background: black;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    
}

.item-2{
    background-image: url('../img/img_yo.jpg');
    background-size:cover;
    display: flex;
}


/* for large devices use images in portrait mode. */
@media (min-width: 992px) {
    .item-1{
        background: black;
        /* background-image: url('../img/img_wip_large.jpg'); */
    }

    .item-2 {
    }
}