@import url('https://fonts.googleapis.com/css2?family=BioRhyme&family=Poppins:wght@300;400;700&display=swap');

:root {
	--acc: #f39f33;
	--accb: #EC524B;
	--text: #42332e;
	--bgcol: #fffbf0;
	--card: #fdf7df;
	--liborder: #EC524B;
	--sidebg: url();
	--fonthead: 'BioRhyme', serif;
	--font: 'Poppins', sans-serif;
	background-attachment: fixed;
	background-color: var(--bgcol);
	scrollbar-color: var(--acc) var(--card);
	}

/* BIG BOYS */
body {
	background-color: var(--bgcol);
	background-attachment: fixed;
	margin: 0;
	font-family: var(--font);
	color: var(--text);
	font-size: 1rem;
}

a {
	color: var(--acc);
	transition: all 0.2s ease;
	font-weight: bold;
	text-decoration: underline;
}

header a, footer a, button a, nav a, .gallery a, a.big, a.btn, .mininav a, .taglist a {text-decoration: none;}

.big {font-size: 1.5rem; font-family: var(--fonthead); color: var(--acc);}

a:hover{color: var(--accb);}

h1, h2, h3, h4 {font-family: var(--fonthead);}

h1 {font-size: 2.5em; margin-top: 0; margin-bottom: .5em; line-height: 1em;}

h2 {font-size: 2em; margin-top: 40px; margin-bottom: 10px;}

h3 {font-size: 1.5em; margin-top: 30px; margin-bottom: 10px;}

h4 {font-size: 1.3em; margin-bottom: 10px;}

hr {
	border-color: var(--liborder);
	border-width: 0 0 1px 0;
	width: 30vw;
	margin: 10px 0 25px;
}

input, textarea, select, button {
    font-family: var(--font);
	background: var(--card);  
	color: var(--text);
	border: 1px solid var(--text); 
	padding: 5px; 
	margin: 5px;
}

select::picker {
	border-radius: 0;
}

:disabled {
    background: var(--accb);
    color: var(--bgcol);
}

.row.gutters hr {width: 15vw;}

ul li {margin-bottom: 10px;}

/* FROM UNIVERSAL */
::-webkit-scrollbar {background: var(--card);}

::-webkit-scrollbar-thumb {background: var(--acc);}

::selection {
  color: var(--bgcol);
  background: var(--acc);
}

.accent {color: var(--acc);}

.show {overflow: visible;}

.column, .column-row {
	display: flex;
	flex-flow: column wrap;
}

.row {
	display: flex;
	flex-flow: row wrap;
}

.reverse {flex-direction: row-reverse;}

.gutters {
	column-gap: 2vw;
	row-gap: 3vh;
}

.col {flex: 1 1 0;}

.col-3 {flex: 0 0 25%;}

.col-4 {flex: 0 0 33.33%;}

.col-6 {flex: 0 0 50%;}

.col-7 {flex: 0 0 58%;}

.col-12 {flex: 0 0 100%;}

.text-right, .text-right-center {text-align: right;}

.text-left-center {text-align: left;}

.text-center {text-align: center;}

.info-row {
	display: flex;
	justify-content: space-between;
}

.info-row p, .info-row span, .info-col {
	margin: 6px 10px;
}

.info-row .text-right {font-weight: 400;}

.info-row span {text-align: right;}

.w-100 {width: 100%;}

.w-75, .w-md-75 {width: 75%;}

.w-50, .w-md-50 {width: 50%;}

.w-25 {width: 25%;}

.mx-n10 {margin-left: -10px; margin-right: -10px;}

.mb-0 {margin-bottom: 0;}

/* LAYOUT BLOCKS - SIDEBAR */
.sidebar {
	flex: 0 0 33%;
	margin: 0 auto;
	background-image: var(--sidebg);
	background-size: cover;
	background-position: center;
	height: 100vh;
	position: sticky;
	top:0;
	display: flex;
	align-items: stretch;
	text-align: center;
	order: 1;
}

.side-content {
	display: flex;
	flex-flow: column wrap;
	padding: 15px;
	width: 100%;
}

.nav {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

.sidebar .nav {
    margin: -0.3em;
}

.btn-side {
	padding: 5px 10px;
	margin: 0.3em;
	background: var(--bgcol);
	transition: all 0.2s ease;
	color: var(--acc);
	cursor: pointer;
	font-size: rem;
	font-weight: bold;
	flex: 1 1 0;
	min-width: 70px;
	border: 1px solid var(--acc);
}

.btn-side:hover {
	background: var(--accb);
	color: var(--bgcol);
	letter-spacing: 1.5px;
	border-color: var(--accb);
}

.bottom {margin-top: auto;}

/* LAYOUT BLOCKS - CONTENT */
.main {
	flex: 0 0 67%;
	order: 2;
}

.main-content {
	padding: 30px;
	min-height: 77vh;
}

.main-footer {
	background: var(--card);
	padding: 10px;
	line-height: 1em;
	text-align: center;
}

.main-footer {display: block;}

.side-footer {
    display: none;
    background: var(--bgcol);
    padding: 10px;
    line-height: 1em;
    text-align: center;
    margin: 10px -15px -15px;
}

.update {
	font-size: 0.9rem;
	margin-top: 10px;
	margin-bottom: 0;
}

.uptitle {margin-bottom: -13px;}

.blogtitle {margin-bottom: .25em;}

.blogdate {margin:0;}

.date {font-weight: bold; margin-bottom: 0; color: var(--acc); font-size: 1.2rem;}

summary.big {
    background: var(--card);
    padding: 10px 15px;
    cursor: pointer;
    font-weight: bold;
    margin-bottom: 1rem;
}

.subtitle {margin-top: 0.25em;}

.float-left {float: left;}

.float-right {float: right;}

img.float-left, img.float-right {margin: 10px 15px; width: 300px; position: relative; z-index:999;}

.btn, .taglist a {
	padding: 10px 15px;
	margin: .5em;
	background: var(--card);
	transition: all 0.2s ease;
	color: var(--acc);
	cursor: pointer;
	font-weight: bold;
	border: 1px solid var(--acc);
	display: inline-block;
}

.btn:hover, .taglist a:hover {
	background: var(--acc);
	color: var(--card);
}

.card {
	background: var(--card);
	padding: 15px;
}

.flavortext {
	font-style: italic;
	background: var(--card);
	padding: 0.5rem 1rem;
	border-left: 3px solid var(--acc);
	margin: 0;
}

/* GALLERY - PAGES PHP */
.focus img {
	max-width: 100%;
	max-height: 80vh;
	margin-bottom: 1rem;
}

.focus h2 {
	margin-top: .5rem;
}

.display {
	-webkit-columns: 4 200px;
    -moz-columns: 4 200px;
	columns: 4 200px;
}

.display .galleryitem {
	padding: 0.5rem;
	margin-bottom: 1rem;
}

.display .galleryitem img {
	width: 100%;
	transition: all 0.2s ease;
}

.display .galleryitem img:hover {
    box-shadow: 0 0 0 5px var(--acc);
}

/* GALLERY - TABS */
.thumb img {
	max-height: 100px;
	max-width: 100px;
	margin: 5px;
	transition: all 0.2s ease;
}

.thumb img:hover {box-shadow: 0 0 0 5px var(--acc);}

.tabwrap {
	text-align: center;
}

.tabwrap section {
	display: none;
	margin-bottom: 3rem;
}

.tabwrap section:target {
	display:block;
}

.tabwrap img {max-width: 100%; max-height: 65vh; margin-bottom: 1.5rem;}

.tabwrap p {text-align: left;}

.tabwrap span {display: block;}

.tabwrap h2 {margin: 0 0 25px; padding-top: 20px;}

/* CARDS */
.gallery .preview.card {flex: 1 1 0; min-width: 18vw; max-width: 25vw;}

.gallery .oc.card {min-width: 25vh; max-width: 28vh;}

.gallery {justify-content: center;}

.card.column {
	text-align: center;
	justify-content: start;
	align-items: center;
	padding: 0;
}

.preview.card.column div {height: 24vh; width: 100%;}

.oc.card.column div {height: 28vh; width: 100%;}

.oc .big {font-family: var(--font); font-size: 1.2rem;}

.card.column div img {object-fit: cover; width: 100%; height: 100%;}

.card.column h3, .card.column .big, .card.column h4 {margin: 15px 10px 15px;}

.card.column p {margin: 0 15px 25px;}

.nocap .card.column .big {margin: auto 10px; padding: 15px 10px;}

/* OC DIRECTORY */
.oc .tag a {color: var(--accb); font-weight: normal; text-decoration: underline;}

.oc .tag a:hover {color: var(--acc);}

/* SITE MAP */
.maplist summary {cursor: pointer; display: list-item; transition: all 0.2s ease;}

.maplist summary:hover {text-decoration: underline dotted; color: var(--accb);}

.maplist details {display: inline-block;}

button {font-family: 'Poppins', sans-serif; font-size: 1rem;}

.deets {list-style-type: none; margin: .5rem 0 .5rem -13px;}

.deets summary {font-weight: bold;}

.deets details > ul {padding-top: .5rem; margin-left: 1rem;}

.banner {
	max-width: 90%;
}

ul.changelog, ul {
	padding-left: 15px;
}

.changelog li {
	border-bottom: 1px solid var(--liborder);
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.changelog li:nth-last-child(1) {border-bottom: none;}

/* STATUS CAFE */
#statuscafe {padding: 1em; background: var(--card); max-width: 70vw;}

#statuscafe-username {margin-bottom: .5em;}

#statuscafe-username a {text-decoration: none;}

/*#statuscafe-content {}*/

@media (max-width: 960px) {
	body {background-attachment: scroll;}

	.display {columns: 2 45%;}
	
	.sidebar, .main {flex: 0 0 100%;}
  
	.main-content {padding: 25px;}
	
	.main-footer {display: none;}
	
	.side-footer {display: block;}
  
	.sidebar {position: relative; height: 90vh; justify-content: center; order: 3;}
  
	.col, .col-4, .col-6, .col-7 {flex: 0 0 100%;}
  
	.col-7.art {flex: 0 0 100%;}
  
	.gallery .preview.card {min-width: 30vw; max-width: 50vh;}
  
	.gallery .preview.card div {height: 25vh;}
  
	.gallery .oc.card {min-width: 20vw; max-width: 28vh;}
  
	.gallery .oc.card div {height: 30vh;}
  
	.uptitle {margin-bottom: 0;}
  
	.text-right-center, .text-left-center {text-align: center;}
  
	.galerya .art {height: 50vh;}
	
	.galerya .caption {max-height: auto;}
	
	/*.btn-side {min-width: 150px;}
	
	.bottom .tabwrap > section {
	margin-top: -200px;
	padding-top: 100px;*/
}
 

@media (max-width: 768px) {
  .btn-side {min-width: 100px;}
  
  .col, .col-3, .col-4, .col-6, .col-7 {flex: 0 0 100%;}

  .display {columns: 1;}
  
  .gallery .preview.card {min-width: 43vw; max-width: 70vw;}
  
  .gallery .oc.card {min-width: 30vw; max-width: 45vw;}
  
  .gutters {
	column-gap: 3vw;
	row-gap: 3vw;

}

	img.float-left, img.float-right {
	float: none;}
	
	/*.btn-side {min-width: 120px;}*/
}