/*Font*/
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&family=Gaegu&display=swap');


@font-face{
	font-family: "proggytiny";
	src: url('font/ProggyTiny.ttf');
}
@font-face{
	font-family: "crisp";
	src: url('font/Crisp.ttf');
}
@font-face{
	font-family: "pixel";
	src: url('font/pixel.ttf');
}
@font-face{
	font-family: "cozette";
	src: url('font/CozetteVector.ttf');
}


/*Variables*/
:root {
  /*Common Variables*/
  --cursor: url('cursor.png'), auto;
  --pointer: url('cursor_pointer.png') 8 0, pointer;
  --font: crisp, Atkinson Hyperlegible, Verdana, Helvetica;
  --font2: MS PGothic, Atkinson Hyperlegible, Verdana, Helvetica;
  --fontsize: 16px;
  --boxshadow: inset 0 1px 1px 0 #ffffff99, inset 0 0 1px 0 #000000cc;
  --textshadow: -1px -1px 0 #1c1c1c66;
	
  /* Light mode */
  --light-outline: #4c282f;
  --light-text: #4c282f;
  --light-link: #554c80;
  --light-font-weight: 400;
  --light-bg: rgb(249,238,221);
  --light-b: linear-gradient(#036 30%,#023 80%);
  --light-theme-1: #569bc9;
  --light-theme-2: #554c80;
  --light-window: #f0f8ff66;
  --light-window-2: #f0f8f5cc;
  --light-button-1: #eee;
  --light-button-2: #ddd;
  --light-contrast: contrast(1);
  --light-opacity: .3;
  --light-icon: "☀";

  /* Dark mode */
  --dark-outline: black;
  --dark-text: lightgrey;
  --dark-link: #f96;
  --dark-font-weight: 300;
  --dark-bg: #333;
  --dark-b: linear-gradient(black, #201000);
  --dark-theme-1: #f93;
  --dark-theme-2: #966;
  --dark-window: #11111199;
  --dark-window-2: #11111199;
  --dark-button-1: #2c2c2c;
  --dark-button-2: #101010;
  --dark-contrast: contrast(1.1);
  --dark-opacity: .8;
  --dark-icon: "☾";
 
  
  /*Visibility*/
  --visible: flex;
  --hidden: none;
 
  /* Default mode */
  --outline: var(--light-outline);
  --text-color: var(--light-text);
  --link-color: var(--light-link);
  --font-weight: var(--light-font-weight);
  --bg-color: var(--light-bg);
  --bg: var(--light-b);
  --theme-color-1: var(--light-theme-1);
  --theme-color-2: var(--light-theme-2);
  --window: var(--light-window);
  --window-2: var(--light-window-2);
  --button-1: var(--light-button-1);
  --button-2: var(--light-button-2);
  --contrast: var(--light-contrast);
  --theme-icon: var(--light-icon);
  --opacity: var(--light-opacity);
  

  --visibility: var(--visible);
  --visibility-inv: var(--hidden);
}

/* Switched mode */
.theme-switch:checked ~ #page {
  --outline: var(--dark-outline);
  --text-color: var(--dark-text);
  --link-color: var(--dark-link);
  --font-weight: var(--dark-font-weight);
  --bg-color: var(--dark-bg);
  --bg: var(--dark-b);
  --theme-color-1: var(--dark-theme-1);
  --theme-color-2: var(--dark-theme-2);
  --window: var(--dark-window);
  --window-2: var(--dark-window-2);
  --button-1: var(--dark-button-1);
  --button-2: var(--dark-button-2);
  --contrast: var(--dark-contrast);
  --theme-icon: var(--dark-icon);
  --opacity: var(--dark-opacity);
}
.theme-switch{
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

@media (prefers-color-scheme: dark) {
:root{	
  --outline: var(--dark-outline);
  --text-color: var(--dark-text);
  --link-color: var(--dark-link);
  --font-weight: var(--dark-font-weight);
  --bg-color: var(--dark-bg);
  --bg: var(--dark-b);
  --theme-color-1: var(--dark-theme-1);
  --theme-color-2: var(--dark-theme-2);
  --window: var(--dark-window);
  --window-2: var(--dark-window-2);
  --button-1: var(--dark-button-1);
  --button-2: var(--dark-button-2);
  --contrast: var(--dark-contrast);
  --theme-icon: var(--dark-icon);
  --opacity: var(--dark-opacity);
}
.theme-switch:checked ~ #page {
  --outline: var(--light-outline);
  --text-color: var(--light-text);
  --link-color: var(--light-link);
  --font-weight: var(--light-font-weight);
  --bg-color: var(--light-bg);
  --bg: var(--light-b);
  --theme-color-1: var(--light-theme-1);
  --theme-color-2: var(--light-theme-2);
  --window: var(--light-window);
  --window-2: var(--light-window-2);
  --button-1: var(--light-button-1);
  --button-2: var(--light-button-2);
  --contrast: var(--light-contrast);
  --theme-icon: var(--light-icon);
  --opacity: var(--light-opacity);
}
}




/*Common Stuff*/

*{box-sizing: border-box;-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; z-index: 0;}
*:focus{
	outline: 1px dotted white;
}
.switch-label{padding: .1rem;}
.theme-switch:focus ~ #page .themebutton::before{outline:none;cursor: var(--pointer);background-color: #00000099; text-decoration-line:none; outline: 1px dotted white;padding: .5rem .5rem 0 .5rem;}
.switch-label::before{content:var(--theme-icon);}
.switch-label:after{}
#page .themebutton:hover{outline:none; cursor: var(--pointer);border: 1px outset #ffffff99; background-color: #00000099; text-decoration-line:none;}

a {
	text-decoration-line: none;
	cursor: var(--pointer);
	color: var(--link-color);
}
a:hover{text-decoration-line: underline;}
a:focus{ outline: 1px dotted grey;}

img{filter: var(--contrast); width: 100%; object-fit: scale-down;}
	
body{
	cursor: var(--cursor);
	padding: 0;
	margin: 0;
	font-family: var(--font);
	image-rendering: normal;
	font-size: var(--fontsize);
	line-height: 1.2rem;
	image-rendering: pixelated;
}

#page{
	width: auto;
	height: auto;
	min-height: 100vh;
	background-color: var(--bg-color);
	background: var(--bg);
	color: var(--text-color);
	font-weight: var(--font-weight);
	z-index: 0;
	padding: 3vmin 0 0 0;
	position: relative;
}
#page::before{ /*moving stars*/
	content:""; 
	display: block; 
	position: fixed;
	top: 0; bottom: 0; left: 0; right: 0; 
	background-image: url('site graphics/stars-alt.png');
	background-size: 50%; 
	mask-image: url('site graphics/noise.png');
	mask-position: left;
	mask-size: 50% 50%; 
	mask-repeat: repeat;
	-moz-animation: mask 100s linear infinite;
	opacity: var(--opacity);
}
#page::after{ /*stars*/
   content:" ";
   display: block;
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   background: url('site graphics/stars-alt.png');
   z-index: -1;
   opacity: var(--opacity);
   background-size: 50%;
}

bg::before{ /*powerlines*/
	content: "";
	display: block;
	position: fixed;
	bottom: 0; top: 0; left: 0; right: 0;
	background-image: url('site graphics/powerlines-alt.png');
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size:75vmin;
	z-index: 0;
}
bg::after{ /*grid overlay*/
   content:" ";
   display: block;
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   background-image: linear-gradient(to right, #CB72FF 2px, transparent 2px), linear-gradient(to bottom, #CB72FF 2px, transparent 2px);
   background-size: 50px 50px;
   mix-blend-mode: color-dodge;
   z-index: -1;
   pointer-events: none;
   opacity: 0.1;
}

@keyframes mask{
	0%{opacity: 1;}
	100%{mask-position:right;opacity: 1;}
}

#statuscafespeech{
    border: 1px solid grey;
    border-radius: 10px;
    padding: 1rem;
}
.textbutton{
	border: 2px ridge grey;
	width: 88px;
	height: 31px;
	margin: 0;
	font-family: crisp;
	font-size: 14px;
	line-height: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration-line:none;
}
.textbutton:hover{text-decoration-line:none;}

/*Mobile Display*/
@media only screen{
wrapper, header, nav, footer{
	border: 1px solid var(--outline);
	width: 90%;
	margin: auto;
	padding: 0 .4rem 0 .4rem;
	box-shadow: var(--boxshadow);
	z-index: 1;
	position: relative;
}
header{background: linear-gradient(var(--theme-color-1) 30%, var(--theme-color-2) 150%);  font-size: 24px; border-radius: 3px 3px 0 0;}

nav{background-color: var(--button-1); padding: .1rem; font-family: crisp; font-size: 16px;}
nav a{background-color: var(--button-1); padding: .1rem; color: var(--text); border: 1px outset transparent;}
nav a:hover, nav a:focus{border: 1px outset #00000066; background-color: var(--button-2); text-decoration-line:none;}
header, nav{
	border-bottom: none;
	line-height: 1.6rem;
	overflow: hidden;
}
header, footer{font-family: proggytiny; color: white; text-shadow: var(--textshadow);}
h1 {font-size: inherit; line-height: inherit; padding: 0; margin: 0;display: inline;}
.themebutton{
	float: right; 
	width: 2rem; 
	height: 1.2rem;
	line-height: 1rem;
	font-size: 14px;
	padding-top: .2rem;
	text-align: center;
	border: 1px solid #ffffff99;
	border-top: none;
	background-color: #00000033;
	box-shadow: var(--boxshadow), 0 2px 1px 0 #ffffff66;
	cursor: var(--pointer);
}
sidebar{display: none;}
wrapper{display: block; overflow: none; height: auto; background-color: var(--window);}
footer{border-top: none; background: linear-gradient(var(--theme-color-2) -150%, var(--theme-color-1)); border-radius: 0 0 3px 3px;}
.row{display: block;}
.column{display: block;}
article{
	line-height: 1.4rem;
	border: 1px solid #666666;
	padding: .2rem;
	background-color: var(--window-2);
	margin-top: 2rem;
	margin-bottom: 2rem;
	font-family: var(--font2);
	padding-bottom: .5rem;
	}
article > h2 {
	border: 1px solid var(--outline);
	padding: .5rem .5rem .5rem .2rem;
	margin: -.2rem -.2rem .5rem -.2rem;
	background-color: var(--theme-color-2);
	font-family: var(--font);
	font-size: 19px;
	line-height: 1rem;
	color: white;
	text-shadow: var(--textshadow);
}

article > details {margin-top: .5rem;}
article > details > summary {cursor: var(--pointer);}
article > a, article > details > a {text-decoration-line: underline;}
article > a > img{width: auto;}
date{
	border: 1px solid var(--outline);
	background-color: var(--theme-color-1);
	padding: .2rem;
	color: white;
	float: right;
	margin: -2.05rem -3px 0 0;
	z-index: -1;
	font-family: crisp;
	text-shadow: var(--textshadow);
}
.introbox{
    flex-basis: 20%;
    flex-grow: none;
    margin-top: -1.5rem;
    margin-bottom: -1.5rem;
}

.heading{display: flex; gap: .1rem; width: auto; padding-bottom: .2rem;}

.heading-icon{
	width: 1.5rem; 
	height: 1.5rem;
	border: 1px solid var(--outline); 
	text-align: center;
	line-height: 1.2rem;
	padding: .1rem;
	background-color: var(--theme-color-1);
	box-shadow: inset 1px 1px 1px 0 rgba(255,255,255,.5), inset -1px -1px 1px 0 rgba(0,0,100,.5), -1px -1px 0 0 rgba(0,0,0,.3);
	color: white;
	text-shadow: -1px -1px 0 rgba(0,0,0,.5);
	font-family: Cozette;
	font-size: 1.2rem;
}
.heading-text{
	border: 1px solid var(--outline); 
	background-color: var(--theme-color-2); 
	text-shadow: -1px -1px 0 rgba(0,0,0,.5);
	color: white;
	flex-grow: 1;
	box-shadow: inset 1px 1px 1px 0 rgba(255,255,255,.5), inset -1px -1px 1px 0 rgba(0,0,100,.5), -1px -1px 0 0 rgba(0,0,0,.3);
	padding-left: .2rem;
}

.updates{margin: 0; padding:0; font-family: pixel;}
.updates li{list-style-type: none; padding: 1vmin;}
.updates li:nth-child(odd){background-color: #55555522;}

.statusinfo :nth-child(odd){background-color: #55555522;}


/*Gallery*/
.thumb{display:flex; gap: 1rem; flex-wrap: wrap; align-content: flex-start; row-gap: 4rem; padding:.5rem;}
.thumb a{width:35vmin; height: 35vmin; text-align: center; font-family: pixel;}
.thumb img{object-fit: scale-down; filter:grayscale(.7);}
.thumb img:hover{filter: grayscale(0); box-shadow: 0 0 10px 0 var(--theme-color-2);}


/*Desktop/Tablet Display*/
@media only screen and (min-width: 641px) {
wrapper, header, nav, footer{
	width: 60vw;
	min-width: 600px;
}
wrapper{
	height: 80vh;
	width: 60vw;
	display: flex;
	padding: 0;
}
sidebar{
	display: flex;
	flex-grow: none;
	flex-direction: column;
	border-right: 1px solid var(--outline);
	flex-basis: 150px;
	box-shadow: var(--boxshadow);
	background-color: var(--button-1);
	padding: .5vmin;
	gap: .5vmin;
	overflow: auto;
}
main{flex-basis: 1; overflow: auto; background-color: var(--window); width: 100%; padding: 1rem;}
.row{display: block;}
.column{display: flex; gap: 1rem;}
article{
	margin: 1rem .2rem;
	position: relative;
	z-index: 0;
	padding: .5rem;
}
aside{
	border: 1px solid var(--outline);
	box-shadow: inset 0 1px 1px 0 #00000033;
	background-color: var(--window);
	width: 100%;
	margin: 0 auto;
	padding: calc(.1rem + .5vmin);
}
.minitext{font-family: proggytiny; line-height: calc(.5rem + .5vmin);display: flex; flex-wrap: wrap;}
img{object-fit: scale-down;}

.introbox{
    flex-basis: 25%;
    flex-grow: none;
    margin-top: -2rem;
    margin-bottom: -2rem; 
}


aside ul{font-family:pixel ; font-size: 16px; margin: 0; border-left: 1px dotted dimgrey; list-style: none;}
aside li{border-bottom: 1px dotted dimgrey; margin-left: -2.5rem; padding-left: 1rem;}

/*Gallery*/
.thumb{display:flex; gap: 1rem; flex-wrap: wrap; align-content: flex-start; row-gap: 5rem;}
.thumb a{width:20vmin; height: 20vmin;}
	
}