/*
Theme Name: Coders Teaparty
Author: Sova
Author URI: https://equestria.social/@graymouse
Description: Simple custom theme for Coders Teaparty Game Development team
Version: 1.0
Requires at least: 5.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: coders-teaparty
Domain Path: /languages
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

/* =============== GENERAL STYLES =============== */

@font-face {
	font-family: 'Abril Fatface';
	src: url('assets/fonts/abril-fatface/AbrilFatface-Regular.ttf') format('truetype')
}

@font-face {
	font-family: 'Poiret One';
	src: url('assets/fonts/Poiret_One/PoiretOne-Regular.ttf') format('truetype')
}

@font-face {
	font-family: 'Hymmnos';
	src: url('assets/fonts/hymmnos.ttf') format('truetype')
}

/* Variables only */
:root {
	--default-font-family: "Source Sans 3";
	--button-color: #AFC696;
	--button-hover-color: #D889A7;
	--link-color: steelblue; 
	--mobile-header-height: 4rem;
	/* darjilling color */
	--primary-color: #f0e7e0;
	/* matcha tea color */
	--secondary-color: #AFC696;
	/* raspberry-like */
	--link-hover-color: #D889A7;
	--website--max-width: 1200px;
	--footer-height: 5rem;
}

:root {
	background-color: #23153c;
	background-attachment: fixed;
}

html,
body {
	/*
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%239C92AC' fill-opacity='0.2' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
	*/
	font-family: var(--default-font-family) !important;
	font-weight: 300;
	margin: 0; /* remove default browser margins */ 
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}


html {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}


body {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

ul.menu {
	margin: 0;
}

h1,
h2 {
	font-family: 'Poiret One';
	margin-top: 0.5em;
  	margin-bottom: 0.5em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-align: inherit;
	font-optical-sizing: auto;
	font-weight: 700;
}

:is(h3, h4, h5, h6) {
	letter-spacing: 0.075em;
}

h1 {
	color: #6fa329;
	font-size: 42px;
}

h2 {
	color: #6fa329;
	font-size: 36px;
}

a {
	text-decoration: none;
	color: var(--link-color);
	display: inline-block;
	position: relative;  
}

/* =============== TABLE STYLES =============== */
table {
  width: 100%;
}

tr:nth-of-type(2n+1) {
  background-color: #f6f9fb;
}

th {
  background-color: var(--secondary-color);  
  padding: .25em 0;
}

td {
  text-align: center;
  padding: .25em 0;
}

/* =============== LINK STYLES =============== */
a:hover {
	color: var(--link-hover-color);
}

.content-area a::after {
	background: none repeat scroll 0 0 transparent;
	bottom: 0;
	content: "";
	display: block;
	height: 2px;
	background: var(--link-hover-color);
	transition: all 0.25s ease 0s, left 0.25s ease 0s;
	width: 0;
	position: absolute;
	top: 0;
	opacity: .45;
	margin-top: 1.25em;
  }
  
.content-area a:hover::after {
	width: 100%;
}

.content-area a.no-hover-effects, 
.content-area .no-hover-effects a {
	padding-bottom: initial;
}

.content-area a.no-hover-effects::after, 
.content-area .no-hover-effects a::after  {
	display: none;
}

h1 > a:after, 
h2 > a:after {
	display: none;
}

li {
	padding-top: .5em;
}

input[type="text"] {
	padding: 0.75em;
	font-size: 16px;
	font-family: var(--default-font-family);
	font-weight: lighter;
}

input[type="text"],
input[type="password"] {
	border: 1px double darkgray;
	outline: none;
	box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.07);
	border-radius: 5px;
}

form input[type="submit"] {
	padding: .75em;
	text-transform: uppercase;
	font-family: "Poiret One", sans-serif;
	background: var(--secondary-color);
	border: none;
	border-radius: 5px;
	transition: background-color 250ms ease-in;
}

form input[type="submit"]:hover {
	cursor: pointer;
	background: var(--link-hover-color);
}

.text-centered {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
}

blockquote {
	color: gray;
	display: block;  
	border-left: 2px solid var(--link-color);
	margin: 1.25em 0;
	padding: 0.5em 10px;
	position: relative;
	background: linear-gradient(90deg, var(--primary-color), transparent);
}
  
blockquote > p {
	display: inline;
	line-height: 1.5em;
}

video {
	width: 100%;
}

/* --- experimental colors --- */
/* --- https://doka.guide/css/accent-color/ --- */
html {
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button
) {
  color: var(--brand);
}

/* =============== CONTENT STYLES =============== */

.content-wrap {	
	margin: 0 auto;
	max-width: var(--website--max-width);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;  
	z-index: 1;
}

@media screen AND (min-width: 601px) {
	.content-wrap:not(.no-sidebar) {
		background-color: var(--primary-color);  
		flex-grow: 1;
		display: grid;
		grid-template-columns: 1fr 5fr;
	}
}

.content-area {  
	padding: 2rem 4rem;
	background: white;
	border-radius: 0 0 .33em .33em;
	position: relative;
	overflow-x: hidden;
}

.content-wrap.no-sidebar .content-area {
	background-color: #eadbc9;  
	border-radius: 2rem;
	margin: auto;
}

.content-area .article-full img {
	max-width: calc(100vw - 4rem); /* prevent images from overflowing */
	height: auto;
}

.content-area h4>a::before {
	content: "#";
	opacity: 0;
	margin-left: -1em;
	transition: all 0.25s;
}

.content-area h4>a:hover::before {
	opacity: 1;
	margin-left: 0;
}

.article-full {
	font-size: clamp(1rem, -0.231vw + 1.185rem, 1.125rem);
}

/* =============== PAGINATION STYLES =============== */

.pagination ul {
	list-style: none;
	display: flex;
	padding: 0;
  }
  
  .pagination a {
	border: 1px solid var(--link-color);
	border-radius: 3px;
	padding: .5em;
	min-width: 1em;
	margin: .25em;
	text-align: center;
  }
  
  .pagination a:hover {
	border: 1px solid var(--link-hover-color);
	transition: 100ms;
  }
  
  .pagination a::after {
	display: none;
  }

/* =============== MISC STYLES =============== */

.error-message,
.success-message {
	padding: 1em;
	display: block;
	max-width: 50%;
	margin: 0 auto;
	text-align: center;
}

.error-message {
	background-color: pink;
}

.success-message {
	background-color: lightgreen;
}

.mobile-header {
	display: none;
}

/* TODO: check if these are still relevant after youtube plugin removal*/
.video-container {
	width: 100%; /*now it is 100% of viewport (window) width.*/
	display: inline-block;
	position: relative;
  }
  
  .video-container::after {
	padding-top: 56.25%; /* 16:9 ratio - divide height by width and multiply by 100 */
	display: block;
	content: '';
  }
  
  .video-container > iframe{
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}

/* --- Starry Sky animation on background by Jed Crowther https://codepen.io/jedcrowther/pen/wdzQvy --- */

.star {
  box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.4);
  position: absolute;
  width: 1px;
  height: 1px;
  border-radius: 2px;
  background-color: white;
}

/* =============== MOBILE STYLES =============== */
@media screen AND (max-width: 600px){
	body {
		overflow: initial; /* no Vanta.js anyways */
	}

	.content-area {
		height: 100%;
	}

    .mobile-header {
      display: block;
      height: 4rem;
      width: 100vw;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
      background: #34305a;    
	  box-shadow: 2px 0px 7px darkcyan;
    }

	
	.content-area {  
		margin: 0;	/* shrink margin intended for clouds shape divider */
		border-radius: 0;
		padding: 4rem 2rem;
	}

    .mobile-menu-switch {
        margin: .5rem;
        margin-left: auto;
        background: steelblue;
        width: 3rem;
        height: 3rem;
        clip-path: polygon(20% 0%, 100% 0, 100% 80%, 80% 100%, 0 100%, 0% 20%);
    }

	.mobile-menu-switch img {
		transform: rotate(90deg);
	}
}