@import url('https://fonts.googleapis.com/css?family=Red+Rose&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Oswald:wght@300&display=swap');
:root	{
	line-height: 1.5;
	font-size: 20px;
	}
body { background-color: #ffffff;}
main	{
	background-color: #ffffff;
	margin-left:auto;
	margin-right:auto;
	width:70%;
	font-family:Cardo;
	overflow:hidden;
	z-index:1
        }
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';}

.btn    {
        font-size:1.2rem;
        padding-top:0.2rem;
        padding-bottom:0.2rem;
        padding-left:0.4rem;
        padding-right:0.4rem;
        border-radius:0.3rem;
        }
.button {
        background-color:#ECECFE;
        font-size:1.5rem;
        border-radius:0.5rem;
        margin-left:1rem;
        padding:0.2rem;
        box-shadow: 3px 3px 5px 0px rgb(0,0,0);
        }
.button:hover {
        background-color:#555;
        color:white;
        transform: translateY(-4px);
        transition: 0.5s;
        }
.divas {
        font-family: "Pinyon Script", cursive;
        font-weight: 400;
        font-style: normal;
        font-size:2.5rem;
}
.columns        {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:1rem;
        font-size:1.2rem;
        margin-left:0.5rem;
        }
.month  {font-size:1.2rem;margin-top:1rem;}

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

#cal th {border:0; border-color:black; font-size:0.9rem;vertical-align:top;}
#cal td {font-size:1.1rem;vertical-align:top;}
#cal td:nth-child(1)	{text-align:right;padding-left:0.2rem;padding-right:0.2rem;}
#cal td:nth-child(2)	{text-align:right;padding-left:0.2rem;padding-right:0.4rem;}
#cal td:nth-child(3)	{padding-left:0.4rem;}

#calendar table, th, td {border: 2px solid;font-family:'Open Sans';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;}
}

nav	{
	position:fixed;
	top:50px;
	left:0;
	padding-left:0.3rem;
	background-color: green;
	opacity:0.9;
	visibility:hidden;
	z-index:3;
	width:18rem;
	height:auto;
	font-family:'system-ui';
	font-size:1.3rem;
	line-height: 1.7;
	overflow:auto;
}
nav a:link,
nav a:visited	{color:white; text-decoration: none;}
nav a:hover	{background-color:white;color:black; text-decoration: none;}
nav a:active	{color:white; text-decoration: none;}
nav details div  	{font-size:1.2rem;}
details>div     {margin-bottom:0.4rem;}
summary 	{padding-left:1rem;font-size:1.5rem;}
summary:hover	{background-color:white;color:black;}
.menuitem	{
		color:white;
		font-size:1.3rem;
		cursor:pointer;
		}
.menusummary	{
		color:white;
		font-size:1.3rem;
		margin-left:-1rem;
		cursor:pointer;
		}
figure  {margin-top:0;}
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;}

#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.8rem;}
#calen .left {font-size:0.9rem;font-weight:bold;}
#calen hr       {border-top:1px solid black;margin-top:0;margin-bottom:0;}

#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;
}
.svgbutton      {width:100%;}
.svgbutton > .svgrect   {fill:#D2DDE0;}
.svgbutton > .svgtext   {fill:black;}
.svgrect        {stroke:black; stroke-width:0.4;}
.svgtext        {text-anchor:middle;font-family:"Open+Sans";}
.svgbutton:hover > .svgrect {fill:green;}
.svgbutton:hover > .svgtext {fill:white;}
svg {filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));  }

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

footer	{
	display:none;
	justify-content:center;
	margin-bottom:2rem;
	margin-top:0;
	padding:0.5rem;
	font-size:1.5rem;
}
footer:before	{content:"Copyright © 2026 Newcomers Welcome Club, All rights reserved.";}

#leaf	{margin:0;}
#leaf::before	{
	content:url('/website/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 screen and (max-width: 2000px) {
	main {width:80%; font-size:1.5rem;}
}

@media screen and (max-width: 1000px) {
	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.1rem;}
	article{padding-left:0.5rem;padding-right:0.5rem;}
	footer{font-size:0.9rem;}
}

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

@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; }
	}