body {
    font-family: 'Merriweather', serif;
    margin: 0;



}

img {
    max-width: 100%;
}
.pic{
	width:400px;
	height:217px;
	background: url(images/art-black-and-white-controller-450x300.jpg) no-repeat;
}
.text{
	width:340px;
	height:217px;
	background:#FFF;
	opacity:0;
}
.pic:hover .text
{
	opacity:0.6;
	text-align:justify;
	color:#000000;
	font-size:20px;
	font-weight:700;
	font-family:"Times New Roman", Times, serif;
	padding:30px;
}


legend {
    font-family: monospace;
}

input:focus {
    background-color: chartreuse;
}

textarea:focus {
    background-color: chartreuse;
}


form {
    background-color: rebeccapurple;
    border-width: 4rem blue;

}
.page-title,
.nav-links
{
    color: #003beb;
}
.navbar {
    background-color: #ebf0ff;
}

/*  grids */

main {
	display: grid;
}

/* hero content */

.content {
	display: grid;
}

/* about content */

.about-content {
	display: grid;
}

/*  gallery */

.gallery {
	display: grid;
}

figure {
    display: grid;
}

/*  article */

article {
	display: grid;
}

/* form container */
.form-container {
	display: grid;
}

/* footer */

footer {
	display: grid;
}

/*  layout */

/*   mobile is the default layout*/

/* tablet layout >=48rem (768px) */

@media screen and (min-width: 48rem) {
    
    .mobile-first {
        display: none;
    }

	/*      hero content */
    
    .content {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    .content picture,
    .content p,
    .about-content {
        grid-column: 2/3;
    }

	/*	about content */

	/*	gallery */
    
    figure {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-items: center;
    }

	/*	article */
    
    article {
        grid-template-columns: 1fr 48rem 1fr;
    }
    	.story-body:first-letter {
   font-size: 65px;
    line-height: 1;
    font-weight: bold;
    margin-right: 9px;
    color: black;
    font-family: "Times New Roman", Times, serif;
    text-sh

    article h1,
    article .story-body {
        grid-column: 2/3;
    }

	/*	form */
    
    .form-container {
        grid-template-columns: 1fr 48rem 1fr;
    }
    
    .form-container h1,
    form {
        grid-column: 2/3;
    }


}

/* wide screen layout >=64rem (1024px) */

@media screen and (min-width: 64rem) {

	/*  hero content */

	/*	about content */

	/*	gallery */
    .gallery {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    .gallery h1 {
        grid-column: 1/4;
    }
    
    figcaption {
        margin-left: 1rem;
    }

	/*	article */

	/*	form */

}