/**
Author: The Mundane Witch (memrie)
Date: February 8, 2026
the witching academy - witching.academy

color scheme: triadic ~ #548DAB, #AB548D, #8DAB54

**/

body {
	font-size:1.2em;
	margin:0;
	padding:0;
	width:100%;
	min-width:100%;

	font-family: "berthold-baskerville-pro", sans-serif;
	font-weight: 400;
	font-style: normal;
}

/******************************************************************
-------------------------------------------------------------------
LAYOUT - SPECIFIC
------------------------------------------------------------------- 
******************************************************************/

#global_nav a, #footer a,
h1, h2, h3 {
	font-family: "active", sans-serif;
	font-weight:400;
}

#global_nav, #content, #footer {
	padding:2em;
	width:calc(100% - 4em);
	min-width:calc(100% - 4em);
}
/******************************************************************
-------------------------------------------------------------------
GLOBAL NAV
------------------------------------------------------------------- 
******************************************************************/

#global_nav {
	background-color:#fff;
	position:sticky;
	top:0;
	text-align:right;
	z-index:20;
}

#global_nav a {
	color: #000;
	font-size:1.5em;
	display:inline-block;
	margin:0 .5em 0 .5em;
}
#global_nav a:hover {
	color: #548DAB;
}

#sub_nav a{
	color:#AB548D;
	font-size:1.3em;
}	

#sub_nav a:hover {
	color: #8DAB54;
}

/******************************************************************
-------------------------------------------------------------------
LOGO
------------------------------------------------------------------- 
******************************************************************/
#logo {
	width:20vw;
	max-width:20vw;
	min-width:15em;
	position: absolute;
	float:left;
	top:0;
	z-index:21;
}

#logo img {
	width:100%;
	max-width:100%;
}

/******************************************************************
-------------------------------------------------------------------
GENERIC ELEMENTS
------------------------------------------------------------------- 
******************************************************************/

a {
	color: #548DAB;
	text-decoration: none;
	position:relative;
}

a:hover {
	color: #AB548D;
}

s a{
	text-decoration:line-through;
}
/******************************************************************
-------------------------------------------------------------------
CONTENT
------------------------------------------------------------------- 
******************************************************************/
#content {
	max-width:70vw;
	min-width:70vw;
	width:70vw;
	position:relative;
	padding:1em 1em 1em 20vw; 
	margin: auto;
}

.info_banner {
	background-color:#AB548D;
	border: 1px solid #AB548D;
	border-radius:0.5em;
	padding:0.5em;
	margin:0.5em 0;
	color: #fff;
}

.info_banner  a {
	color:#fff;
	text-decoration: underline;
}


.info_banner  a:hover {
	color:#E7CFDF;
	text-decoration: none;
}


/******************************************************************
-------------------------------------------------------------------
FOOTER
------------------------------------------------------------------- 
******************************************************************/
	
#footer {
	text-align:center;
}

#footer a {
	padding: 0 0.25em;
	font-size:1.2em;
}


/** below code from: https://radiatingstar.com/blog/unorthodox-ideas-for-ahover-effects/ **/
.brackets:before, .brackets:after {
  position: absolute;
  color: transparent;/* It makes the curly brackets invisible at the beginning.*/
}
.brackets:hover:before, .brackets:hover:after {
  color: black; /* Or whatever colour you want. */
}

/* For movement */
.brackets:before {
  content: "{";
  left: -20px;
}
.brackets:hover:before {
  left: -15px;
}
.brackets:after {
  content: "}";
  right: -20px;
}
.brackets:hover:after {
  right: -15px;
}