:root {
  --accent:         rgb(185, 205, 215);
  --accent-muted:   rgba(185, 205, 215, 0.3);
  --accent-border:  rgba(185, 205, 215, 0.6);
  --accent-strong:  rgba(185, 205, 215, 0.9);
  --text-dark:      #333;
  --text-mid:       #555;
  --text-light:     #888;
  --bg:             #f7f7f7;
  --white:          #fff;
  --font:           raleway, sans-serif;
  --radius:         1.3em;
  --shadow:         0.1em 0.2em 0.2em rgba(0, 0, 0, 0.3);
  --status-added:      rgba(215, 228, 234, 0.35);
  --status-partial:    rgba(215, 228, 234, 1);
  --status-hiatus:     rgba(136, 136, 136, 0.5);
  --status-extension:  rgb(136, 136, 136);
}
*{box-sizing: border-box;}
a {color: var(--text-light); font-weight: bold; text-decoration: none;transition: all 0.5s ease;}
a:hover{color: var(--text-dark);transition: all 0.5s ease;}

.taken .hiatus a,  .taken .extension a, .taken .sidebar .extension, .taken .sidebar .hiatus{color: var(--white);}

/* cursor */
body, a { cursor: url(https://i.imgur.com/ONVDMqu.png), default; }
a:hover, .menu:hover { cursor: url(https://i.imgur.com/0p9CPwX.png), default; }
.material-symbols-outline{font-size: 0.5em;}
body{
	background:var(--bg);
	color: var(--text-mid);
	font-family: var(--font);
	font-size: 10px;
	-webkit-font-smoothing: antialiased;
	letter-spacing: .5px;
	line-height: 1.5em;
	margin: 0;
	padding: 0;
	text-align: justify;
	text-transform: lowercase;
}
header{
	background: var(--accent-muted);
	border: 1px solid var(--accent-border);
	border-width: 0 0 1px 0;
	margin: 0 0 3em 0;
	padding: 1em;
	width: 100%; 
}
header .logo{
	align-items: center;
	display: flex;
	gap: 1em;
	justify-content: flex-end;
}
header .logo img {aspect-ratio: 1/1; background: var(--accent); box-shadow: var(--shadow); border-radius: 100%; max-height: 4em; padding: 0.5em;}
header .logo .title{font-size: 2em; padding: 0;}
header .logo .title .tagline{font-size: 0.5em;}

header .nav{
	align-items: center;
	color: var(--text-light);
	display: flex;
	gap: 2em;
	justify-content: flex-end;
	margin: 0;
	padding: 1em 0;
	width: 100%;
}
header .nav #searchContainer{
	align-items: center;
	display: flex;
	gap: 0;
	justify-content: center;
}
header .nav #searchContainer input{border-radius: var(--radius) 0 0 var(--radius); border-width: 1px 0 1px 1px; font-family: var(--font);padding: 0.5em 0 0.5em 1em;}
header .nav #searchContainer button{border-radius: 0 var(--radius) var(--radius) 0;}
header .dropdown{display: none;}
header .dropdown.active{
	background: var(--white);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	display: block;
	list-style-type: none;
	padding: 0;
	position: absolute;
	right: 1em;
	width: fit-content;}

header .dropdown li{
	border: 1px solid var(--accent-muted);
	border-width: 0 0 1px 0;
	display: flex; 
	align-items: center;
	justify-content: flex-start;
	gap: 1em;
	padding: 1em 1.5em;
}
.dropdown li a{display: inline-block; width: 100%;}
.content{
	align-items: flex-start;
	display: flex;
	gap: 2%;
	justify-content: center;
	margin: 0 auto 2em auto;
	width: 100%;
}

.content .sidebar {
	background:url(logo26.png) no-repeat top center;
	background-size: auto 100%;
	padding: 1em;
	width: 18%;}

.content .main{
	padding: 0 2% 0 0;
width: 80%;}
.taken .content {max-width:1000px;}
.taken ul{
	list-style-type: none;
	padding-inline-start: 0;
	width: 100%;
}
.taken .sidebar li{
	background: var(--white);
	font-size: 1.2em;
	font-weight: bold;
	line-height: 2.5em;
	margin: 0 0 2em 0;
	padding: 0 0 0 1.5em;
	text-transform: uppercase;
}
.taken .sidebar .added, .taken .searchableItem.added{
	border: 1em solid var(--status-added);
	border-width: 0 0 0 1em;
}
.taken .sidebar .hiatus, .taken .searchableItem.hiatus{
	background: var(--status-hiatus);
	opacity: 0.75;
}
.taken .sidebar .extension, .taken .searchableItem.extension{
	background: var(--status-extension);
	border-width: 0 0 0 1em;
}
.taken .sidebar .partial, .taken .searchableItem.partial{
	border: 1em solid var(--status-partial);
	border-width: 0 0 0 1em;
}

.taken .sidebar .complete, .taken .searchableItem.complete{	
	
	border: 1em solid var(--text-light);
	border-width: 0 0 0 1em;
}
.taken .content .main {
	columns: 2; 
	column-gap: 2em;
}
.taken .main div{
	align-items: flex-start;
	background: var(--white);
	box-shadow: var(--shadow);
	break-inside: avoid;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 1em 1em 1em 1.5em;
	margin: 0 0 1em 0;
	width: 100%;
}
.taken .searchableItem a{
	font-size: 2em;
}
.taken .searchableItem b{
	background: var(--text-light);
	border: 1px solid var(--text-mid);
	color: var(--white);
	font-size: 0.8em;
	padding: 0.2em 1em;
}
.taken .searchableItem i{width: 100%;}
.searchableItem.hidden { display: none !important; }
.hidden{display:none;}
#noResults { display: none; }
#noResults.show { display: block; }
.not_found .content {display: block; font-size: 2em;padding-top: 1em;text-align: center;}
.not_found .content img {display: block; height: 280px; margin:auto;}
.rules .content{width:80%; margin: auto;}
.templates .content {width: 60%; margin: auto;}
.rules .main div, .templates .main .searchableItem {
	background: var(--white); 
	border: 1px solid var(--accent-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	margin: 0 auto 1em auto; 
	padding: 1em 2em;
	width: 100%;
}
.rules h2{ color:var(--accent-strong);}
.rules .sidebar, .directory .sidebar {min-height: 280px;}
.templates .sidebar{display: flex; align-items: center; justify-content: center; min-height: auto;}
.blurb{background: rgba(255,255,255,0.9); border: 1px solid var(--text-light); border-radius: var(--radius); box-shadow: var(--shadow); font-weight: bold;padding: 1em;}
.blurb a{color:var(--accent-strong);}

.directory .main {
	columns: 3;
	gap: 2em;
	
}
.directory .main a{
  color: var(--accent);}
.directory .searchableItem{
	background: var(--white);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	break-inside: avoid;
	margin: 0 0 2em 0;
	padding: 1em;
	
}
.directory .searchableItem img{
	border-radius: var(--radius) var(--radius) 0 0;
	box-shadow: 0.1em 0.2em 0.2em var(--accent-border);
	display: block;
	margin: 0 auto 0.5em auto;
	width: 100%;}


iframe{border-radius: var(--radius); box-shadow: var(--shadow);display: block; margin: auto;}
.calendar .content .main {width: 60%;}
.calendar .content .sidebar{background-size: 100%;}
.calendar summary {
	background: var(--text-mid);
	border-radius: var(--radius);
	color: var(--text-light);
	font-weight: bold;
	padding: 0.5em 1em;
	margin: 0 0 1em 0;
	text-transform: uppercase;
	width: fit-content;
}
.calendar .sidebar ul {
	list-style-type: none;
	padding-inline-start: 1em;
}
.calendar .sidebar li {
	border-radius: var(--radius);
	background: var(--white);
	box-shadow: var(--shadow);
	padding: 0.5em 1em;
	margin: 0 0 1em 0;
	width: fit-content;
}