:root {
	--main-radius:5px;
	--main-padding:5px;
}

img {
  width: 600px;
  object-fit: scale-down;
}

.navLink{
  white-space: pre;
  display: inline;
}

.container{
	display:grid;
	height:100vh;
	grid-template-columns: 3fr 1fr;
	grid-template-rows: 1fr 3fr 1fr 1fr;
	grid-template-areas: 
		"topAd topAd"
		"content sideAd"
		"navigationButtons sideAd"
		"bottomAd bottomAd";
	grid-gap: 0.2rem;
	font-family:"Inter", sans-serif;
	color:#004d40;
	text-align:center;
}

#topAd{
	grid-area: topAd;
	border-radius:var(--main-radius);
	padding-top:var(--main-padding);
}

#content{
	grid-area: content;
	border-radius:var(--main-radius);
	padding:var(--main-padding);
}

#sideAd{
	grid-area: sideAd;
	border-radius:var(--main-radius);
	padding-top:var(--main-padding);
}

#navigationButtons{
	grid-area: navigationButtons;
	border-radius:var(--main-radius);
	padding-top:var(--main-padding);
}

#bottomAd{
	grid-area: bottomAd;
	border-radius:var(--main-radius);
	padding-top:var(--main-padding);
}

#content3{
	grid-area: content3;
	border-radius:var(--main-radius);
	padding-top:var(--main-padding);
}


@media only screen and (max-width:550px) {
  
	html,body { margin:0; padding: 0; }
	
	figure { margin: 5px;}
	
    img {
		max-width: 100%;
		min-width: 250px;
		height: auto;
		object-fit: scale-down;
    }
	.container {		
		height: auto;
		grid-template-columns: 1fr;
		/*grid-template-rows: 1fr 1fr 3fr 1fr 1fr;*/
		grid-template-rows: auto auto 1fr auto auto;
		grid-template-areas:
			"topAd"
			"sideAd"
			"content"
			"navigationButtons"
			"bottomAd";
		font-size:larger;
	}
}