:root {
  --color-scheme: lime;
  --stroke-width: 3;
  --bg-url: url("../images/green_bg.png");
  --title-font: Alex Brush;
  --normal-font: Cutive;
  --normal-font-size: small;
  --header-font-size: x-large;
}

#menubar {
  position: relative;
  z-index: 4;
  border-bottom: 2px outset var(--color-scheme);
  background-color: black;
  overflow: hidden;
}

#menubar span {
  float: right;
  color: var(--color-scheme);
  font-family: var(--normal-font);
  font-size: var(--normal-font-size);
  padding: 15px 20px 5px 20px;
  text-align: center;
}

#menubar span a {
  text-decoration: none;
}

.dropdown_content {
  display: none;
  position: fixed;
  top: 39px;
  background-color: black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 5;
  border-bottom: 2px outset var(--color-scheme);
  border-right: 2px outset var(--color-scheme);
}

.dropdown_content a {
  color: var(--color-scheme);
  font-family: var(--normal-font);
  font-size: var(--normal-font-size);
  padding: 15px 20px 5px 20px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown_content {
  display: block;
}

#menubar span.drophover:hover {
  cursor:pointer;
  background-color: var(--color-scheme);
  color: white;
}

.dropdown_content a:hover {
  cursor:pointer;
  background-color: var(--color-scheme);
  color: white;
}

.titlespan {
  font-family: var(--title-font);
  font-size: 50px;
  font-weight: bold;
}

#container {
  display: flex;
  justify-content:center;
  align-items:center;
  width: 65%;
  height: 100%;
  left: 22.5%;
  position: relative;
}

#circleborder {
  width: 100%;
  transform: rotate(65deg);
  z-index: 1;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
}

#blackcircle {
  position: absolute;
  left: 4%;
  width: 90%;
  background-color: black;
  border-radius: 50%;
  color: white;
}

#aliceimg {
  position: absolute;
  width: 80%;
  right: -30%;
  z-index: 2;
}

#sidebuttongroup {
  position: absolute;
  left: -25%;
  width: 30%;
  z-index: 2;
}

.navdiv {
  width:80%;
  position: absolute;
  background: black;
  -ms-transform: skewX(-20deg);
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

#navdiv2, #navdiv4 {
  left: -10%;
}
#navdiv3 {
  left: -15%;
}

#navdiv1, #navdiv2, #navdiv3, #navdiv4, #navdiv5 {
  overflow: hidden;
}

.navbutton:hover, .navbutton:active {
  color: white;
}

.navbutton:hover:before, .navbutton:active:before {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
  left: 100%;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 5; /* Sit on top */
  padding-top: 5%; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  font-family: var(--normal-font);
}

.modal h1 {
  font-family: var(--title-font);
}

/* Modal Content */
.modal-content {
  /*background-color: #fefefe;*/
  background-color: black;
  color: var(--color-scheme);
  font-size: var(--normal-font-size);
  margin: auto;
  padding: 2%;
  border: 1px solid #888;
  width: 90%;
  height: 90%;
}

/* The Close Button */
.close {
  color: var(--color-scheme);
  float: right;
  font-size: 28px;
  font-weight: bold;
}


#projectdiv {
  height: 100%;
  width: 90%;
}

#projectdivcontent {
  height: 80%;
  width: 100%;
  overflow: auto;
}

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

td {
  vertical-align: top;
}

.tablepic {
  width: 30%;
}

.tablepicicon {
  display: block;
  width: 100%;
}

table {
  width: 100%;
}

.tableheader {
  text-decoration: underline;
  font-family: var(--title-font);
  font-size: var(--header-font-size);
}

#pdf_file_icon:hover {
  cursor:pointer;
}

::-webkit-scrollbar {
  width: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: black;
}

#bg {
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  background-image: var(--bg-url);
  background-size: 100% 100%;
  position: absolute;
  overflow: hidden;
}

.navbutton {
  padding: 5%;
  height:100%;
  width:100%;
  background: none;
  cursor: pointer;
  outline: none;
  border: 2px solid var(--color-scheme);
  color: var(--color-scheme);
  font-family: var(--title-font);
  font-size: var(--header-font-size);
  font-weight: bold;
}

.navbutton:before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 33%;
  height: 100%;
  top: 0;
  left: -33%;
  background: var(--color-scheme);
}

#circlecontent {
  position: absolute;
  top: 0;
  left: 0;
  height:60%;
  width:65%;
  color: var(--color-scheme);
  font-family: var(--normal-font);
  font-size: var(--normal-font-size);
  margin: 17.5% 17.5% 17.5% 17.5%;
  overflow: auto;
  z-index: 3;
}

#circlecontent h1 {
  font-family: var(--title-font);
  font-weight: bold;
}

table, td {
  border: 1px solid var(--color-scheme);
  font-family: var(--normal-font);
}

tr:hover td {
  background-color: var(--color-scheme);
  color: black;
  cursor:pointer;
}

/* Track */
::-webkit-scrollbar-track {
  background: black;
  border: 1px solid var(--color-scheme);
}

::-webkit-scrollbar-track:hover {
  background: var(--color-scheme);
  border: 1px solid var(--color-scheme);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--color-scheme);
}