:root {
		box-sizing: border-box;
	}
	.borderwrap {
		border: 10px solid #0000ff; /* I had tried a couple of different methods to get this border around the page but this is the one that worked */
	}
	.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);
		padding-left: 15px;		
		padding-right: 15px;
		}
	.Footer {
		grid-area: footer;
		/* border-left: 10px solid #0024aa;
		border-right: 10px solid #0024aa;
		border-top: 10px solid #0024aa; */
        background: rgba(127,128,129,0.5);
		padding: 15px;
		}
	.wrapper { /* This is the mobile first approach which defaults to column stacking 
		border: 10em;
		border-color: #0024aa; */
		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 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 right 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: #0000ff;
        text-align: center;
        font-family: cursive;
        font-size: 90px;
        text-shadow: 2px 2px #7f8081;
        margin-top: -5px;
    }
	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: white;
    }
	h5 {
        text-align: center;
        font-family: trebuchet MS, sans-serif;
        font-size: 24px;
        color: black;
    }
	h6 {
        text-align: center;
        font-family: trebuchet MS, sans-serif;
        font-size: 24px;
        color: white;
    }
    .dba {
        color: #0000ff;
        text-align: center;
    }
	a[href^=tel]{
		text-decoration: inherit;
		color: inherit;
	}
    p {
		color: black; /* paragraph font color */
    }
    .fullwidth {
		background: white;
		background:rgba(255,255,255,0.7);
        padding: 15px;
    }
    .fullwidth2 {
        padding-left: 15px;
        padding-right: 15px;
    }
    .center {
        text-align: center;
    }
    .spacing {
		margin-left: 2px;
		}
    .fine {
        font-family: trebuchet MS, sans-serif;
        font-size: 8pt;
    }