/*Main*/

body {
  min-height: 100%;
  min-width: 1024px;
  width:100%;
  margin-top:3em;
  padding:0;
  background-size: cover;  
}

#spacer { 
  margin:0;
  padding:0;
  height:50px; 
}

/*Header*/

h1 {
  color:black;
  font-family:"raleway";
  margin-left:-5em;
  font-size:3em;
  font-weight: bold;
  text-shadow: -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white; 
}
#text {
  color:white;
  margin-top:-1em;
  margin-left:8em;
  font-size: 2.5em;
  font-family:"raleway";
}

a {
  color:black;
  text-shadow: -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white;
}

/*Search*/

#cross2 {
  cursor:pointer;
  position:relative;
  font-size:2em;
  color:black;
  margin-top:6px;
  float:left;
  margin-left: -1em;
  display:none;
  text-shadow: -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white; 
}
#cross2:hover {
  font-weight: bold;
}
.searchbut {
  cursor:pointer;
  position:absolute;
  margin-left:-9em;
  height:2.6em;
  width:12em;
  z-index:1;  
  font-size:1.5em;
  text-align:center;
  color: black;
  font-family:"cabin";  
  border:solid;
  border-radius:25px;
  box-shadow: 0px 0px 0px 3px white;
  padding:10px;
  box-sizing:border-box;  
  transition: all 0.5s ease;
  text-shadow: -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
}
#searchicon {
  cursor:pointer;
  background:none;
  border:none;
  outline:none;
  position:relative;
  font-size:1.5em;
  color:black;
  margin-top:-7px;
  margin-left:-16px;
  float:left;
  display:none;
  transition: 0.5s ease;
  z-index:1;
  text-shadow: -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white; 
}
#searchicon:hover {
  color:white;
}
.searchtext {
  padding:1em;
  margin:-1em;
  z-index:1;
  color:white;
}
.searchtext:hover {
  font-weight: bold;
}
.form-control {
  margin-left:7px;
  margin-top:-2px;
  border:none;
  font-size:1em;
  color: black;
  display:none;
  transition: .5s ease;
}


/*Random*/

#cross1 {
  cursor:pointer;
  position:relative;
  font-size:2em;
  color:black;
  margin-top:6px;
  float: left;
  margin-left: 5em;
  display:none;
  text-shadow: -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white;
}
#cross1:hover {
  font-weight: bold;
}
.randbut {
  cursor:pointer;
  position:absolute;
  height:2.6em;
  width:8em;
  margin-left:4em;
  z-index:1;  
  font-size:1.5em;
  text-align:center;
  color: black;
  font-family:"cabin";  
  border:solid;
  box-shadow: 0px 0px 0px 3px white;
  border-radius:25px;
  padding:10px;
  box-sizing:border-box;  
  transition: all 0.5s ease;
  text-shadow: -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
}


.randbut2 {
  cursor:pointer;
  position:absolute;
  height:2.6em;
  width:8em;
  margin-left: 14em;
  z-index:1;  
  font-size:1.4em;
  text-align:center;
  color: black;
  font-family:"cabin";  
  border:solid;
  box-shadow: 0px 0px 0px 3px white;
  border-radius:25px;
  padding:10px;
  box-sizing:border-box;  
  transition: all 0.5s ease;
  text-shadow: -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
}


.randtext {
  padding:1em;
  margin:-1em;
  z-index:1;
  color:white;
}
.randtext:hover {
  font-weight: bold;
}
.randframe {
  display:none;
  border:none;
}


/*Search Results*/

.resultsbox {
  position:absolute;
  border:solid;
  border-radius:55px;
  box-shadow: 0px 0px 0px 3px white;
  color:black;
  height:auto;
  width:90%;
  box-sizing:border-box;
  margin-left:15em;
  margin-top: 4em;
  transition: .5s ease;
  opacity:0;
}
.temp {
  margin:20px;
  padding:10px;
  background-color:white;
  color:black;
  border-radius:15px;
  font-family:"cabin";
  transition: .5s ease;
}