
body {
  background-color: black;
  }


.wrapper {
  width: 85%;
  height: 93%;
  margin: 20px auto; 
  border-style: solid;
  border-width: 10px;
  }

.header {
  color: white;
  font-size: 15px;
  width: 99%;
  height: 20%;
  display: block;
  }

.imgcontainer {
  height: 100%;
  width: 55%;
  float: left;
  }

.imgcontainer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  }

.menu {
width: 30%;
display: flex;
align-content: center;
justify-content: center;

}

.menucontainer {
color: white;
font-size: 30px;

}

.columnwrapper {
  width: 99%;
  height: 65%;
  border-style: solid;
  border-width: 1px;
  display: flex;
  }

.leftcolumn {
  width: 30%;
  height: 98%;
  border-style: solid;
  border-width: 5px;
  border-color: #ebe834;
  float: left;
  overflow-y: scroll;
  }

.leftcolumnwrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  }

.rightcolumn {
  padding: 15px;
  color: white;
  width: 69%;
  height: 90%;
  float: left;
  margin: auto;
  overflow-wrap: break-word;
  overflow-y: scroll;
}



.footer {
  margin-top: 15px;
  width: 99%;
  height: 11%;
  border-style: solid;
  border-width: 1px;
  border-color: #3deb34;
  }

.footerwrap {
  height: 100%;
  width: 100%;
  display: flex;
  gap: 0;
  }

.foot1, .foot2, .foot3, .foot4 {
  height: 100%;
  width: 100%;
  margin: 0;

  }

.foot1 img, .foot4 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  }

.foot2, .foot3 {
display: flex;
justify-content: center;
align-items: center;

}

.foot2 img, .foot3 img, {
  width: 100%;
  height: 100%;
  }

.dropcontainer {
position: relative;
}

.dropcontent {
  transform: translateY(-25%);
  display: none;
  position: absolute;
  background-color: black;		
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  width: 100px;
  height: 320px;
  border-style: solid;
  border-color: #45e6c8;
  box-shadow: 0 0 .2rem #45e6c8,
            0 0 .2rem #45e6c8,
            0 0 2rem #45e6c8,
            0 0 0.8rem #45e6c8,
            0 0 2.8rem #45e6c8,
            inset 0 0 1.3rem #45e6c8;
  font-size: 20px;
  overflow-y: scroll;

}
.dropcontainer:hover .dropcontent {
  display: block;
}

a:link {
color: black;
}

a:visited {
color: black;
}

a:hover {
color: black;
text-shadow: 0 0 .2rem #87f5fb,
0 0 .2rem #87f5fb,
0 0 2rem #87f5fb,
0 0 0.8rem #87f5fb,
0 0 2.8rem #87f5fb;
}

a:active {
}
