:root {
	color-scheme:	light dark;  
	--bg0:	light-dark(#F7F7A9,#222);
	--bg1:	light-dark(#FFF,#004);
/*	--bg2:	light-dark(#f6fb7b,#007); */
	--bg2:	light-dark(#643c04,#007);
	--fc1:	light-dark(#000, #FFF);
	--fc2:  light-dark(#FFF,#0FF);
	--fc3: #777;
	--dates: #FFF;	

	--accent: light-dark(#f00, #ff0);
	--border-colour: light-dark(#000,#555);

	--button-colour : light-dark(#643c04, #007);	
	--button-text :  #FFF ;

	--hid: light-dark(#F0F, cyan);
	
	--comps: light-dark(#F0F, #0FF);
	
	--menu : light-dark(#643c04, #007);
	--menutext : #fff;

	--pd1: 0.625rem;
	--tab: 1.875rem;

	--ff: "system-ui", "Century Gothic", sans-serif;
	/* Font Size */
	--fs-0: 0.75rem;
	--fs-1: 0.875rem;
	--fs-2: 1rem;
	--fs-3: 1.125rem;
	--fs-4: 1.25rem;
	--fs-5: 1.5rem;
	--fs-6: 2.25rem;
	--fs-10: 3rem;
	--fs-20: 6rem;

	/* Font Weight */
	--fw-n: 500;
	--fw-b: 700;
}
*,
*::after
 {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	background-color:  var(--bg0);
	color: var(--fc1);
	text-align: center;
	padding-block-end: 4rem;
}

header {
	/* max-width: 1000px; */
	/* margin-inline: auto; */
	text-align: center;
}
main,
footer {
	max-width: 1000px;
	margin-inline: auto;
	text-align: center;
}

header,
footer {
	text-align: center;
}

footer {
	padding-top: 1.5rem;
	padding-left: 190px;
}

.container {
	/* width: min(100% - 20px, 62rem); */
	max-width : 1000px;
	margin-inline: auto;
	padding: 10px;
	/* border: 2px solid red; */ 
}

section {
	padding: 10px;
	max-width: 1000px;
	margin: 0 auto;
	margin-bottom: 1rem;
	background-color: var(--bg1);
	/*border: 1px solid var(--border-colour);*/
}
img {
	max-width: 100%;
	max-height: 100%;
}
.img_main{	margin-block: 1rem;}

.brown {
	color: var(--fc-2);
	font-weight: var(--fw-n);
}
.invite {
	color: var(--accent);
	font-weight: var(--fw-b);
}

a,
a:visited {
	text-decoration: none;
	color: var(--fc1);
	font-family: var(--ff);
	font-weight: var(--fw-b);
}
a.orange,
a.orange:visited {
	text-decoration: none;
	font-family: var(--ff);
	color: var(--fc-0);
}

/* Challenge text */
a.challenge {
	color: var(--fc-0);
	font-family: var(--ff);
	font-weight: var(--fw-b);
	font-size: clamp(13px, 3vw, 16px);
}
a.yellow {color: #FF0;}

/* ---------------------------------------*/
a[href="#"] {
	font-family: var(--ff);
	font-weight: var(--fw-b);
	font-size: var(--fs-5);
	color: var(--fc1);
	text-decoration: none;
	text-align: left;
	margin-bottom: 0;
}
a[href="#"]:hover {
	color: var(--accent);
}
/* ---------------------------------------*/
a[href*="Competition+Challenge"] {
	text-decoration: none;
	text-align: center;
	color: var(--fc1);
	margin: 0 auto;
	font-weight: var(--fw-b);
}

.group{
	max-width: 80%; 
	display: flex; 
	justify-content: space-around; 
	flex-wrap: wrap; 
	column-gap:30px; 
	margin-inline: auto;}
			/* .group>div{width: max-content;} */

.welcome,
li, p {
	font-family: var(--ff);
	font-size: var(--fs-2);
	font-weight: var(--fw-n);
	/* margin-bottom:0.8rem; */
	/* width: 100%; */
	line-height: 1.3;
	color: var(--fc1);
	text-wrap: balance; 
	/* border: 1px solid red; */
	margin-inline: auto;
}
b { font-weight: 700;}
p.sidemenu{
	color: var(--fc2);
	font-weight: 800;
}

li {text-wrap: balance; margin-bottom: 1rem;}

ul{max-width: 600px;}
.welcome {
	font-weight: var(--fw-b);
	text-wrap: balance;
	text-align: center;
}
h2 {
	width: 100%;
	text-align: left;
}
h3 {
	width: 100%;
	text-align: center;
	font-family: var(--ff);
	font-weight: var(--fw-b);
	font-size: var(--fs-1);
	margin: 0;
	color: #0f0; /* var(--fc1); */
	text-wrap:balance;	
}

h4 {
	width: 100%;
	text-align: left;
	font-family: var(--ff);
	font-weight: var(--fw-b);
	font-size: var(--fs-1);
	margin: 0;
	color: var(--accent);
}

.title,
.programme-title,
.main-title {
	text-transform: uppercase;
	font-family: var(--ff);
	font-size: var(--fs-2);
	font-weight: var(--fw-b);
	text-align: center;
	width: 100%;
	letter-spacing: 8px;
	/* padding: 0.5rem 0; */
	/* color: var(--fc1); */
	margin: 0;
}
.programme-title {
	font-size: clamp(1rem, 1.5rem, 2rem);
}
.sub-title {
	color: var(--fc1);
	font-weight: bold;
}
.comp-title {
	width: 100%;
	font-family: var(--ff);
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 4px;
	color: var(--comps);
}
.hid{color: var(--hid);font-weight: bold;}

.logo {
	max-height: 130px;
}

/* .logoImage1 {
	width: 1000px;
	max-height: 130px;
	min-height: 130px;
	margin: 0 auto;
} */

.logo-content {
	background: url("../images/png/Logo-dark.png");
	background-size: auto 100%;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 130px;
	cursor: pointer;
}

/* @media (prefers-color-scheme: dark) {
	.logo-content {
		background-image: url("../images/png/Logo-dark.png");
	}
} */
@media (prefers-color-scheme: light) {
	.logo-content {
		background-image: url("../images/png/Logo.png");
	}
}


.first-image {
	max-width: 340px;
	margin-inline: auto;
	border: 1px solid var(--fc1);
}
.box{
	border: 1px solid var(--fc1);
}

.imagebox {
	max-width: 280px;
	border: 1px solid white;
	margin-inline: auto;
	margin-block: 1rem;
}


.arrow-container{
	max-width: 25px;
	max-height: 25px;
	margin-inline: auto;
	margin-block: 1rem;
}

.arrow-content {
	background-image: url("../images/png/arrowUp-dark.png");
	background-size: auto 100%;
	background-position: center;
	background-repeat: no-repeat;
	width: 25px;
	height: 25px;
	cursor: pointer;
	margin-inline: auto;
	margin-block: 1rem;
	text-align: center;	
}

@media (prefers-color-scheme: light) {
	.arrow-content{
		background: url("../images/png/arrowUp-light.png");
	}
} 

#nav-icon {
	background-image: url("../images/png/nav-dark.png");
	width: 1.6rem; /*  25px; */
	height: 1.6rem;  /* 25px */
	text-align: center;
	margin-inline: auto;
	cursor: pointer;
}
@media(prefers-color-scheme: light) { 
	#nav-icon { background-image: url("../images/png/nav-light.png");}
}

#bullet{
	background-image: url("../images/png/bullet-dark.png");
	width: 0.6rem;
	height: 0.6rem;
	margin: 0 0.5rem;
	display: inline-block;
}
@media (prefers-color-scheme: light) { 
	#bullet { background-image: url("../images/png/bullet-light.png");}
}	

#hid1,
.hol{
	color: var(--fc1);
	font-weight: bold;
}

span {
	color: var(--fc1);
	font-weight: var(--fw-b);
}
.white {
	color: var(--fc1);
	font-weight: var(--fw-b);
}
.orange {
	color: var(--fc1);
	font-weight: var(--fw-n);
}
.yellow {
	color: var(--accent);
	font-weight: var(--fw-b);
}
.cyan{
	color:#0FF; 
	font-weight: var(--fw-b);
}
/* #F0F magenta */
.p40 {
	max-width: 40ch;
}
.p50 {
	max-width: 50ch;
}
.p60 {
	max-width: 60ch;
}
.p65 {
	max-width: 65ch;
}
.p70 {
	max-width: 70ch;
}
.p75 {
	max-width: 75ch;
}
.p80 {
	max-width: 90ch;
}
.rt {
	text-align: right;
}
.ct {
	text-align: center;
	margin-inline: auto;
}
.lt {
	text-align: left;
}
.bold {
	font-weight: 800;
}
.bdr {
	border: 3px solid red;
}
.bdg {
	border: 3px solid green;
}
.bdb {
	border: 3px solid blue;
}
.bdy {
	border: 3px solid yellow;
}
.bdk {
	border: 1px dashed #000;
}

.pbt {
	text-align: center;
	color: var(--fc-0);
	font-weight: bold;
}
.def{
	max-width: 40rem;
	margin-inline:auto;
	border: 1px solid transparent;
}
ul {
	list-style-position: outside;
	margin-right: 1rem;
	padding-left: 1rem;
	font-family: var(--ff);
	color: var(--fc1);
}

li {text-align: left;
	font-family: var(--ff);
	font-size: var(--fs-2);
	font-weight: var(--fw-n);
	line-height: 1.3;
	padding-left: 1rem;
	color: var(--fc1);
	text-wrap: balance; 
	margin-bottom: 1rem;
}
.bullet{
	width: 0.6rem;
	height: 0.6rem; 
	margin: 0 0.5rem;
	display: inline-block;
}


		
/* .bullet3 {
	width: 1.8rem;
	height: 0.6rem;
	display: inline-block;
} */


#meetingdate {
	margin-block: 1rem;
	margin-inline: auto;
	color: var(--accent);
	font-family: var(--ff);
	font-weight: var(--fw-b);
	font-size: 1rem;
}

.pbt {
	text-align: center;
}
.empty2 {
	width: 100%;
	height: 4rem;
}
.empty {
	width: 100%;
	height:15rem;
}

#action {
	color: var(--fc1);
	margin-bottom: 1rem;
	text-align: center;
	font-family: var(--ff);
	font-size: var(--fs-1);
	font-weight: var(--fw-b);
	text-wrap:balance;
}

.button,
.redButton,
.btnL,
.btnC,
.btnR {
	font-family: var(--ff);
	font-size: var(--fs-2);
	font-weight: var(--fw-b);
	display: block;
	padding: 0.5rem 1rem;
	border: none;
	background-color: var(--button-colour);
	color: var(--button-text);
	cursor: pointer;
	text-align: center;
	margin: 0 auto;
	width: 300px;
	margin-bottom: 1rem;
}



/* .btnL,
.btnC,
.btnR
.w100 {
	width: 100%;
} */
.btnC:hover {
	box-shadow: 10px 10px 10px 2px rgba(200, 200, 200, 0.4);
}
.copyright::after {
	content: "\A \00a9  2018-2026 Yeovil Camera Club";
	color: var(--fc1);
	margin: 0 auto;
	text-align: center;
	font-size: var(--fs-1);
	font-family: var(--ff);
	font-weight: 700;
}

.link,
#facebook {
	max-width: 25px;
	height: auto;
	margin: 1rem auto;
	text-align: center;
}


.note {
	margin: 0 auto;
	text-align: center;
}

.mb05 {
	margin-bottom: 0.5rem;
}
.mt05 {
	margin-top: 0.5rem;
}
.yellow {
	color: yellow;
}
.whitefilled {
	width: 30px;
	height: auto;
}
.menu-title{
	padding-left: 6px;
	font-size:1.5rem;
    font-weight: 700;
	text-align: left;
	color: #fff;
}

.menu {
	text-align: left;
	color: var(--menutext);
	background-color: var(--menu);
	padding-left: 10px;
}
.sidenav {
	font-family: var(--ff);
	font-size: var(--fs-1);
	color: var(--menutext);
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	text-align: left;
	background-color: var(--menu);
	overflow-x: hidden;
	padding-top: 15px;
}

.sidenav a,
.sidebar a:visited {
	padding: 6px;
	text-decoration: none;
	font-family: var(--ff);
	color: var(--menutext);
	font-size: var(--fs-1);
	font-weight: var(--fw-b);
	display: block;
}

.sidenav a:hover {
	background-color: var(--fc3);
	font-size: var(--fs-1);
	font-family: var(--ff);
	color: var(--fc2);
}

.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-family: var(--ff);
	color: red;
	font-size: var(--fs-6);
	margin-left: 90px;
	cursor: pointer;
}
.sidenav .closebtn:hover {
	font-size: var(--fs-6);
	background-color: #555;
}
.pad {
	max-width: 180px;
	height: 4rem;
	cursor: pointer;
}

.challenge {
	font-family: var(--ff);
	font-size: clamp(0.75rem, 0.88rem, 1rem);
}

.logoImage1 {
	max-width: 100%;
	min-height: 130px;
	object-fit: cover;
	object-position: center;
}

.pad {
	height: 5rem;
	cursor: pointer;
}

/*------------------------------------------------------*/

/* Add space between months, remove below last month */
.month {
	margin-bottom: 3rem;
}
:nth-last-child(1 of .month) {
	margin-bottom: 0;
}

/* .meet {margin-bottom:2rem; color:var(--fc-0);} */

/**** Grid Structure *****************/

.month {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 0.5rem 0; /* Space between meetings */
}
.month > * {
	padding: 10px;
}

/**** Grid Properties ******************/

.month > *:nth-child(2n + 1) {
	text-align: right;
	font-weight: bold;
	background-color: var(--bg2);
	color: var(--dates);     /*--------------------------------------------------------------------------------*/
	font-family: var(--ff);
	/*
	border-color: transparent; var(--border-colour);
	border-style: solid;
	border-width: 1px 1px 1px 1px;*/
}
.month > *:nth-child(2n + 2) {
	text-align: center;
	color: #000;
	background-color: var(--bg1);
	position: relative;;
	/*
	border-color: transparent ; var(--border-colour);
	border-style: solid;
	border-width: 1px 1px 1px 0;*/
}
p.wkNo {
	position: absolute;
	right: 10px;
	top:10px;
	color:#777;
	font-weight: bold;
	font-size: 12px;
	/* display:none; */
}
/*** Text properties **************************************/

.month > *:nth-child(2n + 2) > p:first-child {
	/* first paragraph   :not([class="hol"] > p)*/
	font-family: var(--ff);
	/* color: var(--fc1); */
	font-weight: var(--fw-b);
	text-align: center;
}
.month > [class="hol"] > p:first-child,
.month > [class="hol"] > p:last-child {
	color: var(--fc1);
	font-weight: bold;
}

.rwd {
	display: none;
}

/**** Grid for small screens *******/

@media (max-width: 600px) {
	.month {
		grid-template-columns: 1fr;
		row-gap: 0;
	}
	.wrap {
		padding-inline: 0;
	}

	.month > *:nth-child(2n + 1) {
		text-align: center;
		/* border-width: 1px 1px 1px 1px; */
	}
	.month > *:nth-child(2n + 2) {
		margin-bottom: 0.8rem;
		/* border-width: 0 1px 1px 1px; */
	}
	footer {
		padding-left: 0;
	}
}

@media (width < 630px) {
	.rwd {
		display: block;
	}
	.welcome {
		max-width: 30ch;
		text-align: center;
	}
}
.hspace{width: 80px; height:1rem; display: inline-block;} 
@media (width < 630px){ .hspace {display: none;}}

.notes > div > ul > li {  
	background-color: var(--bg0);
    color: var(--fc1); 
    font-weight: bold;
    font-family : var(--ff);
    font-size: 1rem;
    max-width:70ch; 
 }
 details > summary {
	 cursor: pointer; 
	}
	
	summary { color:var(--fc3); font-weight: bold; }  
	
	details.notes[open] summary::after{ content: attr(data-open);  }    
	
	details.notes:not([open]) summary::after { content: attr(data-close);  }   
	
	
	
	details >div >p.px{max-width:75ch;}
	details { display: none;}