.tempelate-code{
  display: inline-block;
  width:100%;
  height:250px;
  font-size: 22px;
}
.section-devider{
  border: 1px solid black;
  height: 30px;
  border-radius: 5px;
  background-image: radial-gradient(rgb(223, 193, 203),purple);
  margin:5px 10px;  
}

details{
  margin-left:15px;
}
 


/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
*{
  margin:0;
  padding:0;  
  font-family: roboto;  
}

main {
  width:100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

header{
  display:flex; 
  background-color:rgba(91,194,239,0.7); 
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border:2px rgba(91,194,239,0.5) solid;
  border-radius: 2px;;
}

h1, h2{
  text-align: center;  
  text-shadow: 3px 2px rgba(91,194,239,0.9);
}

#main-nav{ 
  display:flex; 
}

.main-nav{ 
  display:flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center; 
}
  

#main-nav > ul{  
  list-style-type: none;
  display:flex;
  flex:1;
  padding:0;
  margin:.5em;
  color:white;
  justify-content: center; 
  align-content: center;
}  


#main-nav  li{  
 background-color:rgba(54, 163, 143, 0.9);
 margin:.5em;
 padding:.5em 3em;
 border-radius: .1em;
 text-align: center;
 width:70%; 
}

#tribute-section{
  background-image:linear-gradient(-45deg,#5BC2EF,rgba(91,194,239,0.7));
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
  border-radius: 2px; 
  border:2px rgba(91,194,239,0.5) solid;
}

#tribute-info{
  text-align: center;
}

#img-div{
  text-align: center; 
  margin:auto;
  padding:0;
}

figure{ 
  width:100%;
  margin:0;  
  padding:0;  
}

#image{
  max-width: 100%; 
}

figcaption{  
  text-align: center;
  padding-bottom:15px;
  font-size: 12px;  
}

a{
  text-decoration: none;
  color:rgba(0, 0, 0, 0.5);
  font-weight: 800;
}

a:hover  {
 color:rgba(91,194,239,0.9); ;
}

#img-div{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}

footer{  
  display:flex; 
  background-color:rgba(91,194,239,0.7);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border:2px rgba(91,194,239,0.5) solid;
  border-radius: 2px;
}

@media only screen and (min-width: 1000px){
*{
    margin:0;
    padding:0;  
    font-family: roboto;
} 
  
header{
    display:flex; 
    background-color:rgba(91,194,239,0.7);;
    min-height:125px;    
    justify-content: center;
    align-items: center;
    flex-direction: column;  
}

h1, h2{
    text-align: center;  
    text-shadow: 3px 2px rgba(91,194,239,0.9);    
}  
  
#main-nav{ 
    display:flex;
}    
  
#main-nav > ul{  
    list-style-type: none;
    display:flex;
    flex:3;
    padding:0;
    margin:.5em;
    color:white;
    justify-content: center; 
    align-content: center;
}    
  
#main-nav  li{ 
  padding: 2em;
  margin:1em;
  border-radius: .5em;
}

.tribute-container{
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  margin-bottom:-2em;
}
  
#tribute-section{
    background-image:linear-gradient(-45deg,#5BC2EF,rgba(91,194,239,0.3));
    display:flex;
    flex-direction: row;
    justify-content:center;
    align-items: center;
    padding:1em; 
}
  
#tribute-info{
    text-align: center;    
    font-size: 1.5em;
}
     
figure{
  display:flex;
  justify-content: center;
  align-content: center;
  flex-direction: row;
}

#image{
  max-width: 100%;     
  margin: 0 auto;
  border-radius: 5px;
  margin-top:25px;
  margin-bottom: 25px;
} 

.main-nav li:hover{   
  transform: scale(1.1);
}

span{
  display:inline-block;
}

#banter{
  position:absolute;
  margin-top:-300px;
  margin-left:400px;
  display:none;
  height: 5%;
  width: 10%;
  justify-content: center;
  align-content: center; 
}

.hov-effect:hover{   
  transform: scale(1.03);
  color:red;
}

#img-div:hover #banter{
  display:inline-block;
  background-color: rgba(240, 230, 140,0.5);
  padding:15px;
  border-radius: 5px;
  text-align: center;
  height:auto; 
}
}