* {
  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*/

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;
  
}


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;
  min-height: 100vh; /* for full size panels */
 
}

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




/* 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%;
  }
}


.panel-left-top {
  /* background-image: url('/img/HomepageProjects.gif'); */
  background-size: cover;
  border: 1px solid  rgb(255, 255, 255);
  
}

.panel-right-bottom {
  background-image: url('../img/img_wip_small_2.jpg'); 
  background-size: cover;
  border: 1px solid  rgb(255, 255, 255);
 
}



/* for large devices use images in portrait mode. */
@media (min-width: 992px) {
  .panel-left-top {
      background: black;
      border: 1px solid  rgb(255, 255, 255);
      /* background-image: url('/img/HomepageProjects.gif'); */
      background-size: cover;
  }

  .panel-right-bottom {
      background-image: url('../img/img_wip_large_3.jpg');
      border: 1px solid  rgb(255, 255, 255);
      background-size: cover;
  }


}


/*-------Table-------*/


table,
td {
  border: 1px solid rgb(255, 255, 255);
  
}

thead,
tfoot {
  background-color: #333;
  color: #fff;
}

/* Footer */
.footer {
  color: white;
  padding: 20px;
  text-align: left;
  background: black;
  margin-top: 20px;
}

/* Closable button inside the image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
  
}

#myBtn {
  display: none;
  position:fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: rgb(0, 0, 0);
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
  
}

#myBtn:hover {
  background-color: #555;
}

/* .panel-right-bottom:hover {
background-image: url('/img/img_wip_small_3.jpg');
color: black;

}

@media (max-height: 992px){
  .panel-right-bottom:hover {
    background-image: url('../img/img_wip_small_3.jpg');
    border: 1px solid  rgb(255, 255, 255);
    background-size: cover;
    
}

} */

/* .panel-left-top:hover {
background-image: none;
background-color: white;
color: black;

}
 */

/* .panel-text { */
/* visibility: hidden; */
/* opacity: 0; */
/*  transition: all 1s ease; */ /* Transition for the changing opacity.*/

/* } */

/* change opacity on hover.
The > selects the child .panel-text of the current .panel */

.panel:hover > .panel-text{
visibility: visible;
opacity: 1;
}

.ascii{
text-align: left;
max-width: 450px;
padding-top: 20px;
padding-left: 5px;
padding-bottom: 20px;
}

/* .panel:hover > .ascii {
color:black;
background-color: white;

}

.panel:hover > .ascii ul{
color:black;
background-color: white;

}
 */


ul.ascii, ul.ascii ul {  margin-left: 0; padding-left: 0;  list-style: none; }

ul.ascii li { margin: 0; padding: 0; }

/* level 1 */
ul.ascii > li::before { content: "│"; }

/* level 2 */
ul.ascii > li > ul > li::before { content: "├──\00a0"; }
ul.ascii > li > ul > li:last-child::before { content: "└──\00a0"; }

/* level 3 */
ul.ascii > li > ul > li > ul > li::before { content: "│\00a0\00a0\00a0├──\00a0"}
ul.ascii > li > ul > li > ul > li:last-child::before { content: "│\00a0\00a0\00a0└──\00a0"; }
ul.ascii > li > ul > li:last-child > ul > li::before { content: "\00a0\00a0\00a0\00a0├──\00a0"}
ul.ascii > li > ul > li:last-child > ul > li:last-child::before { content: "\00a0\00a0\00a0\00a0└──\00a0"; }

/* hover projects names */