/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
   /* FONTS */
   @import url('https://fonts.googleapis.com/css2?family=Bitcount+Grid+Single:wght@100..900&family=Bitcount+Single:wght@100..900&family=Comfortaa:wght@300..700&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Cutive+Mono&family=Doto:wght@100..900&family=Geostar&family=Handjet:wght@100..900&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Jacquard+12&family=Jacquard+24&family=Jacquarda+Bastarda+9&family=Jersey+10&family=Lacquer&family=Monoton&family=Nanum+Pen+Script&family=Orbitron:wght@400..900&family=Outfit:wght@100..900&family=Patrick+Hand&family=Permanent+Marker&family=Pixelify+Sans:wght@400..700&family=Press+Start+2P&family=Quicksand:wght@300..700&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Righteous&family=Rubik+Glitch&family=Sedgwick+Ave&family=Sedgwick+Ave+Display&family=Silkscreen:wght@400;700&family=VT323&display=swap');
   
  .quicksand-medium {
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500; /* 300 to 700 */
    font-style: normal;
  }
  .bitcount-single-medium {
    font-family: "Bitcount Single", system-ui;
    font-optical-sizing: auto;
    font-weight: 400; /* 100 to 900 */
    font-style: normal;
    font-variation-settings:
      "slnt" 0,
      "CRSV" 0.5,
      "ELSH" 0,
      "ELXP" 0;
  }
  .bitcount-grid-single-medium {
    font-family: "Bitcount Grid Single", system-ui;
    font-optical-sizing: auto;
    font-weight: 400; /* 100 to 900 */
    font-style: normal;
    font-variation-settings:
      "slnt" 0,
      "CRSV" 0.5,
      "ELSH" 0,
      "ELXP" 0;
  }
  .outfit-medium {
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400; /* 100 to 900 */
    font-style: normal;
  }
  .comfortaa-medium {
    font-family: "Comfortaa", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400; /* 300 to 700 */
    font-style: normal;
  }
  .orbitron-medium {
    font-family: "Orbitron", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500; /* 400 to 900 */
    font-style: normal;
  }
   
   /* VARIABLE COMPONENTS */

:root {
  --sitebg: #060908;
  --sitebg1: rgba(6,9,8,0.65);
  --sitebg2: rgba(6,9,8,1);
  --sitetxt: #96d496;
  --sitelink: #b6abc4; /*a092b0*/
  --sitelinkhov: #8756bb; /*7b6593*/
  --siteacc: #aa89cd;
  --headerbg: rgba(6,9,8,0.7);
  --headerbghov: rgba(6,9,8,0.9);
  --altbg: #060908;
  --altbg1: rgba(16,7,24,0.0);
  --altbg2: rgba(16,7,24,0.4);
  --alttxt: #96d496;
  --altlink: #a092b0;
  --altlinkhov: #7b6593;
  --altacc: #aa89cd;
  --headerbg2: rgba(16,7,24,0.7);
  --headerbg2hov: rgba(16,7,24,0.9);
  --zorlok: #d50700;
  --mtrap: #;
  --goncharov: #;
  --systemproc: #;
  --trillium: #80bae3;
  --razor: #;
  --tutorial: #;
  --txtfont: 'IBM Plex Mono', monospace;
  --headingfont: 'Jacquard 24', monospace;
  --titlefont: 'Jacquard 12', monospace;
  --subfont: 'Jacquard 12', monospace;
  --headerfont: 'Pixelify Sans', monospace;
  --listfont: 'Jersey 10', monospace;
  --iconfont: 'Font Awesome 7 Free', cursive;
}

/* BASIC COMPONENTS OF THE PAGE */

body {
  background-color: var(--sitebg);
  color: var(--sitetxt);
  font-family: var(--txtfont);
  margin: 0px;
  object-fit: cover;
  background-attachment: fixed;
}
div#picbg {
  background-image: url("/images/gamesbyalbie_banner.jpg");
  position: relative;
  z-index: 1;
  max-width: 100%;
  min-height: 100%;
  object-fit: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 50% 90%;
}
div#altbg {
  background-image: url("/images/unsplash_starry_night2.jpg");
  position: relative;
  z-index: 1;
  max-width: 100%;
  min-height: 100%;
  object-fit: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 10% 80%;
}
div#headspace {
  height: 30%;
  height: 200px;
  position: relative;
  z-index: 2;
}
div#storydivide {
  background-color: var(--sitebg1);
  z-index: 2;
  height: 20px; 
  clip-path: polygon(0 0%, 100% 100%, 100% 100%, 0% 100%); 
}
div#storybox {
  background: linear-gradient(rgba(6,9,8,0.65) 0%, rgba(6,9,8,1) 90%);
  position: relative;
  z-index: 3;
  padding: 10px 25px 15px 25px;
}
div#header {
 position: fixed;
 background-color: var(--headerbg);
 height: 8%;
 width: 100%;
 transition: 0.75s;
 display: flex;
 align-items: center;
 top: 0;
 left: 0;
 z-index: 4;
 clip-path: polygon(0 0%, 100% 0%, 100% 50%, 0% 100%); 
 box-sizing: border-box;
}
#header:hover {
 height: 15%; 
 width: 100%;
 transition: 0.75s;
 background-color: var(--headerbghov);
}
#header a {
  color: var(--siteacc);  
}
#header a:hover {
  color: var(--sitetext);  
}
#nav {
    display: none;
}
#header:hover #nav {    
  display: flex;
  position: fixed;
  right: 2%;
  top: 2%;
  width: 12vw;
  justify-content: space-between;
  font-size: 110%;
}
#menuicon {
  display: flex;
  color: var(--sitelink);
  font-family: var(--iconfont);
  position: fixed;
  left: 2%;
}
#header:hover #menuicon {    
  display: none;
}
#links {
    display: none;
    font-size: 120%;
}
#header:hover #links {
    display: flex;
    position: fixed;
    left: 2%;
    width: 37vw;
    justify-content: space-between;
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    transform: rotate(-2deg); 
    font-weight: bold;
    color: var(--sitetext);
    font-family: var(--headerfont);
    font-size: 120%;
}

/* ALT PAGES */

#headspace.altpage {
  height: 10%;
  height: 75px;
  position: relative;
  z-index: 2;
}
#storydivide.altpage {
  background-color: var(--altbg1);
  z-index: 2;
  height: 20px; 
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); 
}
#storybox.altpage {
  background: linear-gradient(rgba(16,7,24,0.0) 0%, rgba(16,7,24,0.4) 100%);
  position: relative;
  z-index: 3;
  padding: 10px 25px 15px 25px;
}
#header.altpage {
 position: fixed;
 background-color: var(--headerbg2);
 height: 8%;
 width: 100%;
 transition: 0.75s;
 display: flex;
 align-items: center;
 top: 0;
 left: 0;
 z-index: 4;
 clip-path: none; 
 box-sizing: border-box;
}
#header:hover.altpage {
 height: 12%; 
 width: 100%;
 transition: 0.75s;
 background-color: var(--headerbg2hov);
}
#header:hover.altpage #links {
    display: flex;
    position: fixed;
    left: 2%;
    width: 37vw;
    justify-content: space-between;
    -webkit-transform: none;
    -moz-transform: none;
    transform: none; 
    font-weight: bold;
    color: var(--sitetext);
    font-family: var(--headerfont);
}
#header:hover.altpage #nav {
    top: unset;
}

/* FOOTER */
#footer {
  font-size: 75%;
  font-weight: 400;
  color: var(--sitelink);
  text-transform: lowercase;
  text-align: center;
  padding: 20px;
  margin: 0 auto;
}
#footer .acc {
  color: var(--sitetxt);
}
#footer a:hover {
  color: var(--sitetxt);
}
hr {
    color: var(--sitelink);
    border-color: var(--sitelink);
}

/* STYLING ELEMENTS */
h1 {
  color: var(--siteacc);
  font-size: 330%;
  font-weight: 300;
  font-family: var(--headingfont);
}
h2 {
  color: var(--siteacc);
  font-size: 190%;
  font-weight: 300;
  font-family: var(--titlefont);
}
h3 {
  color: var(--sitetxt);
  font-size: 170%;
  font-weight: 300;
  font-family: var(--headingfont);
}
h4 {
  color: var(--siteacc);
  font-size: 160%;
  font-weight: 400;
  font-family: var(--subfont);
}
.acc {
  color: var(--siteacc);  
}
.zorloktitle {
  font-family: "Righteous", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 180%;
}
.mtraptitle {
  font-family: "Lacquer", cursive;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 180%;
}
.gonchtitle {
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 800;
  font-size: 180%;
}
.systemtitle {
  font-family: monospace;
  text-transform: lowercase;
  letter-spacing: 1px;
  font-size: 180%;
}
.raztitle {
  font-family: "Outfit", cursive;
  text-transform: lowercase;
  letter-spacing: 2px;
  font-size: 180%;
}
.tutorialtitle {
  font-family: "Quicksand", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 120%;
}
.cols { display: flex; width: 100%; justify-content: space-evenly; padding: 0px; } 
.col1 { flex: 1; text-align: left; width: 100%; margin-right: 3%; } 
.col2 { flex: 2; width: 100%; min-width: 20%; max-width: 20%; text-align: right; margin-left: 1%; }
.widgeticon a { font-size: 200%; color: var(--siteacc); }

.arccols { display: flex; width: 100%; justify-content: space-evenly; padding: 0px; } 
.arccol1 { flex: 1; text-align: left; width: 100%;  margin-left: 3%; margin-right: 2%; } 
.arccol2 { flex: 2; width: 100%; min-width: 50%; max-width: 50%; text-align: right; margin-left: 2%;  margin-right: 3%; }
.widgeticon a { font-size: 200%; color: var(--siteacc); }

/* ICONS */
.fa, .fa-brands, .fa-duotone, .fa-light, .fa-regular, .fa-solid, .fa-thin, .fab, .fad, .fal, .far, .fas, .fat {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
}
.fa-solid, .fas, .fa, .fa-brands {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
}

/* INTERACTIVE ELEMENTS */

a {
  color: var(--sitelink);
  }
a:hover {
  color: var(--sitelinkhov);
}

/* LISTS */
.customlist ul {
  list-style: none;
  list-style-type: none;
  padding-left: 2em;
  font-family: var(--listfont);
  font-size: 120%;
}
.choice::before {
    font-family: var(--iconfont);
    color: var(--sitetxt);
    font-weight: 600;
    font-size: 0.8em;
    margin-left: 0.25em;
    margin-right: 0.95em;
    cursor: default;
}
.zorlokchoice::before {
    content: "\f7e4";
}
.mtrapchoice::before {
    content: "\f023";
}
.gonchchoice::before {
    content: "\f03d"; /* f508, f008, e131, f03d */
}
.systemchoice::before {
    content: "\f135";
}
.razchoice::before {
    content: "\f071"; /* f059, f225, f071, f06a */
}
.tutorialchoice::before {
    content: "\f101";
    font-size: 110%;
    margin-right: 0.65em;
}

/* MOBILE COMPATABILITY */
@media screen and (max-width: 450px) {
#menuicon {
	left: 4%;
	display: none;
}
div#header {
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	align-content: flex-start;
	height: 20%;
}
#header:hover {
	height: 20%;
}
#header #links {
  display: flex;
	top: 3%;
	left: 4%;
	width: 90%;
	-webkit-transform: none;
	-moz-transform: none;
	transform: none;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
	font-size: 130%;
  position: fixed;
  font-weight: bold;
  color: var(--sitetext);
  font-family: var(--headerfont);
}
#header:hover #links {
	top: 3%;
	left: 4%;
	width: 90%;
	-webkit-transform: none;
	-moz-transform: none;
	transform: none;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
	font-size: 130%;
}
#header #nav {
  display: flex;
	position: relative;
	left: 4%;
	top: 15%;
	width: 40%;
	justify-content: space-between;
	font-size: 130%;
}
#header:hover #nav {
	position: relative;
	left: 4%;
	top: 15%;
	width: 40%;
	justify-content: space-between;
	font-size: 130%;
}
#footer {
	font-size: 90%;
}
.customlist ul {
	font-size: 150%;
	padding-left: 1em;
}
div#storydivide {
	height: 30px;
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}
div#pigbg {
	background-position: 30% 100%;
	top: 0;
	background-repeat: repeat;
}
.cols {
	flex-direction: column;
}
.col2 {
	flex: 2;
	width: 100%;
	min-width: 20%;
	max-width: 90%;
	text-align: left;
	margin-left: 2%;
}
h3 {
	color: var(--siteacc);
}
}