/********************
YOUR STYLES
*******************/
body{
    background-color: #000;
}

#contact{
    background: url(../img/kitten.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Header */
header {
  display: flex;
  justify-content: center;
}

svg {
    margin-top: 10%;
    width: 6%;
    transform: rotate(90deg);
    fill: #fff;
    animation: blink 3s infinite ease-in-out;
}

@keyframes blink {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
    
}

/* Gallery Styling */

/*just for class*/
figure img {
    width: 300px;
    margin-bottom: 0;
}

main {
    display: flex;
    flex-wrap: wrap;
}

figure {
    background: #000;
    width: 100%;
    border: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    
}

.lg-backdrop {
    background: rgba(0,0,0,1);
}

.lg-image {
    box-shadow: 0 0 30px #333;
}

footer{
    background-color: #000;
    padding: 1em;
}

footer p{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 1em;
}

.icon{
    width: 2em;
    margin-left: .5em;
    margin-top: -1.5em;
}
/********************
MEDIA QUERIES
*******************/
/* Mobile: 320px = 20em */
@media screen and (min-width: 20em) { 
    
    
    .header-content{
        height: 314px;
    }
    
    header .header-content .header-content-inner h1 {
        text-shadow: 2px 2px 7px rgba(0,0,0,.8);
        margin-top: 2em;
    }
    

  
}

/* Tablet:  768px = 160em */
@media screen and (min-width: 30em)  {

figure img {
     width: auto;
    margin-bottom: 1em;
}
    
    .header-content{
        height: 500px;
    }
    
    header .header-content .header-content-inner h1 {
        text-shadow: 2px 2px 7px rgba(0,0,0,.8);
        margin-top: 3.5em;
        font-size: 3em;
    }

}

/* Desktop: 1280px = 80em */
@media screen and (min-width: 48em) { 
figure img {
    width: auto;
    margin-bottom: 1em;
}  

    header .header-content .header-content-inner h1 {
        margin-top: 2.5em;
        font-size: 6em;
    }
    
}


}