@font-face {
  font-family: 'Atkinson';
  src: url('/fonts/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2'),
       url('/fontsAtkinsonHyperlegibleNext-Bold.woff2') format('woff2'), 
       url('/fonts/AtkinsonHyperlegibleNext-Regular.ttf')  format('truetype')   
}
@import url('https://fonts.googleapis.com/css?family=Red+Rose&display=swap');

:root	{
	line-height: 1.5;
	font-size: 24px;
	}
body { background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, #f2efd9 100%);}
main	{
	margin-left:auto;
	margin-right:auto;
	width:90%;
	font-family:Atkinson, Fallback, sans-serif;
	overflow:hidden;
	z-index:1
        }

@media screen and (max-width: 2000px) {
	main {width:90%; font-size:1.2rem;}
	footer{font-size:1.2rem;}
}

@media screen and (max-width: 800px) {
	main {width:95%;font-size:1.2rem;}
	footer{font-size:1rem;}
}

@media screen and (max-width: 600px) {
	main {width:98%; font-size:1.2rem;}
	article{padding-left:0.5rem;padding-right:0.5rem;}
	button{font-size:1.0rem;}
	footer{font-size:0.9rem;}
}

@media screen and (max-width: 300px) {
	main {width:99%;}
	article{padding-left:0;padding-right:0;}
	button{font-size:1.0rem;}
	footer{font-size:0.5rem;}
}

main h1 {margin-top:2.5em;clear:both;font-size:1.9rem;}
main h2 {margin-top:1rem;clear:both;font-size:1.7rem;}
main h3 {margin-top:1.2em;margin-bottom:0;clear:both;font-size:1rem;font-family:'Red Rose';}

button {
	margin-top:1rem;
        width:22rem;
        border-style: solid;
        border-width: 1px;
        border-radius: 0.1rem;
        padding-top:0.5rem;;
        padding-bottom:0.5rem;;
        background-color:#62391f;
        color:white;
        font-size:1.2rem;
        font-family: Red Rose;
        text-align:center;
        }
.button:hover {
        background-color:#C4A484;;
        color:white;
        transform: translateY(-4px);
        transition: 0.1s;
        }
.month  {font-size:1.2rem;margin-top:1rem;}

.spacer	{border:10px solid #999;}

#calendar table, th, td {border: 2px solid;font-family:Atkinson, Fallback, sans-serif;font-size:0.9rem;}
#lunch table td {border:0; font-size:1.5rem;vertical-align:top;}
#lunch td {font-size:1.1rem;}
#logo   {
        animation-name:fadein;
        animation-duration: 4s;
        }
@keyframes fadein {
  from {opacity: 0;}
  to {opacity: 1;}
}

details>div     {margin-bottom:0.4rem;}
summary 	{padding-left:1rem;font-size:1.5rem;}
summary:hover	{background-color:white;color:black;}
figure  {margin:0;margin-top:2rem;}
figcaption      {text-align:center;padding-top:0;}
table	{border-collapse: collapse;}
h1      {text-align:center;font-weight:normal;font-size:1.6em;font-family:'Red Rose', sans-serif;}
h2      {text-align:center;font-weight:normal;font-size:1.4em;margin-top:0;font-family:'Red Rose', sans-serif;}
h3      {text-align:left;margin-left:1rem;font-weight:normal;font-size:1.2em;font-family:'Red Rose', sans-serif;}
ul>li   {font-size:1.2rem;}
table.links {margin-left:auto;margin-right:auto;}
table.links td:nth-child(1) {text-align:right;padding-right:1em;}
table.links td:nth-child(2) {text-align:left;padding-left:1em;}
.link	{font-family:arial;
	text-align: center;
	}
.link a:link {color:#00008B;text-decoration: none;}
.link a:visited {color:#40408b;text-decoration: none;}


#calendar table, th, td { border: 2px solid;font-family:'Open Sans';}
#calendar th    {background-color:black;color:white;font-family:'Open Sans';font-weight:normal;}
#calendar td    {vertical-align:top;padding-left:0.3rem;padding-right:0.3rem;}
#calendar .left {font-size:0.9rem;font-weight:bold;}
.center	{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	}
.newmembers	{font-size:1.1rem;
		text-align:left;
		margin-bottom:0.5rem;
		}
.print	{display:none;}
.youtube-video	{
	width:100%;
	aspect-ratio: 16/9;
}

#image	{
	display:flex;
	justify-content:center;
}

footer	{
	display:flex;
	justify-content:center;
	margin-bottom:2rem;
	margin-top:0;
	padding:0.5rem;
	background-color:black;
	color:white;
	font-size:1.2rem;
}
#leaf	{margin:0;}
#leaf::before	{
	content:url('/photos/Placeholder-Thumbnail-150x150.png');
	display:flex;
	justify-content:center;
}
#headlogo	{
	max-width:300px;
}
#headlogo::before	{
	content:url('/images/newcomers-logo-300.webp');
	display:flex;
	justify-content:left;
}


@media print {
	article	{border-style:none;}
	footer	{display:none;}
	header	{display:none;}
	li	{font-size:0.6rem;}
	main	{width:99%;
		font-size:0.6rem;}
	nav	{display:none;}
	td	{font-size:0.6rem;}
	ul>li   {font-size:0.6rem;}
	#calen	{width:90%;}
	#calen th    {background-color:black;color:white;border-color:black;font-family:'Open Sans';font-weight:normal;}
	#calen td    {vertical-align:top;padding-left:0.2rem;padding-right:0.2rem;font-size:0.6rem;}

	#calendar	{width:90%;}
	#logo		{width:300px;}
	.heading	{font-size:0.6rem;}
	.list		{font-size:0.6rem;}
	.month  	{font-size:1rem;margin-top:1rem;}
	.newmembers	{font-size:0.6rem;}
	.noprint	{display:none;}
	.print		{display:inline;}
	a:link		{color: black; text-decoration: none; }
	a:visited	{color: black; text-decoration: none; }
	a:active	{color: black; text-decoration: none; }
	}