/*
This is the last piece of code that Kai wrote before leaving our group (long before our readings in Clean Code about how to properly name and comment things for understanding).
We have tried our best to fix it and to work with it, but since we couldn't ask her any questions to make it as pretty and efficient as possible, we made the choice to mostly leave it alone.
It works as a whole, but some of the naming and choices are a bit messy/repeated. 
*/

body {
    background-color: rgb(56, 60, 62);
    color: rgb(230, 229, 224);
    margin-left: 5%;
    margin-right: 5%;
    font-size: 20px;
    font-family: Verdana, Geneva, sans-serif;
}

h1 {
    padding-top: 1em;
    padding-bottom: 1em;
    background-color: rgb(140,187,221);
    color: rgb(56,60,62);
    text-align: center;
}

h2 {
    font-size: 40px;
    text-align: center;
}

h3 {
    font-size: 30px;
    text-align: center;
}

h4 {
	color: rgb(192,255,0);
    background-color: rgb(192,255,0);
    width: 100px;
    float: left;
    position: relative;
    left: 40%;
    font-size: 50px;
}
h5 {
	background-color: rgb(75, 105,127);
    float: left;
    width: 45%;
}

.content a {
	color: rgb(140, 187, 221);
}

p {
    margin-right: 10px;
    margin-left: 10px;
}

.note {
    font-size: 15px;
    margin-right: 10px;
    margin-left: 10px;
}

nav {
	background-color: rgb(75, 105, 127);
	position: sticky;
}

nav ul {
    list-style-type: none;
    overflow: hidden;
}

nav li {
    float: left;
}

nav li a {
    display: block;
    color: rgb(230, 229, 224);
    font-size: 30px;
    text-decoration: none;
    text-align: center;
    padding: 20px 16px;
}

nav li a:hover {
    color: rgb(56, 60, 62);
	background-color: rgb(192,255,0);
	
}

#current {
    background-color: rgb(192, 255, 0);
	color: rgb(56, 60, 62);
}

#current a {
	color: rgb(56, 60, 62);
}

#metadata ul {
    list-style-type: none;
}

#metadata li {
    margin-bottom: 7px;
    margin-right: 10px;
}

.main-content {
    border: 4px solid rgb(140, 187, 221);
    border-radius: 5px;
    float: left;
    padding: 5px;
    width: 28%;
    margin: 30px;
}
.main-content a {
	color: rgb(140, 187, 221);
}

.selectorBox {
	float: right;
	border: 4px solid rgb(140, 187, 221);
    border-radius: 5px;
    float: right;
    padding: 10px;
    margin: 10px;
    width: 28%;
	clear: left;
	width: 600px;
}
div.homebase {
    clear: left;   
    padding-bottom: 10px;  
}


figure {
    float: left;
    margin-right: 30px;
}

figcaption {
    text-align: center;
}

img {
    border: 20px solid rgb(140,187,221);
}

button:hover{
    cursor: pointer;
}

button.back{
    background-color: rgb(140,187,221);
    margin: 30px;
    font-size: 30px;
    color: rgb(56, 60, 62);
}

button.save{
    background-color: rgb(140,187,221);
    margin:30px;
    font-size: 30px;
    color: rgb(56, 60, 62);
}

div.cite {
    background-color: rgb(140,187,221);
    font-size: 15px;
    color:rgb(56,60,62);
    width: 100%;
    float:left;
    padding: 10px;
    margin: 10px;
    text-align: center;
}

div.selectorBox{
    background-color: rgb(140, 187, 221);
    width: 600px;
    float: right;
    padding: 10px;
}

div.main-content{
    border: 4px solid rgb(140, 187, 221);
    background-color: rgb(75, 105, 127);
    border-radius: 5px;
    float: left;
    padding: 5px;
    width: 25%;
    margin: 30px;
}

figcaption {
    color: rgb(230,229,224);
}

.dropdown {
  position: relative;
  display: inline-block;
  padding: 33px;
}

button.submit{
    margin: 20px;
    font-size: 40px;
    background-color: rgb(192, 255, 0);
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgb(75, 105, 127);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
  font-size: 10px;
}

.dropdown-content p:hover {
    background-color: rgb(192, 255, 0);
    color: rgb(56,60,62);
}

.dropdown:hover .dropdown-content {
  display: block;
}