@font-face {
	font-family: 'Atkinson';
	font-display: swap;
	src: url('/fonts/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2'),
		url('/fontsAtkinsonHyperlegibleNext-Bold.woff2') format('woff2'), 
		url('/fonts/AtkinsonHyperlegibleNext-Regular.ttf') format('truetype');   
}

:root	{
	line-height: 1.5;
	font-size: 110%;
	}
body {background:#ECEFF;}

main	{
	min-height:100%;
	margin-left:auto;
	margin-right:auto;
	width:70%;
	font-family:'Atkinson', Fallback, sans-serif;
	overflow:hidden;
	z-index:1
        }

main p,h2,img  {
	margin: 0.4em;
	font-size:1.2rem
	}

main h1 {
	margin-top:0.5em;
	margin-bottom:0;
	clear:both;
	font-size:1.9em;
	font-family:"Varela Round",serif;
	font-weight:400;
	}

main h2 {
	margin-top:2.5em;
	clear:both;
	font-size:1.5em;
	}
main h3 {
	margin-top:1.2em;
	margin-bottom:0;
	margin-left:0.5rem;
	clear:both;
	font-size:1.3em;
}

main button	{
	font-size:1.3em;
	padding:0.3rem;
	border-color:black;
	cursor: pointer;
	border-width:3px;
	border-radius: 0.3rem;
	}


article {
        margin-top:0.5rem;
        border-style: solid;
        border-width: 2px;
        border-radius:0.5rem;
        padding-top:0;
        padding-left:0.1rem;
        padding-right:0.1rem;
        overflow:auto;
        background-color:#d0e5ff;
        }
article > h2    {margin-top:0.2rem;}
article:nth-child(even) {background-color:#d5e5ff;}
article:nth-child(odd)  {background-color:#ffe5f2;}

#logo   {
	animation-name:fadein;
	animation-duration: 4s;
        }
@keyframes fadein {
	from {opacity: 0;}
	to {opacity: 1;}
}

#bday th        {border:0;}
#bday td        {border:1px solid black;font-family:Atkinson, Fallback, sans-serif;}
#bday th:nth-child(2)   {text-align:left;padding-left:0.5rem;}
#bday td:nth-child(1)   {padding-left:0.5rem;}
#bday td:nth-child(2)   {text-align:left;padding-right:0.5rem;padding-left:0.15rem;}
#bday td:nth-child(1)   {text-align:right;padding-right:0.5rem;padding-left:0.15rem;}

#diags td        {border:1px solid black;font-family:Atkinson, Fallback, sans-serif;}
#diags td:nth-child(1)   {padding-left:0.5rem;}
#diags td:nth-child(2)   {text-align:left;padding-right:0.5rem;padding-left:0.5rem;}
#diags td:nth-child(1)   {text-align:right;padding-right:0.5rem;padding-left:0.15rem;}


footer	{
	display:flex;
	justify-content:center;
	margin-top:2rem;
	padding:0.5rem;
	font-size:1.4rem;
}
footer:before	{content:"Copyright © 2024, 2025 Newcomers Welcome Club. All rights reserved.";}

footer a:link		{ color: black; text-decoration: none; }
footer a:visited	{ color: black; text-decoration: none; }
footer a:active		{ color: black; text-decoration: none; }
footer a:hover		{ color: black; text-decoration: underline; }

.byline		{font-size:1.2rem;font-weight:bold;color:#026020;}
.personal	{font-size:1.1rem; margin-left:1rem; margin-top:0;}
.personal p	{margin-left:1rem; margin-top:0; margin-bottom:0; padding:0;}

#logo   {
	animation-name:fadein;
	animation-duration: 3s;
	}
@keyframes fadein {
  from {opacity: 0;}
  to {opacity: 1;}
}

.img-float	{
	float:left;
	margin-right:1rem;
	}

.center	{display:flex;justify-content:center;}

/*#leaf::before	{
	content:url('/website/Placeholder-Thumbnail-150x150.png');
	display:flex;
	justify-content:center;
}
*/
.divas {
        font-family: "Pinyon Script", cursive;
        font-weight: 400;
        font-style: normal;
        font-size:2.5rem;
}

#lunch table td {border:0; vertical-align:top;}
#lunch td {font-size:1.2rem;}
#lunch td:nth-child(1) {text-align:right;padding-left:1rem;}
#lunch td:nth-child(2) {text-align:left;padding-left:1rem;}

table   {border-collapse: collapse;}
ul>li   {font-size:1.2rem;}

.print  {display:none;}

@media screen and (max-width: 2000px) {
	main p {width:85%;font-size:1rem;}
	footer{font-size:1rem;}
	}
@media screen and (max-width: 1000px) {
	main p {width:90%;font-size:1rem;}
	footer{font-size:0.9rem;}
	}
@media screen and (max-width: 800px) {
	main {width:95%;font-size:1rem;}
	article h2 {font-size:1rem;}
	footer{font-size:0.65rem;}
	}
@media screen and (max-width: 600px) {
	main {width:99%;}
	article{padding-left:0.5rem;padding-right:0.5rem;}
	article h2 {font-size:1.2rem;}
	footer{font-size:0.5rem;}
	#balloon {display:none;}
	}

@media screen and (max-width: 300px) {
	main {width:99%;}
	article{padding-left:0;padding-right:0;}
	footer{font-size:0.5rem;}
	#balloon {display:none;}
	}
@media print {
	article	{border-style:none;}
	footer	{display:none;}
	header	{display:none;}
	li	{font-size:0.6rem;}
	main	{width:99%;
		font-size:0.6rem;}
	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:'system-ui';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; }
	}

nav	{
	margin-left:0;
	margin-right:0;
	clear:both;
	display:flex;
	flex-wrap:wrap;
	gap:0.5rem;
	justify-content:center;
	align-items:center;
	height:100%;
	}

nav>button {
	color:black;
	background-color:#d5e5ff;
	border-color:black;
	border-radius:0.35rem;
	width:8rem;
	font-size:1.1rem;
	font-family:"Varela Round";
	padding:0.2rem;
	}
nav>button:hover {
        background-color:#55F;
        color:white;
        /*transform: translateY(6px);
	transform: translateX(6px);
        transition: 0.5s;*/
        }