html {
  color: white;
  display: table;
  font-family: sans-serif;
  height: 100%;
  width: 100%;
}

body {
  display: table-cell;
  margin: 2em auto;
  background-color: #2d3436;
}

#particles-js {
  position : absolute;
  width:100%;
  height:100%;
  z-index:-1;
}

.loadercontainer {
  padding-top: 1.5em;
  display: flex;
  justify-content: center;
}

.loader {
  border: 16px solid #4b4b4b;
  border-top: 16px solid #38E46E; 
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

h1 {
  padding-left: 5px
}

a {
  color: #38E46E
}

a:hover {
  color: #38FD6E
}

.searchfield {
  background-color: #4b4b4b;
  color: white;
  flex-grow: 2; 
  width: 100%; 
  height: 100%; 
  text-align: left;
  font-size: 150%; 
  border: none; 
  outline: none;
}

.dropbutton {
  font-family: Helvetica; 
  width: 13em; 
  height: 100%; 
  font-size: 150%; 
  border: none; 
  color: white;
  cursor: pointer;
  background-color: rgba(83, 83, 83, .5);
  padding-left:1rem;
  padding-top: .5rem;
}
.dropbutton:hover {
  background-color: #4b4b4b;
}


.searchbutton {
  font-family: Helvetica; 
  width: 25%; 
  height: 100%; 
  font-size: 150%; 
  border: none; 
  color: #3d3d3d;
  cursor: pointer;
  background-color: #38E46E;
  margin-left: .5rem;
}

.searchform {
  display: flex; 
  flex-direction: row; 
  border: none; 
  padding:2px;
  width: 50%;
  height: 100%;
}

.searchform input[type="text"] {
  box-sizing: border-box;
  padding-left: 10px;
}

.searchform input::placeholder {
  padding: 10px;
}

th {
  text-align: left;
  font-size: 150%
}

button:hover {
  background-color: #38FD6E;
  color: white;
}

/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
  }
}