/*Version QCB
Doesn't need much. */

/* ================================ */
/* Variables*/
/* ================================ */

@font-face {
  font-family: "LogoFont";
  src: url("Coiny-Regular.ttf");
}

@font-face {
  font-family: "BodyHeaders";
  src: url("Nunito-Bold.ttf");
}

@font-face {
  font-family: "BodyFont";
  src: url("Nunito-Regular.ttf");
}


:root {
	/*fonts*/
    --ff-logo: "LogoFont", serif;
	--ff-header: "BodyHeaders", "Verdana", sans-serif;
	--ff: "BodyFont", "Verdana",  sans-serif;  
    
	/*colors*/
	--bgc: #DFD9E2;
    --bgc-trans: #DFD9E290;
	--bgh: #d4dfec;
    --bgn: #465362;
	--bgs: #FFFFFF90;
	--cbgc: #ffffff;
	--cbga: transparent;
	--brdr: #465362;
	--brdra: #200352;

    /*font colors*/
    --default-fc: #465362;
    --header-fc: #000;
    --logo-fc: #d4dfec;
    --logo-fc2: #000;
    --hyperlink: #4C061D;
    --hyperlink-nav: #fff ;
    --accent: #cd5c5c;  

}

/* ================================ */
/* PRELIMINARIES  */
/* src: https://www.joshwcomeau.com/css/custom-css-reset/
/* ================================ */
*, *::before, *::after {  box-sizing: border-box;}
/* * {  margin: 0;} */
body {  line-height: 1.5; -webkit-font-smoothing: antialiased;}
img, picture, video, canvas, svg {  display: block;  max-width: 100%;}
input, button, textarea, select {  font: inherit;}
p, h1, h2, h3, h4, h5, h6 {  overflow-wrap: break-word;}
p {  text-wrap: pretty;}
h1, h2, h3, h4, h5, h6 {  text-wrap: balance;}
ul, ol { padding: 0; margin: 0;}
#root, #__next { isolation: isolate;}

h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.17em;}
h4 {font-size: 1em;}
h5 {font-size: 1.67em;}
h6 {font-size: .67em;}
p, li {font-size: 1em;}

/* ===================================================== */
/* BODY customizations */
/* ===================================================== */
body, html {
	margin: 0 auto;
	padding: 0;	
	height: 100%;
    font-family: var(--ff);
	background: url('bgpage.png') top left repeat fixed black;
}

/* ================================ */
/* CONTAINER customizations */
/* ================================ */
#container {    
	border-top-right-radius: 4em;
	border-top-left-radius: 4em;
    margin: 0 auto;
    background-color: var(--cbgc);
    min-height: 100%;
    padding: 0;
    width: 80%; 
	min-width: 600px;
	max-width: 1000px;	
}

/* ================================ */
/* HEADER area, including nav and logo */
/* ================================ */
header {	
	border-top-right-radius: 2em;
	border-top-left-radius: 2em;	
    /*border-bottom: 4pt dashed var(--logo-fc);*/
	color: var(--default-fc);
	font-size: large;	
	text-align: center;
	width: 100%;
    margin: 10px auto;
    background: url('bgheader.svg') center bottom repeat-x scroll var(--bgh);
    background-size: contain;    
}
header img {
	margin: 10px auto;
	background-color: var(--bgc-trans);    
    backdrop-filter: blur(10px);
	/*border: 1pt dotted #000;*/    
	border-radius: 500px;
	padding: 10px;
}
header h1 {
    color: var(--logo-fc); 
    font-family: var(--ff-logo);
    	text-shadow: 2px 0 var(--logo-fc2), -2px 0 var(--logo-fc2), 0 2px var(--logo-fc2), 0 -2px var(--logo-fc2),
             1px 1px var(--logo-fc2), -1px -1px var(--logo-fc2), 1px -1px var(--logo-fc2), -1px 1px var(--logo-fc2);
    }

nav {background: var(--bgn);}
nav ul li  {display: inline-flex; margin-left: 5px;}
nav li a {color: var(--hyperlink-nav); border: 4pt solid transparent; padding: 5px;text-decoration: none; font-weight: bold;}
nav li a:hover {		
	color: var(--accent); 
	text-decoration: none; 
    border-bottom: 4pt solid var(--cbgc);
}

/* ================================ */
/* text and text styles */
/* ================================ */
h1, h2, h3, h4, h5, h6, hc, .subtitle {
	font-family: var(--ff-header);	
    color: var(--header-fc);
}

section h3 {border-bottom: 1pt solid var(--brdr);}

p, li {	font-family: var(--ff);}

b, strong, i, em {color: var(--brdra);}

blockquote {
    font-size: large;
    /*design is same as a section */
    }
cite {display: block; margin-top: .5em; text-align: right;}
cite::before {content: '--';}
span.attn {background-color: white; font-weight: bold;}

/* Links */
a {text-decoration: none;}
p a, li a {text-decoration: none; color: var(--hyperlink); border-bottom: 2pt dotted var(--accent);}
a:hover {text-decoration: none;}
a:visited {text-decoration: none;}
a img {border: 2pt solid var(--accent); }

/* ================================ */
/* ARTICLE and SECTION  */
/* ================================ */

article {	
    width: 75%;     
	min-width: 550px;	
    max-width: 800px;
	margin: 0em auto;
}

section, blockquote {
    width: 90%; 
    margin: 1em auto 3em;
	padding: 1em;	
    background: url(bgsection.png) center repeat scroll #ffffff20;
	/*border: 1pt dotted var(--brdr);*/
}

article ul, section ul,
article ol, section ol {
	margin-left: 2em;
}


/* Calendar Styling */
#calendarArticle ul {margin-top: 1em;}
#calendarArticle section ul li span {
    background-color: var(--accent);
    padding: 2px 4px;
	margin-right: 5px;
    font-weight: bold;
    font-size: large;
	display: inline-block;
	min-width: 24px;
	min-height: 24px;
	text-align: center;
}
#calendarArticle section ul li {
    list-style-type: none;
    margin-bottom: 1em;
    }

#calHolder {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 100%;
}

#embedCal {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}



/* ================================ */
/* FOOTER  */
/* ================================ */
footer {
	margin: 1em auto;
	text-align: center;
    border-top: 1pt dotted var(--accent);
    width: 75%;
    padding: 20px 0;
}

#footerBTNs img, .groupBTN img {
    display: inline-block;
    margin: 0 2px; 
    border: 2pt solid transparent;   
}

#footerBTNs a img {border: 2pt solid transparent;}
#footerBTNs a img:hover {border: 2pt solid var(--accent)}