/*
Jasmine Frye
Athenaeum Stylesheet
*/

img		{max-width: 100%;
		height: auto;}

body	{margin: 50px 0px 50px 100px;
		font-size: 18px;
		background-color: #680121;
		color: #9fd5b3;}

header	{margin-bottom: 50px;
		text-align: center;}

main	{margin-right: 200px;
		margin-bottom: 100px;}

nav	a	{padding: 5px 10px;
		font-weight: bold;
		font-style: italic;
		text-decoration: none;
		text-shadow: 3px 3px #3c4552;
		color: #9fd5b3;}	
nav a:hover	{background-color: #9fd5b3;
			border-radius: 15px;
			padding: 5px 10px;
			text-decoration: none;
			text-shadow: none;
			color: #3c4552;}
		
h1		{margin-bottom: 50px;
		text-shadow: 3px 3px #3c4552;
		text-indent: 1em;}

h2,h3	{text-shadow: 3px 3px #3c4552;}

p		{margin-bottom: 20px;}

.center		{display: flex;
			justify-content: center;}
		
.right		{float: right}	/*used to position the jellyfish graphic*/

.gallery	{display: grid;
			grid-template-columns: 24% 24% 24% 24%;
			grid-gap: 10px;
			margin-bottom: 10px;
			text-align: center;}
				
.spacebetween	{justify-content: space-around;}


dialog		{width: 33%;
			background-color: #9fd5b3;
			color: #3c4552;}
dialog button	{background-color: #3c4552;
				color: #9fd5b3;}
button		{background-color: #680121;
			color: #9fd5b3;
			font-size: 15px;}

::backdrop	{background-color: #3c4552;
			opacity: 0.75;
			}
				
@media	(max-width: 800px){
		.center		{flex-direction: column;
				align-items: center;}
		.gallery	{grid-template-columns: 45% 45%;}
		}