body{
    background-color: #fff3d2;
}

#header{
    text-align: center;
}
#header h1{
    margin-bottom: 0px;
}

#userSection{
    position: relative;
    margin-bottom: 15px;
}

.results{
    position: absolute;        
    z-index: 999;
    width: 250px;
    box-sizing: border-box;
    background: #fff;
}

.results p{
    margin: 0;
    padding: 7px 10px;
    border: 1px solid #CCCCCC;
    border-top: none;
    cursor: pointer;
}

.results p:hover{
    background: #f2f2f2;
}

h2, h3, h4{
  margin-bottom: 5px;
}

.zoom {
  font-size: xxx-large;
  background-color: black;
  color: white;
  letter-spacing: 5px;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  display: none;
  width: auto;
  min-width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

.tooltip .tooltiptext .tooltip-bottom {
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

.tooltip-top {
  width: auto;
  min-width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

.tooltip-right {
  top: -5px;
  left: 105%;
}

.tooltip-left {
  top: -5px;
  right: 105%;
}

/* Show/hide the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  display: block;
}

.tooltip .tooltiptext:hover {
  display: none;
}