*{margin: 0; padding: 0;}


body{
		display: flex;
		flex-direction: column;
		justify-items: center;
		min-height: 100vh;
		max-width: 1500px;
		margin: auto;
		font-family: verdana, geneva, sans-serif;
		color: rgb(50,50,50)
		}


header{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		background-color: rgb(102,0,0);
		}		
		
		
nav{
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: "Arial Narrow", sans-serif;
		background-color: rgb(0,102,102);
		color: rgb(255,255,255);
		}
		
nav ul{
		display: flex;
		list-style-type: none;
		line-height: 2em;
			}

nav li{
		padding: 1em 1em;
		}


nav a{
		color: rgb(255,255,255);
		text-decoration: none;
		}
		
#current-page {
		color: rgb(50,50,50);
		background-color: rgb(213,255,255);
		font-weight: bold;
		}





h1{
		background-color: rgb(102,0,0);
		font-size: 1.7em;
		color: rgb(255,255,255);
		padding: .3em 0.5em;
		}

h2{
		background-color: rgb(0,102,102);
		font-size: 1.3em;
		color: rgb(255,255,255);
		padding: .3em 0.6em;
		}
		
h3{
		font-size: 1em;
		padding: 1em 1em 0.5em 0;
		}

p{
		padding: 0 0 .5em 0;
		}		
		
ul{
		padding: 0 0 0 1em;
		line-height: 2em;
		}


@media (min-width: 1200px){

h1{	
		font-size: 1.5em;
		}
h2{	
		font-size: 1.4em;
		}
h3{	
		font-size: 1.2em;
		}
p{	
		font-size: 1.2em;
		}
ul{	
		font-size: 1.2em;
		}
									}





div{
		display: flex;
		flex-wrap: wrap;
		padding: 1em;
		}

.vert{
		display: flex;
		flex-direction: column;
		
		}

header img {
		max-width: 100%;
		height: auto;
		}
		
p img {
		float: left;
		margin: 0 1em 0 0;
			
		}
		
#graphic {
		width: 100%;
		height: auto;
		padding: 0 0 1em 0;
		
		}
		
#graphic img {
		width: 100%;
		height: 100%;
		}



.carousel {
		background-color: rgb(213,255,255);
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		}
		
.card {
		display: inline-block;
		}

.card img {
		
		box-shadow: 5px 5px 5px teal;
		margin: 0 10px;
		}



footer{
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: "Arial Narrow", sans-serif;
		background-color: rgb(102,0,0);
		color: rgb(255,255,255);
		}

footer ul {
		display: flex;
		list-style-type: none;
		line-height: 2em;		
		}

footer li{
		padding: 0 1em;
		font-family: "Arial Narrow", sans-serif;
		}

footer a{
		color: inherit;
		text-decoration: none;
		}

#current-page-foot {
		color: rgb(50,50,50);
		background-color: rgb(255,213,213);
		font-weight: bold;
		}












/* 
for iphone12, the only hardware to squash imgs along horizontal plane
"graphic img" height changed from auto to 100% but the container 
still restricted to auto - 13spet21
*/