/* CSS Variables */
:root {
	--primary: #ddd;
	--dark:    #333;
	--light:   #fff;
	--shadow:  0 1px 5px rgba(104, 104, 104, 0.8);
}
 
 html {
	 box-sizing: border-box;
	 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	 color: var(--dark);
 }
 
 body{
	 background:#222222;
     color:#485e74;
	 margin: 30px 50px;
	 line-height:1.6;
 }
 
 .btn {
	 background: var(--dark);
	 color: var(--light);
	 padding: 0.6rem 1.3rem;
	 text-decoration: none;
	 border: 0;
 }
 
 img {
	 max-width: 100%;
 }
 
 .wrapper {
	 display: grid;
	 grid-gap: 20px;
 }
 
 /* Navigation */
 .main-nav ul {
	 display: grid;
	 grid-gap: 20px;
	 padding: 0px;
	 list-style: none;
	 grid-template-columns: repeat(4, 1fr);
 }
 
 .main-nav a {
	 background: var(--primary);
	 display: block;
	 text-decoration: none;
	 padding: 0.8rem;
	 text-align: center;
	 color: var(--dark);
	 text-transform: uppercase;
	 font-size: 1.1rem;
	 boxshadow: var(--shadow);
 }
 
 .main-nav a:hover {
	 background: var(--dark);
	 color: var(--light);
 }
 
 /* Top Container */
 .top-container {
	 display: grid;
	 grid-gap: 20px;
	 grid-template-areas:
	   'showcase showcase top-box-a'
	   'showcase showcase top-box-b';
 }
 
 /* Showcase */
 .showcase {
	 grid-area: showcase;
	 min-height: 400px;
	 background: url(img/wallbedsofalabama.jpg);
	 background-size: cover;
	 background-position: center;
	 padding: 3rem;
	 display: flex;
	 flex-direction: column;
	 align-items: start;
	 justify-content: center;
	 box-shadow: var(--shadow);
	 color: white;
 }
 
 .showcase h1 {
	 font-size: 4rem;
	 margin-bottom: 175px;
	 color: var(--light);
	 /* Top Box */
 } 
	 .top-box {
		 background: var(--primary);
		 display: grid;
		 align-items: center;
		 justify-items: center;
		 box-shadow: var(--shadow);
		 padding: 1.5rem;
	 }
	 
	 .top-box .price {
		 font-size: 1.5rem;
	 }
	 
 .top-box-a {
	 grid-area: top-box-a;
	 
 }
 
 .top-box-b {
	 grid-area: top-box-b;
 }
 
 /* Boxes */
 .boxes {
	 display: grid;
	 grid-gap: 20px;
	 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
 
 .box {
	 background: var(--primary);
	 text-align: center;
	 padding: 1.5rem 2rem;
	 box-shadow: var(--shadow);
 }
 
 /* Info */
 .info {
	 background: var(--primary);
	 box-shadow: var(--shadow);
	 display: grid;
	 grid-gap: 30px;
	 grid-template-columns: repeat(2, 1fr);
	 padding: 3rem;
 }
 .info ul li a{
	 text-decoration:none;
 }
 
 /* Portfolio */
 .portfolio {
	 display: grid;
	 grid-gap: 20px;
	 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
 
 .portfolio img {
	 width: 100%;
	 background: var(--dark);
	 color: var(--light);
 }
 
 /* Footer */
 footer {
	 margin-top: 2rem;
	 background: var(--dark);
	 color: var(--light);
	 text-align: center;
	 padding: 1rem;
 }
 
 /*  Media Queries */
 @media(max-width: 700px){
	 .top-container {
		 grid-template-area:
		 'showcase showcase'
		 'top-box-a top-box-b';
	 }
	 
	 .showcase h1 {
		 font-size: 2.5rem;
	 }
	 
	 .main-nav ul {
		 grid-template-columns: 1fr;
	 }
	 
	 .info {
		 grid-template-columns: 1fr;
	 }
	 .info .btn {
		 display: block;
		 text-align: center;
		 margin: auto;
	 }
 }
 @media(max-width: 500px){
	 .top-container {
		 grid-template-areas:
		 'showcase'
		 'top-box-a'
		 'top-box-b';
	 }
 }
 *{
  box-sizing: border-box;
}