html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
	background-color: #ffffff;
    font-family: bahnschrift, sans-serif;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 15rem 5rem 4rem auto;
    grid-template-areas:
        "logo"
        "aside"
		"header"
        "nav"
        "article"
        "footer";
    gap: 0.5rem;
    width: 100vw;
    min-height: 100vh;
    background-color: #f0f0f0;
}

@media (min-width: 1280px) {
    body {
		background-color: #ffffff;
		font-family: bahnschrift, sans-serif;
		grid-template-rows: auto 3rem auto;
        grid-template-columns: 14rem 1fr 1fr;
        grid-template-areas:
            "logo header header"
            "aside nav nav"
            "aside article article"
            "footer footer footer";

        font-size: 1.3rem;
    }
}



header {
grid-area: header;
background-color: #f54242;
}

nav {
grid-area: nav;
background-color: #ededed;
}

.logo {
	grid-area: logo;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
}

aside {
grid-area: aside;
background-color: #f54242;
}

article {
	grid-area: article;
	background-color: #fcfbf0;
}

footer {
text-align: center;
grid-area: footer;
background-color: #f54242;
}

img {
width: 250px;
position: relative;
top: 0;
left: 0;
}

#img_1 {
	position: relative;
	left: 0px;
	width: 200px;
	height: auto;
}

#pic_1 {
font-size: small;
color: #999999;
}

#pic_1 {
font-size: small;
color: #999999;
}

header, nav, aside, article {
	padding-left: 1rem;
	padding-right: 1rem;
}