body{
    background-color: #e5e5e5;
}
.head{
    font-family: Tahoma;
    font-weight: 200;
    text-align: center;
}
.first{
    font-family: Helvetica;
    font-weight: 100;
    text-align: center;
}
#hydro{
    text-align: center;
    padding: 9px;
    border: darkblue 2px solid;
    transition: border, background-color, color 1s;
}
#hydro:hover{
    border: #ffe100 2px solid;
    background-color: darkBlue;
    color: white;
}
#petrol{
    padding: 9px;
    border: #87531b 2px solid;
    transition: border, background-color, color 1s;
}
#petrol:hover{
    border: black 2px solid;
    background-color: #87531b;
    color: white;
}
#nuclear{
    text-align: center;
    padding: 9px;
    border: black 2px solid;
    transition: border, background-color, color 1s;
}
#nuclear:hover{
    border: #ffe100 2px solid;
    background-color: #1b1b1c;
    color: #ffe100;
}
a{
    color: black;
    text-align: center;
    text-decoration: none;
    border: none;
    background: transparent;
} 

p.phrase{
    font-family: Helvetica;
    font-weight: 100;
    text-align: center;
    font-size: 18px;
}
.intro h2{
    font-size: 22px;
}
p.info{
    font-family: Helvetica;
    font-weight: 100;
    font-size: 30;
}
img.how{
    height: 256;
}
img.how:hover{
    
}
span{
    font-style: italic;
}
p.expl{
    font-family: helvetica;
    font-weight: 100;
}
div.content h3{
    font-family: helvetica;
    font-weight: 100;
}
.tooltip{
   position:relative;
   display:inline-block;
   height:100px;
}
/*.expl{
    visibility: hidden;
    width: 422px;
    background-color: transparent;
    color: black;
    text-align: center;
    border-radius: 5px;
    position: absolute;
    z-index: 1;  
    
    
    /* Position the text
       relative to its container,
       div.tooltip 
       
    left: 550px;
    top: 69px;
    padding: 9px;
}
.tooltip:hover .expl{
    visibility: visible;
}*/