topbar h4 {
	display: inline;
	word-spacing: 8rem;
	width: 100%;

	}


.tree{
	--spacing : 1.5rem;
	--radius : 10px;
}

.tree li{
  display      : block;
  position     : relative;
  padding-left : calc(2 * var(--spacing) - var(--radius) - 1px);
}

.tree ul{
  margin-left  : calc(var(--radius) - var(--spacing));
  padding-left : 2;
}

.tree ul li{
  border-left : 2px solid #2dff00;
}

.tree ul li:last-child{
  border-color : transparent;
}

.tree ul li::before{
  content      : '';
  display      : block;
  position     : absolute;
  top          : calc(var(--spacing) / 100);
  left         : -2px;
  width        : calc(var(--spacing) + 13px);
  height       : calc(2 * var(--radius) + 26px);
  border       : solid #2dff00;
  border-width : 0 0 2px 2px;
}

.tree summary{
  display : block;
  cursor  : pointer;
}

.tree summary::marker,
.tree summary::-webkit-details-marker{
  display : none;
}

.tree summary:focus{
  outline : none;
}

.tree summary:focus-visible{
  outline : 1px dotted #2dff00;
}

box{
	border: #2dff00 2px;
	border-style: solid;
	
}

img {
  width: 80%;
  height: auto;
}


table, th, td {
  border:1px solid #2dff00;
  margin-left: auto;
  margin-right: auto;
}

.sidenav {
  width: 15%; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  left: 0;
  background-color: black; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 5%;
  padding-left: 6%;
  
}

/* The navigation menu links */
.sidenav a {
  text-decoration: none;
  font-size: 25px;
  color: #2dff00;
  display: block;
}


/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-width: 768px) {
  .sidenav {
	  display: none;
  }
}

@font-face {
    font-family: DIN1451;
	font-style: normal;
    src: local(DIN1451), url(../fonts/D-DIN.otf);
}

@font-face {
	font-family: DIN1451;
	font-weight: bold;
	src: local(DIN1451-Bold), url(../fonts/D-DIN-Bold.otf);
}

body {
	font-family: DIN1451;
	background-color: black;
}

/* hide page scrollbar */
html { scrollbar-width: none; } /* Firefox */
body { -ms-overflow-style: none; } /* IE and Edge */
body::-webkit-scrollbar, body::-webkit-scrollbar-button { display: none; } /* Chrome */
/* end hide page scrollbar */

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.88);
    z-index: 2;
    justify-content: center;
    overflow: hidden;
}

#overlay img {
    margin: auto;
    display: block;
    width: 80%;
    height: 80%;
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.image-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 4px;
}

.image-grid img {
	width: 296px;
    padding: 4px;
    align-self: center;
}

.back {
	background-image: url("../images/IMG_3198.jpg");
	position: absolute;
	z-index: -5;
}

.width {
    display: flex;
    flex-wrap: wrap;
    padding: 4px;
}

.width img {
	width: 360px;
    padding: 2px;
    align-self: center;
}