body {
	background-color: lightgray
}

h1 {
  	color: black;
  	font-family: Roboto;
	 	font-size: 150%;
	 	letter-spacing: 0.1em;
    text-transform: lowercase;
}

h2 {
  	color: white;
  	font-family: Roboto;
	 	font-size: 80%;
	 	letter-spacing: 0.1em;
    text-transform: lowercase;
    position: fixed;
    right: 10px;
    top: 10px;
    width: 50%;
    text-align: right;
}

h3 {
    color: white;
    font-family: Roboto;
    font-size: 100%;

}

h4 {
  color: white;
  font-family: Raleway;
  font-size: 80%;
  line-height: 150%
}

p {
    color: white;
    font-family: Roboto;
    font-size: 80%;
    text-transform: lowercase;    
}

a:link {
    color: white;
    font-family: Roboto;
    font-size: 100%;
}

a:visited {
  color: white;
}

a:hover {
  background-color: black;
}

a:active {
  background-color: black;
} 

li {
  color: white;
  font-family: Roboto;
  font-size: 80%;
  display: inline-block;
  padding-right: 20px;
}


* {
  box-sizing: border-box;
}

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: black;
   text-align: center;
}

.bar1 {
   position: fixed;
   left: 0;
   bottom: 70px;
   width: 50%;
   text-align: left;
   padding-left: 0.5em;
}

.bar2 {
   position: fixed;
   right: 0;
   bottom: 70px;
   width: 50%;
   text-align: right;
   padding-right: 1em;
}

.box {
  float: left;
  width: 50%;
  font-family: Roboto;
  color: gray;
  font-size: 200%;
  text-align: center;
  
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

#text {
  color: gray;
  font-family: Roboto;
  font-size: 80%;
  text-transform: lowercase;
  padding-top: 20%;
}

#randomImage {
  max-width: 400px;
  max-height: 400px;
  display: auto;
  float: center;
}

#button1 {
  color: white;
  background-color: #555555;
  font-family: Roboto;
  font-size: 12px;
  float: left
}

#button2 {
  color: white;
  background-color: #555555;
  font-family: Roboto;
  font-size: 12px;
  float: right
}

.modal-content  {
  color: white;
  font-family: Roboto;
  font-size: 120%;
  text-align: left;
  padding-left: 20%;
  padding-right: 20%;
  padding-top: 5%;

}

#btn-close-modal {
  font-family: Roboto;
  width: 100%;
  text-align: center;
  padding-left: 40%;
  padding-right: 40%;
  cursor: pointer;
  color: gray;
  padding-top: 2%;
  text-transform: lowercase;
}