* {
    border: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box; 
}

.hidden { 
    display: none; 
}

html, body { 
    height: 100% 
}

body { 
  font-family: sans-serif;
  background-color: black;
  color: black;
  background-image: url('../images/fire_emblem_background.png');
  background-size: cover;
}

/* style the header */
header {
    background-color: goldenrod;
    position: sticky;
    top: 0;
    text-align: center;
}

#main-logo { 
    width: 300px; 
    padding: 10px 0; }

/* main section styles */
#heroes-nav { 
    text-align: center; 
    background-color: #303034;
    
    /* added a background image to the nav element */
    background-image: url('../images/summoning_gate.png');
    background-repeat: no-repeat; 
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
}

.heroes { 
    list-style-type: none; 
}

.heroes li { 
    position: relative;
    display: inline-block; 
    height: 220px;
    margin: 10px 8px;

    background-color: rgba(46, 23, 222, 0.865);
    text-align: center;
    overflow: hidden;
}

.heroes li:hover .gold-bumper { 
    height: 70px;
}

.heroes li:hover h5 {
    color: black;
}

.heroes li h5 {
    position: relative;
    padding: 15px;
    color: gold;
    font-size: medium;

    z-index: 50;
}

.heroes li a {
    text-decoration: none;
}

.heroes li img { 
    width: 150px; cursor: pointer; 
}

.sprite {
    width: 150px;
    height: 150px;

    background-image: url('../images/fesprites.jpg');
}

.sprite:hover { 
    background-position-y: -150px !important;
}

#clair { 
    background-position: -150px 0; 
}

#eirika { 
    background-position: -300px 0; 
}

#larachel { 
    background-position: -450px 0; 
}

#ike { 
    background-position: -600px 0; 
}

#soleil { 
    background-position: -750px 0; 
}

.gold-bumper { 
    position: absolute;
    height: 6px; 
    width: 100%;
    background-color: goldenrod;

    transition: all 0.5s ease;
}

article {
    padding: 20px; 
}

article h3 {
    font-size: 2em;
    text-align: center;
    margin-bottom: 14px;
}

article p {
    width: 80%;
    font-size: 18px;
    line-height: 1.2;
    text-align: center;
    margin: 0 auto;
}

/* style the footer */
footer {
    color: black;
    padding: 20px 0;
    text-align: center;
}

.sticky_footer {
    position: sticky;
    top: 100%;

    height: 80px;
    background-color: goldenrod;
}

/* lightbox styles */
.lightbox {
    display: none;
    width: 100vw; /*viewport width = width of the browser window */
    height: 100vh; /*viewport height = height of the browser window */

    position: absolute;
    top: 0;
    left: 0;

    background-color: rgba(0,0,0,0.85);
    background-repeat: no-repeat;

    background-position: left;
    z-index: 51;
}

.lb_close {
    color: rgb(255, 255, 255);
    font-size: 2em;

    text-decoration: none;

    position: relative;
    top: 10px;
    left: 97%;
    font-weight: bolder;
}

.lb_close:hover {opacity: 0.5; }

.lightbox article {
    width: 55%;
    margin-left: 40%;
    padding-top: 50px;
}

.lb_text, .lb_heading {text-align: left;}
.lb_text {line-height: 1.6;
    margin-left: 0;
    padding-top: 2em;
    color: white;
}

.lb_heading {color: white;}

#lightBox {
    background-image: url('../images/marth_legendary_full.png');
}

/* toggle the lightbox on */
.lightbox:target {display: block}

/* .lightbox#lightBox { display : block } */

#lightBox2 {
    background-image: url('../images/clair_full.png');
}

#lightBox3 {
    background-image: url('../images/eirika_brave_full.png');
}

#lightBox4 {
    background-image: url('../images/larachel_halloween_full.png');
}

#lightBox5 {
    background-image: url('../images/ike_rd_full.png');
}

#lightBox6 {
    background-image: url('../images/soleil_full.png');
}