/*===========================================================//
//    _   _       _     _ _        _                         //
//   | | | | __ _| |__ (_) |_ __ _| |_        ___ ___ ___    //
//   | |_| |/ _` | '_ \| | __/ _` | __|      / __/ __/ __|   //
//   |  _  | (_| | |_) | | || (_| | |_   _  | (__\__ \__ \   //
//   |_| |_|\__,_|_.__/|_|\__\__,_|\__| (_)  \___|___/___/   //
//                                                           //
//===========================================================*/
* {
	margin: 0;
	padding: 0;
}

:root {
	font-family: Rosario;
	background-color: var(--darkblue);
	color: var(--white);
}

/*===============================//
//    _____           _          //
//   |  ___|__  _ __ | |_ ___    //
//   | |_ / _ \| '_ \| __/ __|   //
//   |  _| (_) | | | | |_\__ \   //
//   |_|  \___/|_| |_|\__|___/   //
//                               //
//===============================*/
@font-face {
	font-family: Rosario;
	src: url("fonts/Rosario-Regular.ttf");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: Rosario;
	src: url("fonts/Rosario-Italic.ttf");
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: Rosario;
	src: url("fonts/Rosario-Bold.ttf");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: Rosario;
	src: url("fonts/Rosario-BoldItalic.ttf");
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: Inconsolata;
	src: url("fonts/Inconsolata.otf")
}

@font-face {
	font-family: UbuntuMono;
	src: url("fonts/UbuntuMono-R.ttf")
}

/*===============================//
//    ____            _          //
//   | __ )  ___   __| |_   _    //
//   |  _ \ / _ \ / _` | | | |   //
//   | |_) | (_) | (_| | |_| |   //
//   |____/ \___/ \__,_|\__, |   //
//                      |___/    //
//===============================*/
body {
	display: grid;
	/*height: 100%;*/
}

/* Small Screen */
@media screen and (max-width: 600px) {
	body {
		/*grid-template-columns: calc(100vw - 20px);*/
		grid-template-rows: 1.5vh auto 40px;
		grid-template-areas: 
			"top"
			"main"
			"bot"
		;
	}
}

/* Normal Screen */
@media screen and (min-width: 600px) {
	body {
		grid-template-columns: 1fr calc(80vw + 120px) 1fr;
		grid-template-rows: 6vh auto 40px;
		grid-template-areas:
			"top  top  top"
			"left main right"
			"bot  bot  bot"
		;
	}
}

/* Wide Screen */
@media screen and (min-width: 1450px) {
	body > #habitat {
		width: 1250px;
		justify-self: center;
	}
}

body > #habitat {
	grid-area: main;
	padding: 0 12px;
}

/*========================================//
//    _   _       _     _ _        _      //
//   | | | | __ _| |__ (_) |_ __ _| |_    //
//   | |_| |/ _` | '_ \| | __/ _` | __|   //
//   |  _  | (_| | |_) | | || (_| | |_    //
//   |_| |_|\__,_|_.__/|_|\__\__,_|\__|   //
//                                        //
//========================================*/
#habitat {
	display: flex;
	flex-direction: column;
	overflow-x: auto;
}

#habitat > header {
	
}

#habitat > main {
	flex-grow: 1;
}

#habitat > footer {
	margin-top: 40px;
}

/*========================================//
//    _   _                _              //
//   | | | | ___  __ _  __| | ___ _ __    //
//   | |_| |/ _ \/ _` |/ _` |/ _ \ '__|   //
//   |  _  |  __/ (_| | (_| |  __/ |      //
//   |_| |_|\___|\__,_|\__,_|\___|_|      //
//                                        //
//========================================*/
header > h2 {
	font-style: italic;
	margin-top: -13px;
	font-size: 23px;
}

header > h2.lower {
	margin-top: -3px;
}

/*============================//
//    __  __       _          //
//   |  \/  | __ _(_)_ __     //
//   | |\/| |/ _` | | '_ \    //
//   | |  | | (_| | | | | |   //
//   |_|  |_|\__,_|_|_| |_|   //
//                            //
//============================*/
main > section {
	margin-top: 10px;
}

section {
	margin-top: 10px;
	overflow-x: auto;
}

/*=================================//
//    ___ _                        //
//   |_ _| |_ ___ _ __ ___  ___    //
//    | || __/ _ \ '_ ` _ \/ __|   //
//    | || ||  __/ | | | | \__ \   //
//   |___|\__\___|_| |_| |_|___/   //
//                                 //
//=================================*/
h1 {
	font-size: 50px;
	margin-bottom: 3px;
}

h2 {
	font-size: 35px;
	margin-top: 20px;
}

h3 {
	font-size: 23px;
	margin-top: 14px;
}

p {
	font-size: 18px;
}

a {
	color: var(--blue);
	font-weight: bold;
	text-decoration: none;
}

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

a:focus {
	outline: none;
}

button {
	font-family: Rosario;
	font-weight: bold;
	font-size: 18px;
	background-color: var(--grey);
	color: var(--orange);
	border: none;
	padding: 10px;
	margin: 2px 0;
	min-width: 40px;
}

button:focus {
    outline: none;
}

button:hover {
	background-color: var(--orange);
	color: var(--darkblue);
	cursor: pointer;
}

button.small {
	font-size: 18px;
	padding: 4px 10px;
}

pre {
	font-family: Inconsolata;
	tab-size: 4;
	font-size: 18;
	background-color: var(--grey);
	padding: 5px;
	display: inline-block;
	margin-top: 5px;
	vertical-align: top;
}

pre:focus {
	outline: none !important;
}

code {
	font-family: Inconsolata;
	tab-size: 4;
	font-size: 18;
	/*background-color: var(--grey);*/
	/*padding: 3px;*/
}

/* What is this for!? */
pre > code {
	font-family: Inconsolata;
	tab-size: 4;
	font-size: large;
}

hr {
	border-style: solid;
	border-width: 1px;
	margin-top: 8px;
	margin-bottom: 8px;
}

.collapse {
	height: 0px;
	overflow-y: hidden;
	transition-property: all;
	transition-duration: 1s;
	transition-timing-function: cubic-bezier(0.2, 1, 0.5, 1);
}

/*============================================================//
//    _____                          _   _   _                //
//   |  ___|__  _ __ _ __ ___   __ _| |_| |_(_)_ __   __ _    //
//   | |_ / _ \| '__| '_ ` _ \ / _` | __| __| | '_ \ / _` |   //
//   |  _| (_) | |  | | | | | | (_| | |_| |_| | | | | (_| |   //
//   |_|  \___/|_|  |_| |_| |_|\__,_|\__|\__|_|_| |_|\__, |   //
//                                                   |___/    //
//============================================================*/
:root {
	--blue:      rgb(0, 128, 255);
	--green:     rgb(0, 255, 128);
	--red:       rgb(255, 70, 70);
	--orange:    rgb(255, 128, 0);
	--yellow:    rgb(255, 255, 0);
	--cyan:      rgb(0, 255, 255);
	--pink:      rgb(255, 128, 128);
	--lilac:     rgb(128, 128, 255);
	--white:     rgb(224, 224, 224);
	--black:     rgb(13, 16, 23);
	--grey:      rgb(45, 56, 77);
	--darkblue:  rgb(23, 29, 40);
	--lightgrey: rgb(65, 76, 97);
}

.green     { color: var(--green) }
.blue      { color: var(--blue) }
.green     { color: var(--green) }
.red       { color: var(--red) }
.orange    { color: var(--orange) }
.yellow    { color: var(--yellow) }
.cyan      { color: var(--cyan) }
.pink      { color: var(--pink) }
.lilac     { color: var(--lilac) }
.white     { color: var(--white) }
.black     { color: var(--black) }
.grey      { color: var(--grey) }
.darkblue  { color: var(--darkblue) }
.lightgrey  { color: var(--lightgrey) }

.green-hover:hover     { color: var(--green) }
.blue-hover:hover      { color: var(--blue) }
.green-hover:hover     { color: var(--green) }
.red-hover:hover       { color: var(--red) }
.orange-hover:hover    { color: var(--orange) }
.yellow-hover:hover    { color: var(--yellow) }
.cyan-hover:hover      { color: var(--cyan) }
.pink-hover:hover      { color: var(--pink) }
.lilac-hover:hover     { color: var(--lilac) }
.white-hover:hover     { color: var(--white) }
.black-hover:hover     { color: var(--black) }
.paleblue-hover:hover  { color: var(--paleblue) }
.grey-hover:hover      { color: var(--grey) }
.darkblue-hover:hover  { color: var(--darkblue) }
.lightgrey-hover:hover  { color: var(--lightgrey) }

button.green:hover     { background-color: var(--green) }
button.blue:hover      { background-color: var(--blue) }
button.green:hover     { background-color: var(--green) }
button.red:hover       { background-color: var(--red) }
button.orange:hover    { background-color: var(--orange) }
button.yellow:hover    { background-color: var(--yellow) }
button.cyan:hover      { background-color: var(--cyan) }
button.pink:hover      { background-color: var(--pink) }
button.lilac:hover     { background-color: var(--lilac) }
button.white:hover     { background-color: var(--white) }
button.black:hover     { background-color: var(--black) }
button.paleblue:hover  { background-color: var(--paleblue) }
button.grey:hover      { background-color: var(--grey) }
button.darkblue:hover  { background-color: var(--darkblue) }
button.lightgrey:hover  { background-color: var(--lightgrey) }

:root {
	--keyword:      var(--blue);
	--commentLine:  var(--green);
	--commentBlock: var(--red);
	--type:         var(--orange);
	--operator:     var(--yellow);
	--number:       var(--cyan);
	--text:         var(--pink);
	--commentDoc:   var(--lilac);
	--internal:     var(--lilac);
	--special:      var(--yellow);
}

code.keyword      { color: var(--keyword); }
code.type         { color: var(--type); }
code.operator     { color: var(--operator); }
code.commentLine  { color: var(--commentLine); }
code.commentBlock { color: var(--commentBlock); }
code.commentDoc   { color: var(--commentDoc); }
code.number       { color: var(--number); }
code.text         { color: var(--text); }
code.internal     { color: var(--internal); }
code.special      { color: var(--special); }

.faded { filter: saturate(0%) }

/*========================================//
//    _     _ _       ____           _    //
//   | |   (_) |_   _|  _ \ __ _  __| |   //
//   | |   | | | | | | |_) / _` |/ _` |   //
//   | |___| | | |_| |  __/ (_| | (_| |   //
//   |_____|_|_|\__, |_|   \__,_|\__,_|   //
//              |___/                     //
//========================================*/
.lilypad {
	background-color: var(--darkblue);
	min-width: 100vw;
	min-height: 100vh;
}

.lily {
	font-family: Inconsolata;
	tab-size: 4;
	font-size: 18;
	background-color: var(--grey);
	padding: 5px;
	display: inline-block;
	margin-top: 5px;
}