:root {
		box-sizing: border-box;
	}
	html { 
		background: url(/images/beer3.jpg) no-repeat center center fixed; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	.Heading {
		grid-area: header;
		background: white; /* Fallback color */
		background: rgba(255,255,255,0.7); /* Red, Green, Blue, Opacity */
		/*margin-top: 10px;*/
		padding-top: 15px;
		padding-left: 5px;		
		padding-right: 5px;
		border-top-left-radius: 1.5em;
		border-top-right-radius: 1.5em;
		}
	.Content {grid-area: main;}
	.RightSide {
		grid-area: right; /* the name 'right' could be anything, I used this name to indicate where on the page it was going */
		background: gray;
        background: rgba(10,10,10,0.5);
		/*margin-top: 10px;*/
		padding-left: 15px;		
		padding-right: 15px;
		}
	.Footer {
		grid-area: footer;
		background: white;
		background: rgba(255,255,255,0.7);
		padding: 15px;
		border-bottom-right-radius: 2em;
		border-bottom-left-radius:  2em;
		}
	.wrapper { /* This is the mobile first approach which defaults to column stacking */
		display: grid;
		grid-template-areas: /* the names below indicate corespondingly with the area names above to indicate the space on the page that they take up */
			'header header header header header header'
			'main main main main main main'
			'right right right right right right'
			'footer footer footer footer footer footer';
	}
	@media (min-width: 31em) and (max-width: 48em)  { /* This query further controls the margin and stacking on tablets */
    .wrapper {
		grid-template-areas: /* the names below indicate corespondingly with the area names above to indicate the space on the page that they take up */
			'header header header header header header'
    		'main main main main main main'
			'right right right right right right'
			'footer footer footer footer footer footer';
        width: 60%; 
    	margin-left: auto ; /* Without this and the following line, the responsiveness stopped working */
		margin-right: auto ;
		}
	}
    @media (min-width: 48em) { /* em = 768px (or whatever px) / 16 (typical browser font size) This query puts a margin around the page on large screens such as a desktop */
    .wrapper {
		grid-template-areas: /* the names below indicate correspondingly with the area names above to indicate the space on the page that they take up */
			'header header header header header header'
			'main main main main main right'
			'footer footer footer footer footer footer';
        width: 70%; 
		margin-left: auto ; /* Without this and the following line, the responsiveness stopped working */
		margin-right: auto ;
		}
	}
	h1 {
        color: #3d2b1f;
        text-align: center;
        font-family: trebuchet MS, sans-serif;
        font-size: 36px;
        text-shadow: 2px 2px #cb410b;
        margin-top: -5px;
        font-style: italic;
    }
	h2 {
        text-align: center;
        font-family: trebuchet MS, sans-serif;
        font-size: 20px;
        color: #D67900;
        text-shadow: 2px 2px #025203;
        margin-top: -5px;
        /*margin-bottom: -0px;*/
    }
	h3 {
        color: #025203;
        text-align: center;
        font-family: trebuchet MS, sans-serif;
        font-size: 20px;
        text-shadow: 2px 2px #D67900;
        margin-top: -5px;
        font-style: italic;
    }
	h4 {
        text-align: center;
        font-family: trebuchet MS, sans-serif;
        font-size: 20px;
        color: #de8a05;
        text-shadow: 1.5px 1.5px #320707;
    }
	h5 {
        text-align: center;
        font-family: trebuchet MS, sans-serif;
        font-size: 24px;
        color: #320707;
        text-shadow: 1px 1px #761818;
        margin-top: -2px;
        margin-bottom: -1px;
    }
	h6 {
        text-align: center;
        font-family: trebuchet MS, sans-serif;
        font-size: 16px;
        color: #761818;
        text-shadow: 1px 1px #320707;
        margin-top: -1px;
        margin-bottom: -1px;
    }
	a[href^=tel]{
		text-decoration: inherit;
		color: inherit;
	}
    p {
		color: black; /* paragraph font color */
    }
    p.rs {
		color: white; /* paragraph font color */
    }
    .fullwidth {
		background: white;
		background:rgba(255,255,255,0.7);
        padding: 15px;
    }
    .fullwidth2 {
		background: white;
		background:rgba(255,255,255,0.7);
        padding-left: 15px;
        padding-right: 15px;
		border-bottom-left-radius: 1.5em;
		border-bottom-right-radius: 1.5em;
    }
    .center {
        text-align: center;
    }
    .spacing {
		margin-left: 2px;
		}
    .fine {
        font-family: trebuchet MS, sans-serif;
        font-size: 8pt;
    }