@font-face{
    font-family: "Lazer 84";
    src: url('/storage/fonts/LAZER 84/Lazer84.ttf');
}

@font-face{
    font-family: "Press Start 2P";
    src: url('/storage/fonts/Press Start 2P/PressStart2P.ttf');
}

/*----------------------------------------------------------------------*/

/* |||||WELCOME||||| */

/*GRID - WELCOME*/

.welcome {
    display: grid;
	background: #b9a1b0 url("/art/pixels/pinkstarsky.gif") fixed repeat;
    grid-template-columns: auto 400px auto;
    grid-template-rows: 20vh 250px 250px 30px;
    grid-template-areas: 
	"space space space" 
	"changelog main image" 
	"webring main image" 
	". footer .";
	font-size: initial;
}

.changelog {
	grid-area: changelog;
	justify-self: end;
	align-self: start;
	margin: auto 35px;
}

.welcome-button {
	grid-area: webring;
	justify-self: end;
	align-self: end;
	margin: auto 90px;
	padding: 2% 50px;
}

.welcome-box {
	grid-area: main;
	justify-self: stretch;
	align-self: stretch;
	display: grid;
	padding: 2%;
	grid-template-rows: 50% 50%;
	grid-template-columns: auto;
	grid-template-areas:
	"main main main main"
	"footer footer footer footer"
}

.welcome-link {
	grid-area: main;
	justify-self: stretch;
	align-self: end;
}

.welcome-text {
	grid-area: footer;
	justify-self: center;
	align-self: center;
}

.welcome-rating {
	grid-area: footer;
	justify-self: center;
	align-self: end;
	margin: 10px;
}

.welcome-image {
	grid-area: image;
	justify-self: start;
	align-self: center;
	margin: auto 35px;
}

.welcome .credits{
	grid-area: footer;
	justify-self: center;
	align-self: end;
	text-align: center;
	color: rgb(34, 11, 56);
	display: inline-block;
	padding:  0;
	font-weight: bold;
	font-size: 0.78em;
}

/*Welcome Body*/

.welcome body {
	margin: 0 auto;
	display: block;
	font-family: Arial;
}

.welcome article {
  background: #866c89 url("/art/pixels/spacecloudsbg.gif") fixed repeat;
  text-align: center;
  border: 3px solid rgb(255, 255, 230);
  box-shadow: 6px 6px rgb(255,113,206), -6px -6px rgb(1,205,254), 6px 6px 3px rgb(255,113,206), -6px -6px 3px rgb(1,205,254);
  border-radius: 30px;
}

.welcome embed {
	margin: 3px;
}


/*Welcome Text*/

.welcome main {
	padding: 0 0 4% 13%;
	font-family: Arial;
}

.welcome h1 {
	font-family: 'Lazer 84';
	color: rgb(255,113,206);
	font-size: 500%;
	padding: 1% 0 1% 0.5%;
	text-align: center;
	text-shadow: -2px -2px rgb(255, 255, 225), 
	4px 4px rgb(34, 11, 56), 
	7px 7px rgb(1,205,254);
	box-shadow: 0 2px rgb(255, 255, 225), 
	0 4px rgb(255,113,206), 
	0 6px rgb(34, 11, 56),
	0 8px rgb(1,205,254);
	display:inline-block;
	margin: auto;
}

.welcome h1:hover, .welcome h1:focus {
	color: rgb(255, 204, 224);
	text-shadow: -2px -2px rgb(255, 255, 230), 
	4px 4px rgb(255, 77, 148), 
	7px 7px rgb(0, 77, 230);
	box-shadow: 0 2px rgb(255, 255, 230), 
	0 4px rgb(255, 204, 224),
	0 6px rgb(255, 77, 148), 
	0 8px rgb(0, 77, 230);
}



.welcome p { 
	text-align: center;
	color: white;
	text-shadow: -1px -1px 10px rgba(48, 29, 48, 0.4), 1px 1px rgb(48, 29, 48);
	display: inline-block;
	padding:  0;
	font-weight: normal;
}

.welcome a {
	text-decoration: none;
	font-weight: inherit;
	color: #00ffff;
	text-shadow: -1px -1px 10px rgba(48, 29, 48, 0.4), 1px 1px #5c0819;
	
}

.welcome a:hover, .welcome a:focus{
	color: #ffecdb;
	text-shadow: -1px -1px 10px rgba(48, 29, 48, 0.4), 1px 1px rgb(48, 29, 48);
	outline: none;
}


.welcome img {
	max-width: initial;
}


/*----------------------------------------------------------------------*/



/* |||||HOME||||| */



/*GRID - HOME*/

.home-main {
    display: grid;
	background: #b9a1b0 url("/art/pixels/pinkstarsky.gif") fixed repeat;
    grid-template-columns: 27% 825px auto;
    grid-template-rows: 250px 50px auto 50px;
	grid-gap: 40px 0;
    grid-template-areas: 
	"info title ."
	". subtitle ."
	"menu main ." 
	". footer ." ;
}


.title {
	grid-area: title;
	justify-self: center;
	align-self: end;
	z-index: 1;
}


.credits{
	grid-area: footer;
	justify-self: center;
	align-self: start;
	text-align: center;
	color: rgb(34, 11, 56);
	display: inline-block;
	padding:  0;
	font-weight: bold;
	font-size: 0.9em;
}

/*Home Navbar*/

ul.sidenav {
  position: fixed;
  max-width: 35vw;
  margin: 20vh auto auto 6%;
  padding: 0 15px 30px;
  background-image: 
  
  /*Corners*/
  url(/storage/images/assets/corner-tl.gif),
  url(/storage/images/assets/corner-tr.gif),
  url(/storage/images/assets/corner-br.gif),
  url(/storage/images/assets/corner-bl.gif),
  /*Corner Color*/
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  /*Laterals*/
  url(/storage/images/assets/border-x.gif), 
  url(/storage/images/assets/border-y.gif), 
  url(/storage/images/assets/border-x.gif), 
  url(/storage/images/assets/border-y.gif),
  /*Lateral Color*/
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  /*Menu*/
  url(/storage/images/assets/menu.gif), 
  url(/storage/images/assets/menu_2.gif), 
  /*Buttons*/
  url(/storage/images/assets/button-1.gif), 
  url(/storage/images/assets/button-2.gif), 
  /*Titlebar*/
  url(/storage/images/assets/titlebar.gif),
  /*Titlebar Color*/
  url(/storage/images/assets/titlebar-cyan.gif),
  /*Scroll Arrows*/
  url(/storage/images/assets/arrow-l.gif),
  url(/storage/images/assets/arrow-r.gif),
  /*Scrollbar*/
  url(/storage/images/assets/scrollbar.gif),
  /*Background*/
  url(/art/pixels/spacecloudsbg.gif);
  
  background-repeat:
  
  /*Corners*/
  no-repeat,
  no-repeat,
  no-repeat,
  no-repeat,
  /*Corner Color*/
  no-repeat,
  no-repeat,
  no-repeat,
  no-repeat,
  /*Laterals*/
  repeat-x,
  repeat-y,
  repeat-x,
  repeat-y,
  /*Lateral Color*/
  repeat-x,
  repeat-y,
  repeat-x,
  repeat-y,
  /*Menu*/
  no-repeat, 
  repeat-x, 
  /*Buttons*/
  no-repeat, 
  no-repeat, 
  /*Titlebar*/
  repeat-x,
  /*Titlebar Color*/
  repeat-x,
  /*Scroll Arrows*/
  no-repeat,
  no-repeat,
  /*Scrollbar*/
  repeat-x,
  /*Background*/
  repeat;
  
  background-position: 
  
  /*Corners*/
  top left,
  top right,
  bottom right,
  bottom left,
  /*Corner Color*/
  top left,
  top right,
  bottom right,
  bottom left,
  /*Laterals*/
  top,
  left,
  bottom,
  right,
  /*Lateral Color*/
  top,
  left,
  bottom,
  right,
  /*Menu*/
  left 4px top 23px, 
  left top 23px, 
  /*Buttons*/
  left 4px top 4px, 
  right 4px top 4px, 
  /*Titlebar*/
  left top 4px,
  /*Titlebar Color*/
  left top 4px,
  /*Scroll Arrows*/
  left 4px bottom 4px,
  right 4px bottom 4px,
  /*Scrollbar*/
  left bottom 4px;
  
  background-origin: border-box;
  list-style-type: none;
  width: 250px;
  overflow: auto;
}

.sidenav-buttons {
	margin: 50px 10px 10px;
}

ul.sidenav li a {
  display: block;
  font-family: 'Press Start 2P';
  font-size: 0.96em;
  text-transform: uppercase;
  color: black;
  text-align: center;
  width: inherit;
  padding: 6px 14px;
  text-decoration: none;
  border: solid;
  border-radius: 2%;
  background-color: rgb(225,225,225);
  background-color: rgba(225,225,225,0.5);
} 

ul.sidenav li .active {
  background-color: rgb(177,91,82);
  color: white;
  border: solid;
  border-color: white;
  border-radius: 4%;
  text-shadow: 2px 2px rgb(84, 4, 0);
}

ul.sidenav li a:hover:not(.active) {
  background-color: black;
  color: white;
}

#menu {
	  display: none;
	  cursor: pointer;
	  font-family: 'Press Start 2P';
	  font-size: 18px;
	  color: black;
	  text-align: center;
	  width: inherit;
	  padding: 6px 14px;
	  text-decoration: none;
	  border: solid;
	  border-radius: 2%;
	  background-color: rgb(225,225,225);
	  background-color: rgba(225,225,225,0.5);
}

#menuhid {
	display: block;
}


/*Home Holders*/


.stamp-holder {
	position: fixed;
	bottom: 0;
	margin: 3% 11%;
	height: 150px;
	line-height: 150px;
	max-width: 90px;
	padding: 10px 20px 10px 20px;
	background: #866c89 url("/art/pixels/spacecloudsbg.gif") fixed repeat;
	border: 3px solid rgb(255, 255, 230);
	box-shadow: 6px 6px rgb(255,113,206), -6px -6px rgb(1,205,254), 6px 6px 3px rgb(255,113,206), -6px -6px 3px rgb(1,205,254);
	border-radius: 30px;	
}

.blinky-holder {
	position: fixed;
	top: 0;
	right: 0;
	margin: 4% 1%;
	height: 200px;
	line-height: 200px;
	max-width: 150px;
	padding: 10px 20px 10px 20px;
	background: #866c89 url("/art/pixels/spacecloudsbg.gif") fixed repeat;
	border: 3px solid rgb(255, 255, 230);
	box-shadow: 6px 6px rgb(255,113,206), -6px -6px rgb(1,205,254), 6px 6px 3px rgb(255,113,206), -6px -6px 3px rgb(1,205,254);
	border-radius: 30px;	
}


/*Home Body*/

body {
	margin: 0 auto;
	font-size: 0.85em;
	font-family: 'Arial';
}

.main-window {
	grid-area: main;
	align-self: center;
	justify-self: center;
	padding: 50px 70px 50px 70px;
	background: #866c89 url("/art/pixels/spacecloudsbg.gif") fixed repeat;
	border: 3px solid rgb(255, 255, 230);
	box-shadow: 6px 6px rgb(255,113,206), -6px -6px rgb(1,205,254), 6px 6px 3px rgb(255,113,206), -6px -6px 3px rgb(1,205,254);
	border-radius: 30px;
}

.home-main .main-window article:first-child {
	margin: 0 !important;
}

.home-main .main-window article:nth-child(even) {
	margin: 30px 50px 0 30px;
}

.home-main .main-window article:nth-child(odd) {
	margin: 30px 30px 0 50px;
}

/*Home Text*/

header {
	font-family: 'Lazer 84';
	color: rgb(255,113,206);
	font-size: 500%;
	text-align: center;
	text-shadow: -2px -2px rgb(255, 255, 225), 
	4px 4px rgb(34, 11, 56), 
	7px 7px rgb(1,205,254);
	letter-spacing: 8px;
	word-spacing: 15px;
	display:inline-block;
}

.separator {
	display: block;
	font-size: 1em;
	font-family: Arial;
	text-align: left;
	position: relative;
	margin: 15px 2px;
	text-indent: 10px;
	border-bottom: 2px dashed black;
}


p.intro {
	position: relative;
	display: inline-block;
	margin: 40px 25px 10px;
}

p {
	margin: 2px 10px 10px;
}

a {
	text-decoration: none;
	color: #1e90ff;
	
}

a:hover, a:focus{
	color: #f64747;
	outline: none;
}

a.front-page {
	display: block;
	padding: 5px;
	outline: none;
	text-decoration: none;
	font-weight: bold;
	color: black;
}

a.front-page:focus, a.front-page:hover {
	border: 1px dotted red;
	background-color: #01F8F8;
	padding: 4px;
}

.main-links {
	position: relative;
	margin: 40px 15px 0;
	display: block;
}

ul.sidenav h1{
	font-size: 1em;
	font-family: Arial;
	top: 5px;
	position: relative;
	margin: 0;
	text-align: center;
	display: block;
}

h1 {
	grid-area: subtitle;
	align-self: center;
	font-family: 'Press Start 2P';
	font-size: 1.2em;
	margin: 0;
	text-align: center;
	display: inline-block;
	text-transform: uppercase;
}

.main-window h1 {
	font-size: 1em;
	font-family: Arial;
	top: 5px;
	position: relative;
	margin: 0;
	text-align: center;
	display: block;
}

h2 {
	font-size: 1em;
	font-family: Arial;
	top: 5px;
	text-align: center;
	position: relative;
	margin: 0;
}

h3 {
	border-bottom: 1px dotted black;
}

h3:focus, h3:hover {
	border-bottom: 1px solid transparent;
}

.home-main .credits > a {
	color: #0500ae;

}

.home-main .credits > a:hover, .home-main .credits > a:focus {
	color: #53023f;

}


/*Home Articles*/


.sub-window {
  background: white;
  padding: 0 15px 25px 15px;
  box-shadow: none;
  border: none;
  border-radius: 0;
  background-image: 
  
  /*Corners*/
  url(/storage/images/assets/corner-tl.gif),
  url(/storage/images/assets/corner-tr.gif),
  url(/storage/images/assets/corner-br.gif),
  url(/storage/images/assets/corner-bl.gif),
  /*Corner Color*/
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  /*Laterals*/
  url(/storage/images/assets/border-x.gif), 
  url(/storage/images/assets/border-y.gif), 
  url(/storage/images/assets/border-x.gif), 
  url(/storage/images/assets/border-y.gif),
  /*Lateral Color*/
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  /*Menu*/
  url(/storage/images/assets/menu.gif), 
  url(/storage/images/assets/menu_2.gif), 
  /*Buttons*/
  url(/storage/images/assets/button-1.gif), 
  url(/storage/images/assets/button-2.gif), 
  /*Titlebar*/
  url(/storage/images/assets/titlebar.gif),
  /*Titlebar Color*/
  url(/storage/images/assets/titlebar-cyan.gif),
  /*Scroll Arrows*/
  url(/storage/images/assets/arrow-l.gif),
  url(/storage/images/assets/arrow-r.gif),
  /*Scrollbar*/
  url(/storage/images/assets/scrollbar.gif);
  
  background-repeat:
  
  /*Corners*/
  no-repeat,
  no-repeat,
  no-repeat,
  no-repeat,
  /*Corner Color*/
  no-repeat,
  no-repeat,
  no-repeat,
  no-repeat,
  /*Laterals*/
  repeat-x,
  repeat-y,
  repeat-x,
  repeat-y,
  /*Lateral Color*/
  repeat-x,
  repeat-y,
  repeat-x,
  repeat-y,
  /*Menu*/
  no-repeat, 
  repeat-x, 
  /*Buttons*/
  no-repeat, 
  no-repeat, 
  /*Titlebar*/
  repeat-x,
  /*Titlebar Color*/
  repeat-x,
  /*Scroll Arrows*/
  no-repeat,
  no-repeat,
  /*Scrollbar*/
  repeat-x;
  
  background-position: 
  
  /*Corners*/
  top left,
  top right,
  bottom right,
  bottom left,
  /*Corner Color*/
  top left,
  top right,
  bottom right,
  bottom left,
  /*Laterals*/
  top,
  left,
  bottom,
  right,
  /*Lateral Color*/
  top,
  left,
  bottom,
  right,
  /*Menu*/
  left 4px top 23px, 
  left top 23px, 
  /*Buttons*/
  left 4px top 4px, 
  right 4px top 4px, 
  /*Titlebar*/
  left top 4px,
  /*Titlebar Color*/
  left top 4px,
  /*Scroll Arrows*/
  left 4px bottom 4px,
  right 4px bottom 4px,
  /*Scrollbar*/
  left bottom 4px;
  background-origin: border-box;
  margin: 2% 7% 2% 7%;
}



/*----------------------------------------------------------------------*/

/* |||||ART||||| */

/*GRID - ART*/

.art {
	color: black;
	margin: 0 auto;
	width: 100vw;
	height: 100vh;
	font-size: 0.85em;
	background: #FEDDCB;
	font-family: Arial;
    display: grid;
	justify-content: stretch;
	align-content: stretch;
    grid-template-columns: 40vw auto;
    grid-template-rows: auto auto 328px;
	grid-gap: 20px 40px;
    grid-template-areas: 
	"folders modal"
	"folders modal" 
	"footer footer" ;
}

.art-bg {
	background: #FEDDCB fixed;
	background-image: url("/art/pixels/cityscape.gif");
	background-repeat: repeat-x;
	background-position: bottom;
	width: 100%;
	height: 100%;
	grid-area: footer;
	align-self: end;
	z-index: -2;
}

.art .credits {
    align-self: end;
    margin: 0 auto 10px;
    color: #13272b;
	background-color: #feddcb;
	border: 1px solid #c1d3c9;
	outline: 1px solid #71a3a9;
}

.art .credits > a {
	color: #4d4d4d;
	font-weight: bold;

}


.art .credits > a:hover, .art .credits > a:focus {
	color: #011db3;
	border: 1px solid transparent;
	background: none;

}
	
.art-modal {
	
	grid-row-start: -4;
	grid-row-end: -1;
	grid-column-start: 2;
	grid-column-end: 3;
	width: 80%;
	height: 80vh;
	align-self: end;
	justify-self: center;
	background: white border-box;
	background-image: 
	/*Corners*/
	  url(/storage/images/assets/corner-tl.gif),
	  url(/storage/images/assets/corner-tr.gif),
	  url(/storage/images/assets/corner-br.gif),
	  url(/storage/images/assets/corner-bl.gif),
	  /*Corner Color*/
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  /*Laterals*/
	  url(/storage/images/assets/border-x.gif), 
	  url(/storage/images/assets/border-y.gif), 
	  url(/storage/images/assets/border-x.gif), 
	  url(/storage/images/assets/border-y.gif),
	  /*Lateral Color*/
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  /*Menu*/
	  url(/storage/images/assets/menu.gif), 
	  url(/storage/images/assets/menu_2.gif), 
	  /*Buttons*/
	  url(/storage/images/assets/button-1.gif), 
	  url(/storage/images/assets/button-2.gif), 
	  /*Titlebar*/
	  url(/storage/images/assets/titlebar.gif),
	  /*Titlebar Color*/
	  url(/storage/images/assets/titlebar-grey.gif),
	  /*Scroll Arrows*/
	  url(/storage/images/assets/arrow-l.gif),
	  url(/storage/images/assets/arrow-r.gif),
	  /*Scrollbar*/
	  url(/storage/images/assets/scrollbar.gif);
	  
	  background-repeat:
	  
	  /*Corners*/
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  /*Corner Color*/
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  /*Laterals*/
	  repeat-x,
	  repeat-y,
	  repeat-x,
	  repeat-y,
	  /*Lateral Color*/
	  repeat-x,
	  repeat-y,
	  repeat-x,
	  repeat-y,
	  /*Menu*/
	  no-repeat, 
	  repeat-x, 
	  /*Buttons*/
	  no-repeat, 
	  no-repeat, 
	  /*Titlebar*/
	  repeat-x,
	  /*Titlebar Color*/
	  repeat-x,
	  /*Scroll Arrows*/
	  no-repeat,
	  no-repeat,
	  /*Scrollbar*/
	  repeat-x; 
	  
	  background-position: 
  
	  /*Corners*/
	  top left,
	  top right,
	  bottom right,
	  bottom left,
	  /*Corner Color*/
	  top left,
	  top right,
	  bottom right,
	  bottom left,
	  /*Laterals*/
	  top,
	  left,
	  bottom,
	  right,
	  /*Lateral Color*/
	  top,
	  left,
	  bottom,
	  right,
	  /*Menu*/
	  left 4px top 23px, 
	  left top 23px, 
	  /*Buttons*/
	  left 4px top 4px, 
	  right 4px top 4px, 
	  /*Titlebar*/
	  left top 4px,
	  /*Titlebar Color*/
	  left top 4px,
	  /*Scroll Arrows*/
	  left 4px bottom 4px,
	  right 4px bottom 4px,
	  /*Scrollbar*/
	  left bottom 4px;

	border: none;
	box-shadow: none;
	border-radius: 0;
	overflow: hidden;
	padding: 0 4px 62px;
	margin: 0 0 50px;
}

.art-folders {
	
	grid-row-start: -4;
	grid-row-end: -2;
	grid-column-start: 1;
	grid-column-end: 2;
	width: 250px;
    height: 300px;
	align-self: start;
	justify-self: center;
	background: white border-box;
	background-image: 
	/*Corners*/
	  url(/storage/images/assets/corner-tl.gif),
	  url(/storage/images/assets/corner-tr.gif),
	  url(/storage/images/assets/corner-br.gif),
	  url(/storage/images/assets/corner-bl.gif),
	  /*Corner Color*/
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  /*Laterals*/
	  url(/storage/images/assets/border-x.gif), 
	  url(/storage/images/assets/border-y.gif), 
	  url(/storage/images/assets/border-x.gif), 
	  url(/storage/images/assets/border-y.gif),
	  /*Lateral Color*/
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  /*Menu*/
	  url(/storage/images/assets/menu.gif), 
	  url(/storage/images/assets/menu_2.gif), 
	  /*Buttons*/
	  url(/storage/images/assets/button-1.gif), 
	  url(/storage/images/assets/button-2.gif), 
	  /*Titlebar*/
	  url(/storage/images/assets/titlebar.gif),
	  /*Titlebar Color*/
	  url(/storage/images/assets/titlebar-grey.gif),
	  /*Scroll Arrows*/
	  url(/storage/images/assets/arrow-l.gif),
	  url(/storage/images/assets/arrow-r.gif),
	  /*Scrollbar*/
	  url(/storage/images/assets/scrollbar.gif);
	  
	  background-repeat:
	  
	  /*Corners*/
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  /*Corner Color*/
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  /*Laterals*/
	  repeat-x,
	  repeat-y,
	  repeat-x,
	  repeat-y,
	  /*Lateral Color*/
	  repeat-x,
	  repeat-y,
	  repeat-x,
	  repeat-y,
	  /*Menu*/
	  no-repeat, 
	  repeat-x, 
	  /*Buttons*/
	  no-repeat, 
	  no-repeat, 
	  /*Titlebar*/
	  repeat-x,
	  /*Titlebar Color*/
	  repeat-x,
	  /*Scroll Arrows*/
	  no-repeat,
	  no-repeat,
	  /*Scrollbar*/
	  repeat-x; 
	  
	  background-position: 
  
	  /*Corners*/
	  top left,
	  top right,
	  bottom right,
	  bottom left,
	  /*Corner Color*/
	  top left,
	  top right,
	  bottom right,
	  bottom left,
	  /*Laterals*/
	  top,
	  left,
	  bottom,
	  right,
	  /*Lateral Color*/
	  top,
	  left,
	  bottom,
	  right,
	  /*Menu*/
	  left 4px top 23px, 
	  left top 23px, 
	  /*Buttons*/
	  left 4px top 4px, 
	  right 4px top 4px, 
	  /*Titlebar*/
	  left top 4px,
	  /*Titlebar Color*/
	  left top 4px,
	  /*Scroll Arrows*/
	  left 4px bottom 4px,
	  right 4px bottom 4px,
	  /*Scrollbar*/
	  left bottom 4px;

	border: none;
	box-shadow: none;
	border-radius: 0;
	margin: 50px 0 0;
	overflow: hidden;
	padding: 0 4px 62px;
}


.art-options {
	overflow-y: scroll;
	height: 100%;
	width: 100%;
}

.art h1 {
	padding: 0 0 26px;
}

.art-thumbs {
	
	grid-row-start: -2;
	grid-row-end: -1;
	grid-column-start: 1;
	grid-column-end: 2;
	justify-self: stretch;
	background: white border-box;
	background-image: 
	/*Corners*/
	  url(/storage/images/assets/corner-tl.gif),
	  url(/storage/images/assets/corner-tr.gif),
	  url(/storage/images/assets/corner-br.gif),
	  url(/storage/images/assets/corner-bl.gif),
	  /*Corner Color*/
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  /*Laterals*/
	  url(/storage/images/assets/border-x.gif), 
	  url(/storage/images/assets/border-y.gif), 
	  url(/storage/images/assets/border-x.gif), 
	  url(/storage/images/assets/border-y.gif),
	  /*Lateral Color*/
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  /*Menu*/
	  url(/storage/images/assets/menu.gif), 
	  url(/storage/images/assets/menu_2.gif), 
	  /*Buttons*/
	  url(/storage/images/assets/button-1.gif), 
	  url(/storage/images/assets/button-2.gif), 
	  /*Titlebar*/
	  url(/storage/images/assets/titlebar.gif),
	  /*Titlebar Color*/
	  url(/storage/images/assets/titlebar-grey.gif),
	  /*Scroll Arrows*/
	  url(/storage/images/assets/arrow-l.gif),
	  url(/storage/images/assets/arrow-r.gif),
	  /*Scrollbar*/
	  url(/storage/images/assets/scrollbar.gif);
	  
	  background-repeat:
	  
	  /*Corners*/
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  /*Corner Color*/
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  /*Laterals*/
	  repeat-x,
	  repeat-y,
	  repeat-x,
	  repeat-y,
	  /*Lateral Color*/
	  repeat-x,
	  repeat-y,
	  repeat-x,
	  repeat-y,
	  /*Menu*/
	  no-repeat, 
	  repeat-x, 
	  /*Buttons*/
	  no-repeat, 
	  no-repeat, 
	  /*Titlebar*/
	  repeat-x,
	  /*Titlebar Color*/
	  repeat-x,
	  /*Scroll Arrows*/
	  no-repeat,
	  no-repeat,
	  /*Scrollbar*/
	  repeat-x; 
	  
	  background-position: 
  
	  /*Corners*/
	  top left,
	  top right,
	  bottom right,
	  bottom left,
	  /*Corner Color*/
	  top left,
	  top right,
	  bottom right,
	  bottom left,
	  /*Laterals*/
	  top,
	  left,
	  bottom,
	  right,
	  /*Lateral Color*/
	  top,
	  left,
	  bottom,
	  right,
	  /*Menu*/
	  left 4px top 23px, 
	  left top 23px, 
	  /*Buttons*/
	  left 4px top 4px, 
	  right 4px top 4px, 
	  /*Titlebar*/
	  left top 4px,
	  /*Titlebar Color*/
	  left top 4px,
	  /*Scroll Arrows*/
	  left 4px bottom 4px,
	  right 4px bottom 4px,
	  /*Scrollbar*/
	  left bottom 4px;

	border: none;
	box-shadow: none;
	border-radius: 0;
	overflow: hidden;
	padding: 0 4px 62px;
	margin: 0 0 50px 50px;
}

.thumb-holder {
	border: none;
	overflow-x: scroll;
	overflow-y: hidden;
	height: 100%;
	width: 100%;
}

.modal-frame {
	border: none;
	overflow-x: scroll;
	overflow-y: hidden;
	height: 100%;
	width: 100%;
} 

.art a {
	outline: none;
	text-decoration: none;
	font-weight: normal;
	color: black;
	padding: 1px;
}

.art a:focus, .art a:hover {
	background-color: #01F8F8;
	border: 1px dotted red;
	padding: 0;
}

.art dl {
	position: relative;
	display: inline-block;
	padding: 0 20px;
	
}

.art dt {
	text-align: left;
	margin: 0 5px 15px;
}

.art dt::before {
	content: url(/storage/images/assets/separator_link.gif) " ";
}

.art dd {
	text-align: left;
	margin: 10px 10px 15px;
}

.art dd::before {
	content: url(/storage/images/assets/separator.gif) " ";
}

.thumbs {
	display: flex;
}


.art-thumb {
	display: inline-block;
	height: 100%;
	max-width: unset;
	margin: auto;
}


.frame {
	display: flex;
	height: 190px;
	width: 100%;
	margin: 5px;
	line-height: 190px;
}


.frame p {
	display: none;
	padding: 10px;
	margin: auto;
	width: 150px;
	line-height: 1.5;
	vertical-align: middle;
	color: #13272b;
	background-color: #feddcb;
	border: 1px dotted #71a3a9;
	border-radius: 10px;
}


/*----------------------------------------------------------------------*/

/* |||||BLOG||||| */

/*GRID - BLOG*/

.blog {
	color: black;
	margin: 0 auto;
	font-size: 0.85em;
	display: block;
	background: #ffe9d9 url("/art/pixels/blog.gif") fixed repeat;
	font-family: Arial;
    display: grid;
	justify-content: stretch;
	align-content: stretch;
    grid-template-columns: 400px 59% 250px;
    grid-template-rows: 200px auto 100px;
    grid-template-areas: 
	"info title ."
	"menu main ." 
	". footer ." ;
}

.blog .info {
  position: fixed;
  max-width: 35vh;
  margin: 10% auto auto 4%;
  padding: 0 8px 35px;
  background: white;
  background-image: 
  
  /*Corners*/
  url(/storage/images/assets/corner-tl.gif),
  url(/storage/images/assets/corner-tr.gif),
  url(/storage/images/assets/corner-br.gif),
  url(/storage/images/assets/corner-bl.gif),
  /*Corner Color*/
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  /*Laterals*/
  url(/storage/images/assets/border-x.gif), 
  url(/storage/images/assets/border-y.gif), 
  url(/storage/images/assets/border-x.gif), 
  url(/storage/images/assets/border-y.gif),
  /*Lateral Color*/
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  /*Menu*/
  url(/storage/images/assets/menu.gif), 
  url(/storage/images/assets/menu_2.gif), 
  /*Buttons*/
  url(/storage/images/assets/button-1.gif), 
  url(/storage/images/assets/button-2.gif), 
  /*Titlebar*/
  url(/storage/images/assets/titlebar.gif),
  /*Titlebar Color*/
  url(/storage/images/assets/titlebar-cyan.gif),
  /*Scroll Arrows*/
  url(/storage/images/assets/arrow-l.gif),
  url(/storage/images/assets/arrow-r.gif),
  /*Scrollbar*/
  url(/storage/images/assets/scrollbar.gif);
  
  background-repeat:
  
  /*Corners*/
  no-repeat,
  no-repeat,
  no-repeat,
  no-repeat,
  /*Corner Color*/
  no-repeat,
  no-repeat,
  no-repeat,
  no-repeat,
  /*Laterals*/
  repeat-x,
  repeat-y,
  repeat-x,
  repeat-y,
  /*Lateral Color*/
  repeat-x,
  repeat-y,
  repeat-x,
  repeat-y,
  /*Menu*/
  no-repeat, 
  repeat-x, 
  /*Buttons*/
  no-repeat, 
  no-repeat, 
  /*Titlebar*/
  repeat-x,
  /*Titlebar Color*/
  repeat-x,
  /*Scroll Arrows*/
  no-repeat,
  no-repeat,
  /*Scrollbar*/
  repeat-x;
  
  background-position: 
  
  /*Corners*/
  top left,
  top right,
  bottom right,
  bottom left,
  /*Corner Color*/
  top left,
  top right,
  bottom right,
  bottom left,
  /*Laterals*/
  top,
  left,
  bottom,
  right,
  /*Lateral Color*/
  top,
  left,
  bottom,
  right,
  /*Menu*/
  left 4px top 23px, 
  left top 23px, 
  /*Buttons*/
  left 4px top 4px, 
  right 4px top 4px, 
  /*Titlebar*/
  left top 4px,
  /*Titlebar Color*/
  left top 4px,
  /*Scroll Arrows*/
  left 4px bottom 4px,
  right 4px bottom 4px,
  /*Scrollbar*/
  left bottom 4px;
  
  background-origin: border-box;
}

.blog .title {
	grid-area: title;
	justify-self: center;
	align-self: center;
}

.blog .main-window {
  background: #F8F880;
  border: none;
  box-shadow: none;
  border-radius: 0;
  background-image: 
  
  /*Corners*/
  url(/storage/images/assets/corner-tl.gif),
  url(/storage/images/assets/corner-tr.gif),
  url(/storage/images/assets/corner-br.gif),
  url(/storage/images/assets/corner-bl.gif),
  /*Corner Color*/
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  /*Laterals*/
  url(/storage/images/assets/border-x.gif), 
  url(/storage/images/assets/border-y.gif), 
  url(/storage/images/assets/border-x.gif), 
  url(/storage/images/assets/border-y.gif),
  /*Lateral Color*/
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  /*Menu*/
  url(/storage/images/assets/menu.gif), 
  url(/storage/images/assets/menu_2.gif), 
  /*Buttons*/
  url(/storage/images/assets/button-1.gif), 
  url(/storage/images/assets/button-2.gif), 
  /*Titlebar*/
  url(/storage/images/assets/titlebar.gif),
  /*Titlebar Color*/
  url(/storage/images/assets/titlebar-cyan.gif),
  /*Scroll Arrows*/
  url(/storage/images/assets/arrow-l.gif),
  url(/storage/images/assets/arrow-r.gif),
  /*Scrollbar*/
  url(/storage/images/assets/scrollbar.gif);
  
  background-repeat:
  
  /*Corners*/
  no-repeat,
  no-repeat,
  no-repeat,
  no-repeat,
  /*Corner Color*/
  no-repeat,
  no-repeat,
  no-repeat,
  no-repeat,
  /*Laterals*/
  repeat-x,
  repeat-y,
  repeat-x,
  repeat-y,
  /*Lateral Color*/
  repeat-x,
  repeat-y,
  repeat-x,
  repeat-y,
  /*Menu*/
  no-repeat, 
  repeat-x, 
  /*Buttons*/
  no-repeat, 
  no-repeat, 
  /*Titlebar*/
  repeat-x,
  /*Titlebar Color*/
  repeat-x,
  /*Scroll Arrows*/
  no-repeat,
  no-repeat,
  /*Scrollbar*/
  repeat-x;
  
  background-position: 
  
  /*Corners*/
  top left,
  top right,
  bottom right,
  bottom left,
  /*Corner Color*/
  top left,
  top right,
  bottom right,
  bottom left,
  /*Laterals*/
  top,
  left,
  bottom,
  right,
  /*Lateral Color*/
  top,
  left,
  bottom,
  right,
  /*Menu*/
  left 4px top 23px, 
  left top 23px, 
  /*Buttons*/
  left 4px top 4px, 
  right 4px top 4px, 
  /*Titlebar*/
  left top 4px,
  /*Titlebar Color*/
  left top 4px,
  /*Scroll Arrows*/
  left 4px bottom 4px,
  right 4px bottom 4px,
  /*Scrollbar*/
  left bottom 4px;
  background-origin: border-box;
  grid-area: main;
    padding: 0 0 20px 0;
    max-height: 100%;
    height: inherit;
    max-width: 100%;
    width: inherit;
}


.blog .credits {
	align-self: center;
}


/*Blog Nav Bar*/

.blog ul.sidenav {
   list-style-type: none;
   bottom: 0;
   margin: auto auto 3% 8%;
   padding: 64px 0 0 0;
   width: 180px;
   position: fixed;
   overflow: auto;
   background: none;
}

.blog ul.sidenav li a {
  display: block;
  font-family: 'Press Start 2P';
  font-size: 0.96em;
  text-transform: uppercase;
  color: black;
  text-align: center;
  width: inherit;
  padding: 6px 14px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 2%;
  background-color: white;
} 

.blog ul.sidenav li .active {
  background-color: #0000AA;
  color: white;
  border: 2px solid white;
}

.blog ul.sidenav li a:hover:not(.active) {
  filter: invert(100%);
  background-color: white;
  color: black;
  border: 2px solid black;
}



/*Blog Text*/


.blog a {
	outline: none;
	text-decoration: none;
	font-weight: bold;
	color: black;
	padding: 1px;
}

.blog a:focus, .blog a:hover {
	background-color: #01F8F8;
	border: 1px dotted red;
	padding: 0;
}

.blog a.back {
	display: block;
	padding: 4px 2px 2px 2px;
	background-color: #80f8c0;
	font-size: 0.9em;
	font-weight: normal;
	border: 1px solid transparent;
}

.blog a.back:focus, .blog a.back:hover {
	border: 1px dotted red;
	background-color: #01F8F8;
}

.blog a.front-page {
	display: block;
	padding: 5px;
}

.blog a.front-page:focus, .blog a.front-page:hover {
	border: 1px dotted red;
	background-color: #01F8F8;
	padding: 4px;
}

.blog p {
	position: relative;
	display: inline-block;
	margin: 40px 25px 0;
}

.blog p.description {
	margin: 2px 10px 10px;
}

.blog dl {
	position: relative;
	display: inline-block;
	margin: 30px 40px 5px;
}

.blog dt {
	text-align: left;
	margin: 20px 5px 15px;
}

.blog dt::before {
	content: url(/storage/images/assets/separator_link.gif) " ";
}

.blog dd {
	text-align: left;
	margin: 10px 10px 15px;
}

.blog dd::before {
	content: url(/storage/images/assets/separator.gif) " ";
}

.blog .credits > a {
	color: #c11b62;

}

.blog .credits > a:hover, .blog .credits > a:focus {
	color: black;

}



/*Blog Headers*/

.blog header {
	font-family: 'Lazer 84';
	color: rgb(255,113,206);
	font-size: 500%;
	text-align: center;
	text-shadow: -2px -2px rgb(255, 255, 225), 
	4px 4px rgb(34, 11, 56), 
	7px 7px rgb(1,205,254);
	letter-spacing: 8px;
	word-spacing: 15px;
	display:inline-block;
	margin: auto;
}


.blog h1, .art h1 {
	font-size: 1em;
	font-family: Arial;
	top: 5px;
	text-align: center;
	position: relative;
	margin: 0;
	display: block;
	text-transform: initial;
}

.blog h2 {
	font-size: 1em;
	font-family: Arial;
	top: 5px;
	text-align: center;
	position: relative;
	margin: 0;
}

.blog h3 {
	border-bottom: 1px dotted black;
}

.blog h3:focus, .blog h3:hover {
	border-bottom: 1px solid transparent;
}

.blog .separator {
	display: block;
	font-size: 1em;
	font-family: Arial;
	text-align: left;
	position: relative;
	margin: 15px 2px;
	text-indent: 10px;
	border-bottom: 2px dashed black;
}

.blog .main-links {
	position: relative;
	margin: 50px 20px 0;
	display: block;
}

/*Blog Articles*/


.blog .sub-window {
  background: white;
  padding: 0 4px 1px 15px;
  background-image: 
  
  /*Corners*/
  url(/storage/images/assets/corner-tl.gif),
  url(/storage/images/assets/corner-tr.gif),
  url(/storage/images/assets/corner-br.gif),
  url(/storage/images/assets/corner-bl.gif),
  /*Corner Color*/
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  /*Laterals*/
  url(/storage/images/assets/border-x.gif), 
  url(/storage/images/assets/border-y.gif), 
  url(/storage/images/assets/border-x.gif), 
  url(/storage/images/assets/border-y.gif),
  /*Lateral Color*/
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  /*Menu*/
  url(/storage/images/assets/menu.gif), 
  url(/storage/images/assets/menu_2.gif), 
  /*Buttons*/
  url(/storage/images/assets/button-1.gif), 
  url(/storage/images/assets/button-2.gif), 
  /*Titlebar*/
  url(/storage/images/assets/titlebar.gif),
  /*Titlebar Color*/
  url(/storage/images/assets/titlebar-cyan.gif),
  /*Scroll Arrows*/
  url(/storage/images/assets/arrow-l.gif),
  url(/storage/images/assets/arrow-r.gif),
  /*Scrollbar*/
  url(/storage/images/assets/scrollbar.gif);
  
  background-repeat:
  
  /*Corners*/
  no-repeat,
  no-repeat,
  no-repeat,
  no-repeat,
  /*Corner Color*/
  no-repeat,
  no-repeat,
  no-repeat,
  no-repeat,
  /*Laterals*/
  repeat-x,
  repeat-y,
  repeat-x,
  repeat-y,
  /*Lateral Color*/
  repeat-x,
  repeat-y,
  repeat-x,
  repeat-y,
  /*Menu*/
  no-repeat, 
  repeat-x, 
  /*Buttons*/
  no-repeat, 
  no-repeat, 
  /*Titlebar*/
  repeat-x,
  /*Titlebar Color*/
  repeat-x,
  /*Scroll Arrows*/
  no-repeat,
  no-repeat,
  /*Scrollbar*/
  repeat-x;
  
  background-position: 
  
  /*Corners*/
  top left,
  top right,
  bottom right,
  bottom left,
  /*Corner Color*/
  top left,
  top right,
  bottom right,
  bottom left,
  /*Laterals*/
  top,
  left,
  bottom,
  right,
  /*Lateral Color*/
  top,
  left,
  bottom,
  right,
  /*Menu*/
  left 4px top 23px, 
  left top 23px, 
  /*Buttons*/
  left 4px top 4px, 
  right 4px top 4px, 
  /*Titlebar*/
  left top 4px,
  /*Titlebar Color*/
  left top 4px,
  /*Scroll Arrows*/
  left 4px bottom 4px,
  right 4px bottom 4px,
  /*Scrollbar*/
  left bottom 4px;
  background-origin: border-box;
  height: inherit;
  width: inherit;
  max-width: 100%;
  margin: 2% 4% 2% 4%;
  max-height: 100%;
}


.blog .list-flex {
	display: flex;
	flex-flow: column wrap;
	max-height: 70vw;
	margin: 25px 4px 20px;
	overflow: scroll;
	padding: 20px;
}

.blog object {
	max-width: 100%;
	max-height: 100%;
	height: 800px;
	width: 600px;
	margin-top: 10px;
}



/* ||DECO */


/*Blog - Random Deco*/


.blog .buttons {
	margin: auto;
}

.blog .mascot {
	bottom: 0;
	right: 0;
	position: fixed;
	margin: 0 2% 2% 0;
}

.blog #icon {
  margin: 0 5% 0 0;
}

/*Blog Images*/

.blog img {
	margin: 0;
	padding: 0;
}

.blog .image-flex-big {
  display: flex;
  flex-wrap: wrap;
  margin: 5px;
  position: relative;
  justify-content: space-evenly;
  align-items: center;

}

.blog .image-flex-small {
  display: flex;
  flex-wrap: wrap;
  padding: 0 28px;
  position: relative;
  justify-content: center;
  align-items: end;

}



.blog .image-flex-elements {
  max-height: 150px;
}


/*----------------------------------------------------------------------*/

/* |||||STORAGE||||| */

/*GRID - STORAGE*/


.storage {
	color: black;
	margin: 0 auto;
	font-size: 0.85em;
	display: block;
	background: #cbf5ff url("/art/pixels/floppybg.gif") fixed repeat;
	font-family: Arial;
    display: grid;
	justify-content: stretch;
	align-content: stretch;
    grid-template-columns: 400px 59% 250px;
    grid-template-rows: 200px auto 100px;
    grid-template-areas: 
	"info title ."
	"menu main ." 
	". footer ." ;
}

.storage .menu {
	position: fixed;
	bottom: 0;
	margin: auto auto 7% 9%;
	display: grid;
	grid-template-rows: 50% 50%;
	grid-template-columns: 100px;
	grid-gap: 20px 20px;
	grid-template-areas:
	"back_1"
	"back_2"
}

.storage .info {
  position: fixed;
  max-width: 35vh;
  margin: 10% auto auto 4%;
  padding: 0 8px 35px;
  background: white;
  background-image: 
  
  /*Corners*/
  url(/storage/images/assets/corner-tl.gif),
  url(/storage/images/assets/corner-tr.gif),
  url(/storage/images/assets/corner-br.gif),
  url(/storage/images/assets/corner-bl.gif),
  /*Corner Color*/
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  /*Laterals*/
  url(/storage/images/assets/border-x.gif), 
  url(/storage/images/assets/border-y.gif), 
  url(/storage/images/assets/border-x.gif), 
  url(/storage/images/assets/border-y.gif),
  /*Lateral Color*/
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  /*Menu*/
  url(/storage/images/assets/menu.gif), 
  url(/storage/images/assets/menu_2.gif), 
  /*Buttons*/
  url(/storage/images/assets/button-1.gif), 
  url(/storage/images/assets/button-2.gif), 
  /*Titlebar*/
  url(/storage/images/assets/titlebar.gif),
  /*Titlebar Color*/
  url(/storage/images/assets/titlebar-cyan.gif),
  /*Scroll Arrows*/
  url(/storage/images/assets/arrow-l.gif),
  url(/storage/images/assets/arrow-r.gif),
  /*Scrollbar*/
  url(/storage/images/assets/scrollbar.gif);
  
  background-repeat:
  
  /*Corners*/
  no-repeat,
  no-repeat,
  no-repeat,
  no-repeat,
  /*Corner Color*/
  no-repeat,
  no-repeat,
  no-repeat,
  no-repeat,
  /*Laterals*/
  repeat-x,
  repeat-y,
  repeat-x,
  repeat-y,
  /*Lateral Color*/
  repeat-x,
  repeat-y,
  repeat-x,
  repeat-y,
  /*Menu*/
  no-repeat, 
  repeat-x, 
  /*Buttons*/
  no-repeat, 
  no-repeat, 
  /*Titlebar*/
  repeat-x,
  /*Titlebar Color*/
  repeat-x,
  /*Scroll Arrows*/
  no-repeat,
  no-repeat,
  /*Scrollbar*/
  repeat-x;
  
  background-position: 
  
  /*Corners*/
  top left,
  top right,
  bottom right,
  bottom left,
  /*Corner Color*/
  top left,
  top right,
  bottom right,
  bottom left,
  /*Laterals*/
  top,
  left,
  bottom,
  right,
  /*Lateral Color*/
  top,
  left,
  bottom,
  right,
  /*Menu*/
  left 4px top 23px, 
  left top 23px, 
  /*Buttons*/
  left 4px top 4px, 
  right 4px top 4px, 
  /*Titlebar*/
  left top 4px,
  /*Titlebar Color*/
  left top 4px,
  /*Scroll Arrows*/
  left 4px bottom 4px,
  right 4px bottom 4px,
  /*Scrollbar*/
  left bottom 4px;
  
  background-origin: border-box;
}

.storage .title {
	grid-area: title;
	justify-self: center;
	align-self: center;
}

.storage .main-window {
  background: #F8F880;
  border: none;
  box-shadow: none;
  border-radius: 0;
  background-image: 
  
  /*Corners*/
  url(/storage/images/assets/corner-tl.gif),
  url(/storage/images/assets/corner-tr.gif),
  url(/storage/images/assets/corner-br.gif),
  url(/storage/images/assets/corner-bl.gif),
  /*Corner Color*/
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  /*Laterals*/
  url(/storage/images/assets/border-x.gif), 
  url(/storage/images/assets/border-y.gif), 
  url(/storage/images/assets/border-x.gif), 
  url(/storage/images/assets/border-y.gif),
  /*Lateral Color*/
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  /*Menu*/
  url(/storage/images/assets/menu.gif), 
  url(/storage/images/assets/menu_2.gif), 
  /*Buttons*/
  url(/storage/images/assets/button-1.gif), 
  url(/storage/images/assets/button-2.gif), 
  /*Titlebar*/
  url(/storage/images/assets/titlebar.gif),
  /*Titlebar Color*/
  url(/storage/images/assets/titlebar-cyan.gif),
  /*Scroll Arrows*/
  url(/storage/images/assets/arrow-l.gif),
  url(/storage/images/assets/arrow-r.gif),
  /*Scrollbar*/
  url(/storage/images/assets/scrollbar.gif);
  
  background-repeat:
  
  /*Corners*/
  no-repeat,
  no-repeat,
  no-repeat,
  no-repeat,
  /*Corner Color*/
  no-repeat,
  no-repeat,
  no-repeat,
  no-repeat,
  /*Laterals*/
  repeat-x,
  repeat-y,
  repeat-x,
  repeat-y,
  /*Lateral Color*/
  repeat-x,
  repeat-y,
  repeat-x,
  repeat-y,
  /*Menu*/
  no-repeat, 
  repeat-x, 
  /*Buttons*/
  no-repeat, 
  no-repeat, 
  /*Titlebar*/
  repeat-x,
  /*Titlebar Color*/
  repeat-x,
  /*Scroll Arrows*/
  no-repeat,
  no-repeat,
  /*Scrollbar*/
  repeat-x;
  
  background-position: 
  
  /*Corners*/
  top left,
  top right,
  bottom right,
  bottom left,
  /*Corner Color*/
  top left,
  top right,
  bottom right,
  bottom left,
  /*Laterals*/
  top,
  left,
  bottom,
  right,
  /*Lateral Color*/
  top,
  left,
  bottom,
  right,
  /*Menu*/
  left 4px top 23px, 
  left top 23px, 
  /*Buttons*/
  left 4px top 4px, 
  right 4px top 4px, 
  /*Titlebar*/
  left top 4px,
  /*Titlebar Color*/
  left top 4px,
  /*Scroll Arrows*/
  left 4px bottom 4px,
  right 4px bottom 4px,
  /*Scrollbar*/
  left bottom 4px;
  background-origin: border-box;
  grid-area: main;
  padding: 0 70px 50px 70px;
}


.storage .back_1 {
	text-align: center;
	grid-area: back_1;
	align-self: start;
	justify-self: stretch;
}

.storage .back_2 {
	text-align: center;
	grid-area: back_2;
	align-self: end;
	justify-self: stretch;
}

.storage .credits {
	align-self: center;
}


/*Storage Nav Bar*/

.storage ul.sidenav {
   list-style-type: none;
   bottom: 0;
   margin: auto auto 3% 8%;
   padding: 64px 0 0 0;
   width: 180px;
   position: fixed;
   overflow: auto;
   background: none;
}

.storage ul.sidenav li a {
  display: block;
  font-family: 'Press Start 2P';
  font-size: 0.96em;
  text-transform: uppercase;
  color: black;
  text-align: center;
  width: inherit;
  padding: 6px 14px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 2%;
  background-color: white;
} 

.storage ul.sidenav li .active {
  background-color: #0000AA;
  color: white;
  border: 2px solid white;
}

.storage ul.sidenav li a:hover:not(.active) {
  filter: invert(100%);
  background-color: white;
  color: black;
  border: 2px solid black;
}



/*Storage Text*/


.storage a {
	outline: none;
	text-decoration: none;
	font-weight: bold;
	color: black;
	padding: 1px;
}

.storage a:focus, .storage a:hover {
	background-color: #01F8F8;
	border: 1px dotted red;
	padding: 0;
}

.storage a.back {
	display: block;
	padding: 4px 2px 2px 2px;
	background-color: #80f8c0;
	font-size: 0.9em;
	font-weight: normal;
	border: 1px solid transparent;
}

.storage a.back:focus, .storage a.back:hover {
	border: 1px dotted red;
	background-color: #01F8F8;
}

.storage a.front-page {
	display: block;
	padding: 5px;
}

.storage a.front-page:focus, .storage a.front-page:hover {
	border: 1px dotted red;
	background-color: #01F8F8;
	padding: 4px;
}

.storage p {
	position: relative;
	display: inline-block;
	margin: 40px 25px 0;
}

.storage p.description {
	margin: 2px 10px 10px;
}

.storage dl {
	position: relative;
	display: inline-block;
	margin: 30px 40px 5px;
}

.storage dt {
	text-align: left;
	margin: 20px 5px 15px;
}

.storage dt::before {
	content: url(/storage/images/assets/separator_link.gif) " ";
}

.storage dd {
	text-align: left;
	margin: 10px 10px 15px;
}

.storage dd::before {
	content: url(/storage/images/assets/separator.gif) " ";
}

.storage .credits > a {
	color: #c11b62;

}

.storage .credits > a:hover, .storage .credits > a:focus {
	color: black;

}



/*Storage Headers*/

.storage header {
	font-family: 'Lazer 84';
	color: rgb(255,113,206);
	font-size: 500%;
	text-align: center;
	text-shadow: -2px -2px rgb(255, 255, 225), 
	4px 4px rgb(34, 11, 56), 
	7px 7px rgb(1,205,254);
	letter-spacing: 8px;
	word-spacing: 15px;
	display:inline-block;
	margin: auto;
}


.storage h1, .art h1 {
	font-size: 1em;
	font-family: Arial;
	top: 5px;
	text-align: center;
	position: relative;
	margin: 0;
	display: block;
	text-transform: initial;
}

.storage h2 {
	font-size: 1em;
	font-family: Arial;
	top: 5px;
	text-align: center;
	position: relative;
	margin: 0;
}

.storage h3 {
	border-bottom: 1px dotted black;
}

.storage h3:focus, .storage h3:hover {
	border-bottom: 1px solid transparent;
}

.storage .separator {
	display: block;
	font-size: 1em;
	font-family: Arial;
	text-align: left;
	position: relative;
	margin: 15px 2px;
	text-indent: 10px;
	border-bottom: 2px dashed black;
}

.storage .main-links {
	position: relative;
	margin: 50px 20px 0;
	display: block;
}

/*Storage Articles*/


.storage .sub-window {
  background: white;
  padding: 0 15px 25px 15px;
  background-image: 
  
  /*Corners*/
  url(/storage/images/assets/corner-tl.gif),
  url(/storage/images/assets/corner-tr.gif),
  url(/storage/images/assets/corner-br.gif),
  url(/storage/images/assets/corner-bl.gif),
  /*Corner Color*/
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  /*Laterals*/
  url(/storage/images/assets/border-x.gif), 
  url(/storage/images/assets/border-y.gif), 
  url(/storage/images/assets/border-x.gif), 
  url(/storage/images/assets/border-y.gif),
  /*Lateral Color*/
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  url(/storage/images/assets/pink-border.gif),
  /*Menu*/
  url(/storage/images/assets/menu.gif), 
  url(/storage/images/assets/menu_2.gif), 
  /*Buttons*/
  url(/storage/images/assets/button-1.gif), 
  url(/storage/images/assets/button-2.gif), 
  /*Titlebar*/
  url(/storage/images/assets/titlebar.gif),
  /*Titlebar Color*/
  url(/storage/images/assets/titlebar-cyan.gif),
  /*Scroll Arrows*/
  url(/storage/images/assets/arrow-l.gif),
  url(/storage/images/assets/arrow-r.gif),
  /*Scrollbar*/
  url(/storage/images/assets/scrollbar.gif);
  
  background-repeat:
  
  /*Corners*/
  no-repeat,
  no-repeat,
  no-repeat,
  no-repeat,
  /*Corner Color*/
  no-repeat,
  no-repeat,
  no-repeat,
  no-repeat,
  /*Laterals*/
  repeat-x,
  repeat-y,
  repeat-x,
  repeat-y,
  /*Lateral Color*/
  repeat-x,
  repeat-y,
  repeat-x,
  repeat-y,
  /*Menu*/
  no-repeat, 
  repeat-x, 
  /*Buttons*/
  no-repeat, 
  no-repeat, 
  /*Titlebar*/
  repeat-x,
  /*Titlebar Color*/
  repeat-x,
  /*Scroll Arrows*/
  no-repeat,
  no-repeat,
  /*Scrollbar*/
  repeat-x;
  
  background-position: 
  
  /*Corners*/
  top left,
  top right,
  bottom right,
  bottom left,
  /*Corner Color*/
  top left,
  top right,
  bottom right,
  bottom left,
  /*Laterals*/
  top,
  left,
  bottom,
  right,
  /*Lateral Color*/
  top,
  left,
  bottom,
  right,
  /*Menu*/
  left 4px top 23px, 
  left top 23px, 
  /*Buttons*/
  left 4px top 4px, 
  right 4px top 4px, 
  /*Titlebar*/
  left top 4px,
  /*Titlebar Color*/
  left top 4px,
  /*Scroll Arrows*/
  left 4px bottom 4px,
  right 4px bottom 4px,
  /*Scrollbar*/
  left bottom 4px;
  background-origin: border-box;
  margin: 2% 7% 2% 7%;
}

#lists {
	background: #09010d url(/art/pixels/darkstars.gif) fixed repeat;
	grid-gap: 40px 0;
	grid-template-rows: 200px auto 40px;
}

.storage .list-flex {
	display: flex;
	flex-flow: column wrap;
	max-height: 70vw;
	margin: 25px 4px 20px;
	overflow: scroll;
	padding: 20px;
}

.list-flex dd:first-child::before {
	content: url(/storage/images/assets/separator_link.gif) " ";
}

#lists .sub-window {
	grid-area: main;
	overflow: hidden;
	padding: 0;
}

#lists h1 {
	color: white;
	font-size: 2em;
	grid-area: title;
	align-self: start;
	margin: 70px auto auto;
	font-family: 'Press Start 2P';
	text-shadow: 2px 2px #df0f84, 4px 4px #0087ff;
}

#lists h2 {
	grid-area: title;
	align-self: end;
	
}

#lists h2 > a {
	color: #fff1cf;
	margin: auto auto 50px;
	font-size: 1.3em;
	text-shadow: 2px 2px #bb2395;
}

#lists h2 > a:hover, #lists h2 > a:focus {
	color: #08060d;
	text-shadow: 2px 2px #53c7ff;
}

#lists h3 {
	font-size: 1em;
	font-family: Arial;
	top: 5px;
	text-align: center;
	position: relative;
	margin: 0;
	display: block;
	text-transform: initial;
}

#lists .credits{
	align-self: start;
	color: white;

}

#lists .credits > a {
	color: #fff1cf;

}

#lists .credits > a:hover, #lists .credits > a:focus {
	color: black;
}


/* ||DECO */


/*Storage - Random Deco*/


.storage .buttons {
	margin: auto;
}

.storage .mascot {
	bottom: 0;
	right: 0;
	position: fixed;
	margin: 0 2% 2% 0;
}

.storage #icon {
  margin: 0 5% 0 0;
}

/*Storage Images*/

.storage img {
	margin: 0;
	padding: 0;
}

.storage .image-flex-big {
  display: flex;
  flex-wrap: wrap;
  margin: 5px;
  position: relative;
  justify-content: space-evenly;
  align-items: center;

}

.storage .image-flex-small {
  display: flex;
  flex-wrap: wrap;
  padding: 0 28px;
  position: relative;
  justify-content: center;
  align-items: end;

}



.storage .image-flex-elements {
  max-height: 150px;
}



/*----------------------------------------------------------------------*/



/* |||||ABOUT||||| */



.about {
	display: grid;
	grid-template-columns: 27% 700px auto;
    grid-template-rows: 300px auto 50px;
	grid-gap: 0;
    grid-template-areas: 
	"info title docs"
	"menu main docs" 
	". footer ." ;
	background: #fcf7b2 url("/art/pixels/mepattern.gif") fixed repeat;
}

.about header {
	margin: auto;
}

.about h1 {
	text-transform: none;
}

.about .sidenav {
	
	background-color: white;
	background-image: 
	/*Corners*/
	  url(/storage/images/assets/corner-tl.gif),
	  url(/storage/images/assets/corner-tr.gif),
	  url(/storage/images/assets/corner-br.gif),
	  url(/storage/images/assets/corner-bl.gif),
	  /*Corner Color*/
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  /*Laterals*/
	  url(/storage/images/assets/border-x.gif), 
	  url(/storage/images/assets/border-y.gif), 
	  url(/storage/images/assets/border-x.gif), 
	  url(/storage/images/assets/border-y.gif),
	  /*Lateral Color*/
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  /*Menu*/
	  url(/storage/images/assets/menu.gif), 
	  url(/storage/images/assets/menu_2.gif), 
	  /*Buttons*/
	  url(/storage/images/assets/button-1.gif), 
	  url(/storage/images/assets/button-2.gif), 
	  /*Titlebar*/
	  url(/storage/images/assets/titlebar.gif),
	  /*Titlebar Color*/
	  url(/storage/images/assets/titlebar-grey.gif),
	  /*Scroll Arrows*/
	  url(/storage/images/assets/arrow-l.gif),
	  url(/storage/images/assets/arrow-r.gif),
	  /*Scrollbar*/
	  url(/storage/images/assets/scrollbar.gif);
	  
	  background-repeat:
	  
	  /*Corners*/
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  /*Corner Color*/
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  /*Laterals*/
	  repeat-x,
	  repeat-y,
	  repeat-x,
	  repeat-y,
	  /*Lateral Color*/
	  repeat-x,
	  repeat-y,
	  repeat-x,
	  repeat-y,
	  /*Menu*/
	  no-repeat, 
	  repeat-x, 
	  /*Buttons*/
	  no-repeat, 
	  no-repeat, 
	  /*Titlebar*/
	  repeat-x,
	  /*Titlebar Color*/
	  repeat-x,
	  /*Scroll Arrows*/
	  no-repeat,
	  no-repeat,
	  /*Scrollbar*/
	  repeat-x; 


}

.about .main-window {

	background: white border-box;
	background-image: 
	/*Corners*/
	  url(/storage/images/assets/corner-tl.gif),
	  url(/storage/images/assets/corner-tr.gif),
	  url(/storage/images/assets/corner-br.gif),
	  url(/storage/images/assets/corner-bl.gif),
	  /*Corner Color*/
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  /*Laterals*/
	  url(/storage/images/assets/border-x.gif), 
	  url(/storage/images/assets/border-y.gif), 
	  url(/storage/images/assets/border-x.gif), 
	  url(/storage/images/assets/border-y.gif),
	  /*Lateral Color*/
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  /*Menu*/
	  url(/storage/images/assets/menu.gif), 
	  url(/storage/images/assets/menu_2.gif), 
	  /*Buttons*/
	  url(/storage/images/assets/button-1.gif), 
	  url(/storage/images/assets/button-2.gif), 
	  /*Titlebar*/
	  url(/storage/images/assets/titlebar.gif),
	  /*Titlebar Color*/
	  url(/storage/images/assets/titlebar-grey.gif),
	  /*Scroll Arrows*/
	  url(/storage/images/assets/arrow-l.gif),
	  url(/storage/images/assets/arrow-r.gif),
	  /*Scrollbar*/
	  url(/storage/images/assets/scrollbar.gif);
	  
	  background-repeat:
	  
	  /*Corners*/
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  /*Corner Color*/
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  /*Laterals*/
	  repeat-x,
	  repeat-y,
	  repeat-x,
	  repeat-y,
	  /*Lateral Color*/
	  repeat-x,
	  repeat-y,
	  repeat-x,
	  repeat-y,
	  /*Menu*/
	  no-repeat, 
	  repeat-x, 
	  /*Buttons*/
	  no-repeat, 
	  no-repeat, 
	  /*Titlebar*/
	  repeat-x,
	  /*Titlebar Color*/
	  repeat-x,
	  /*Scroll Arrows*/
	  no-repeat,
	  no-repeat,
	  /*Scrollbar*/
	  repeat-x; 
	  
	  background-position: 
  
	  /*Corners*/
	  top left,
	  top right,
	  bottom right,
	  bottom left,
	  /*Corner Color*/
	  top left,
	  top right,
	  bottom right,
	  bottom left,
	  /*Laterals*/
	  top,
	  left,
	  bottom,
	  right,
	  /*Lateral Color*/
	  top,
	  left,
	  bottom,
	  right,
	  /*Menu*/
	  left 4px top 23px, 
	  left top 23px, 
	  /*Buttons*/
	  left 4px top 4px, 
	  right 4px top 4px, 
	  /*Titlebar*/
	  left top 4px,
	  /*Titlebar Color*/
	  left top 4px,
	  /*Scroll Arrows*/
	  left 4px bottom 4px,
	  right 4px bottom 4px,
	  /*Scrollbar*/
	  left bottom 4px;

	border: none;
	box-shadow: none;
	border-radius: 0;
	padding: 0 45px 50px;
}

.about .sub-window {
	
	background-color: white;
	background-image: 
	/*Corners*/
	  url(/storage/images/assets/corner-tl.gif),
	  url(/storage/images/assets/corner-tr.gif),
	  url(/storage/images/assets/corner-br.gif),
	  url(/storage/images/assets/corner-bl.gif),
	  /*Corner Color*/
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  /*Laterals*/
	  url(/storage/images/assets/border-x.gif), 
	  url(/storage/images/assets/border-y.gif), 
	  url(/storage/images/assets/border-x.gif), 
	  url(/storage/images/assets/border-y.gif),
	  /*Lateral Color*/
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  url(/storage/images/assets/grey-border.gif),
	  /*Menu*/
	  url(/storage/images/assets/menu.gif), 
	  url(/storage/images/assets/menu_2.gif), 
	  /*Buttons*/
	  url(/storage/images/assets/button-1.gif), 
	  url(/storage/images/assets/button-2.gif), 
	  /*Titlebar*/
	  url(/storage/images/assets/titlebar.gif),
	  /*Titlebar Color*/
	  url(/storage/images/assets/titlebar-grey.gif),
	  /*Scroll Arrows*/
	  url(/storage/images/assets/arrow-l.gif),
	  url(/storage/images/assets/arrow-r.gif),
	  /*Scrollbar*/
	  url(/storage/images/assets/scrollbar.gif);
	  
	  background-repeat:
	  
	  /*Corners*/
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  /*Corner Color*/
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  no-repeat,
	  /*Laterals*/
	  repeat-x,
	  repeat-y,
	  repeat-x,
	  repeat-y,
	  /*Lateral Color*/
	  repeat-x,
	  repeat-y,
	  repeat-x,
	  repeat-y,
	  /*Menu*/
	  no-repeat, 
	  repeat-x, 
	  /*Buttons*/
	  no-repeat, 
	  no-repeat, 
	  /*Titlebar*/
	  repeat-x,
	  /*Titlebar Color*/
	  repeat-x,
	  /*Scroll Arrows*/
	  no-repeat,
	  no-repeat,
	  /*Scrollbar*/
	  repeat-x; 
	  
	  margin: 3% 0;


}

.about-paper {
	grid-area: docs;
	justify-self: center;
	align-self: start;
	background-color: #DEC7A7;
	background-image: url(/storage/images/assets/confidential.png), radial-gradient(circle, #DEC7A7 17%, #dfc7a5, #eacba2 78%, #eab074);
	background-repeat: no-repeat;
	background-position: bottom 15px right 15px, center;
	padding: 5px 5px 30px 8px;
	position: relative;
	margin: 20px;
}

.about-paper, 
.about-paper::before,
.about-paper::after {
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
	border: 1px solid #E3C8A1;
}

.about-paper::before,
.about-paper::after {
	content: "";
	position: absolute;
	height: 95%;
	width: 99%;
	background-color: #B98A58;
}

.about-paper::before {
	right: 15px;
	top: 0;
	transform: rotate(-1deg);
	z-index: -1;
}

.about-paper::after {
	right: -5px;
	top: 5px;
	transform: rotate(-1deg);
	z-index: -2;
}

.about-paper .info {
	margin: 15px 0 0 0;
	display: block;
}

.about-paper b {
	display: inline-block;
	margin: 0;
	padding: 3px 0 0;
	color: #48341e;
}

.about-paper .form {
	
	text-transform: uppercase;
	border-bottom: 1px solid #48341e;
	padding: 2px 15px 1px;
	display: block;
	text-align: center;
	font-weight: bold;
}

.about-paper p {
	margin: 2px 2px 5px;
}



div.polaroid {
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  float: right;
  padding: 10px 5px 25px;
}


.about .blinky-holder {
	position: relative;
	border-radius: 0;
	background: white;
}

.about .blinky-holder, 
.about .blinky-holder::before,
.about .blinky-holder::after {
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
	border: 1px solid #bbb;
}

.about .blinky-holder::before,
.about .blinky-holder::after {
	content: "";
	position: absolute;
	height: 95%;
	width: 99%;
	background-color: #eee;
}

.about .blinky-holder::before {
	right: 15px;
	top: 0;
	transform: rotate(-1deg);
	z-index: -1;
}

.about .blinky-holder::after {
	right: -5px;
	top: 5px;
	transform: rotate(-1deg);
	z-index: -2;
}

.blinkholder-holder {
	position: fixed;
	left: 120px;
	top: 55%;
}

.about .credits{
	align-self: center;
}

.about .credits > a {
	color: #0056aa;

}

.about .credits > a:hover, .about .credits > a:focus {
	color: #9f1212;

}


/*----------------------------------------------------------------------*/



/* ||GENERAL DECO|| */


/*Random Deco*/


.buttons {
	line-height: 1.5;
	display: inline-block;
	vertical-align: middle;
}

.blinky {
	line-height: 1.5;
	display: inline-block;
	vertical-align: middle;
}

.mascot {
	bottom: 0;
	right: 0;
	position: fixed;
	margin: 0 3% 2% 0;
}

#icon {
  margin: 0 5% 0 0;
}

/*Images*/

img {
	margin: 0;
	padding: 0;
	max-width: 100%;
	height: auto;
}




/*----------------------------------------------------------------------*/



/* |||||RESPONSIVE||||| */


/* @media only screen and (max-width: 1400px) {
	ul.sidenav, .storage ul.sidenav, .about ul.sidenav {
		width: 100%;
		height: auto;
		max-width: 100%;
		background: none;
		top: 0;
		position: fixed;
		  z-index: 2;
		padding: 0;
		margin: 0 auto;
		bottom: initial;
	}
  
  	.sidenav-buttons, .storage .sidenav-buttons, .about .sidenav-buttons {
		margin: auto;
	}

	ul.sidenav li a, .storage ul.sidenav li a, .about ul.sidenav li a {
		border-radius: 0%;
		float: left;
		padding: 12.5px 15px;
		border: none;
	} 
	
	.about ul.sidenav li a {
		float: none;
	}

	ul.sidenav li .active, .storage ul.sidenav li .active, .about ul.sidenav li .active {
		border-radius: 0%;
		border: none;
		padding: 15px;
	}

	ul.sidenav li a:hover:not(.active), .storage ul.sidenav li a:hover:not(.active), .about ul.sidenav li a:hover:not(.active) {
		background-color: black;
		color: white;
		filter: none;
		border: none;
	}
	
	#menuhid, .storage #menuhid {
		display: block;
	}
	
	ul.sidenav h1, .storage ul.sidenav h1, .about ul.sidenav h1 {
		display: none;
	}
	
	.home-main {
		grid-template-columns: 10% 70% auto;
	}
	
	.main-window article:nth-child(even),
	.main-window article:nth-child(odd) {
		margin: 2% 0;
	}
	
	.about {
		grid-template-columns: 5px auto 5px;
}
	
	.stamp-holder {
		right: 0;
		margin: 3% 1%;
	}
	
	.blinky {
		display: none;
	}
	

	.blinky-holder {
		display: none;
	}
	
	.mascot {
		margin: 0 3% 24% 0;
	}
	
	.about .mascot {
		display: none;
	}
	
}

@media only screen and (max-width: 820px) {
	ul.sidenav, .storage ul.sidenav {
		width: 100%;
		max-width: 100%;
		background: none;
		height: auto;
		top: 0;
		position: fixed;
			z-index: 2;
		padding: 0;   
		margin: auto;
    
	}
  
	ul.sidenav li a, .storage ul.sidenav li a {
		float: none;
	}
  
	ul.sidenav h1, .storage ul.sidenav h1 {
		display: none;
	}
  
	.sidenav-buttons, .storage .sidenav-buttons {
		margin: auto;
	}
	
  	#menu, .storage #menu {
		color: black;
		display: block;
		width: auto;
		height: auto;
		margin: auto;
		border:none;
		background: rgb(255,255,255);
		background: rgba(255,255,255,0.7);
	}

	#menuhid, .storage #menuhid {
		display: none;
		background: rgb(255,255,255);
		background: rgba(255,255,255,0.7);
	}
	
	.mascot {
		display: none;
	}
}

@media only screen and (max-height: 800px) {
	
	.buttons {
		display: none;
	}

	
	.stamp-holder {
		display: none;
	}
	
	@media only screen and (max-width: 680px) {
	
	.storage {
		grid-template-rows: 250px auto 100px;
		grid-template-columns: 10px 100% 10px;
	}
	
	.storage .main-window {
		padding: 0 0 20px;
	}
	
	.storage .info {
		display: none;
	}
	
	.storage .menu {
		position: absolute;
		top: 0;
		margin: 2% 2%;
		grid-template-rows: 100px;
		grid-template-columns: 100px 100px;
		grid-gap: 10px 10px;
		grid-template-areas:
		"back_1 back_2"
	}
	
	.storage .back_1 {
		align-self: stretch;
	}

	.storage .back_2 {
		align-self: stretch;
	}
	
	
	.storage .title {
		align-self: end;
	}
	
	.storage .mascot {
		display: none;
	}

}

@media only screen and (orientation: portrait) {
	
	

}

} */

@media only screen and (orientation: portrait) {
	
	ul.sidenav, .storage ul.sidenav, .about ul.sidenav {
		width: 100%;
		max-width: 100%;
		background: none;
		height: auto;
		top: 0;
		bottom: auto;
		position: fixed;
			z-index: 2;
		padding: 0;   
		margin: auto;
    
	}
  
	ul.sidenav li a, .storage ul.sidenav li a, .about ul.sidenav li a {
		float: none;
	}
  
	ul.sidenav h1, .storage ul.sidenav h1, .about ul.sidenav h1 {
		display: none;
	}
  
	.sidenav-buttons, .storage .sidenav-buttons, .about .sidenav-buttons {
		margin: auto;
	}
	
  	#menu, .storage #menu, .about #menu {
		color: black;
		display: block;
		width: auto;
		height: auto;
		margin: auto;
		border:none;
		background: rgb(255,255,255);
		background: rgba(255,255,255,0.7);
	}

	#menuhid, .storage #menuhid, .about #menuhid {
		display: none;
		background: rgb(255,255,255);
		background: rgba(255,255,255,0.7);
	}
	
	.welcome {
		grid-template-columns: 5px auto 5px;
	}
	
	.changelog, .welcome-image, .welcome-button {
		display: none;
	}
	
	/*GRID - HOME*/
	
	.home-main {
		grid-template-columns: auto 45% 45% auto;
		grid-template-rows: 1px 250px 50px auto 200px 50px;
		grid-template-areas: 
		"menu menu menu menu"
		". title title ."
		". subtitle subtitle."
		". main main ." 
		". stamps blinky ."
		". footer footer ." ;
	}
	
	.main-window {
		padding: 20px 4%;
	}
	
	.home-main .main-window article:first-child, .home-main .main-window article:nth-child(even), .home-main .main-window article:nth-child(odd) {
		margin:  30px 0 !important;
	}

	.home-main .buttons {
		display: inline-block;
		text-align: center;
	
	}

	.home-main .blinky {
		display: inline-block;
		text-align: center;

	}
	
	.home-main .stamp-holder {
		display: inline-block;
		grid-area: stamps;
		justify-self: center;
		align-self: center;
		position: relative;
		margin: 0 11%;
		height: auto;
		line-height: 180px;
		max-width: unset;
	}

	.home-main .blinky-holder {
		display: inline-block;
		grid-area: blinky;
		justify-self: center;
		align-self: center;
		position: relative;
		margin: 0 11%;
		height: auto;
		padding: 0 10px;
		max-width: unset;
	}
	
	/*GRID - ART*/
	
	.art {
		display: grid;
		justify-content: stretch;
		align-content: stretch;
		grid-template-columns: 100vw;
		grid-template-rows: auto 300px auto auto;
		grid-gap: 10px;
		grid-template-areas: 
		"folders"
		"thumbs"
		"modal" 
		"footer";
	}
	
	.art-folders {
		grid-area: folders;
		width: 90%;
		height: 200px;
	}
	
	.art-modal {
		grid-area: modal;
		align-self: stretch;
		justify-self: stretch;
		width: auto;
		margin: 8px;
	}
	
	.art-thumbs {
		grid-area: thumbs;
		margin: 10px;
	}
	
	.art-bg {
		grid-row-start: 1;
		grid-row-end: 5;
		align-self: end;
	}
	
	/*GRID - BLOG*/

	/*GRID - STORAGE*/
	
	
	.storage {
		grid-template-rows: auto 250px auto 100px;
		grid-template-areas: 
		"menu"
		"title"
		"main" 
		"footer";
		
	}
	
	.storage .main-window {
		padding: 0 0 20px;
	}
	
	.storage .info {
		display: none;
	}
	
	.storage .menu {
		position: absolute;
		top: 0;
		margin: 2% 2%;
		grid-area: menu;
		grid-template-rows: 100px;
		grid-template-columns: 100px 100px;
		grid-gap: 10px 10px;
		grid-template-areas:
		"back_1 back_2"
	}
	
	.storage .back_1 {
		align-self: stretch;
	}

	.storage .back_2 {
		align-self: stretch;
	}
	
	.storage header {
		grid-area: title;
	}
	
	.storage .title {
		align-self: end;
	}
	
	.storage .mascot {
		display: none;
	}
	
	
	
	/*GRID - ABOUT*/


	.about {
		grid-template-columns: 0 100% 0;
	}
	
	.about .main-window, .storage .main-window {
		padding: 0 5% 50px;
	}
	
	.about-paper {
		display: none;
	}
	
	.buttons {
		display: none;
	}

	.blinky {
		display: none;
	}
	
	.stamp-holder {
		display: none;
	}

	.blinky-holder {
		display: none;
	}

	.mascot {
		display: none;
	}
}