html{
	box-sizing:border-box !important;
	padding:0;
	margin:0;
	width:100%;
	height:100%;
	position:fixed;
	overflow:hidden;
}

body {
	margin:0;
	padding:0;
	height:100%;
	width:100%;
	box-sizing:border-box;
	position:relative;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
	overflow:hidden;
}

body::-webkit-scrollbar {
	display: none;
}

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*FONTS */
@import url('https://fonts.cdnfonts.com/css/gotham-6');
/*
font-family: 'Gotham', sans-serif;
font-family: 'Jost', sans-serif;
font-family: 'Gotham Black', sans-serif;
font-family: 'Gotham Light', sans-serif;
font-family: 'Gotham Thin', sans-serif;
font-family: 'Gotham XLight', sans-serif;
font-family: 'Carnero', sans-serif;
font-family: 'Gotham Book', sans-serif;
font-family: 'Gotham Ultra', sans-serif;
*/
@font-face {
    font-family: win95;
    src: url(../fonts/MS\ Sans\ Serif\ 8pt.ttf);
}

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

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

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

/* Loader */



/* divs */

.portrait_warning {
	display:none;
}
.main {
	width:100%;
	height:100%;
	background:green;
	background-image:url('../images/bg.png');
	background-blend-mode:hard-light;
	display:flex;
	align-items:center;
	flex-direction:column;
	top:0;
	overflow-x: hidden;
	overflow-y: scroll;
    scroll-snap-type: y mandatory;
	scroll-padding: 0px;
	-ms-overflow-style: none;  /* IE and Edge */
  	scrollbar-width: none;  /* Firefox */
	gap:15px;
	
}
.main::-webkit-scrollbar {
	display: none;
}

.section {
	scroll-snap-stop:always;
	min-width:350px;
	width:90% !important;
	min-height:100%;
	background:white;
	box-sizing:border-box;
	/* filter:drop-shadow(5px 5px 2px rgba(0,0,0,0.2)); */
	scroll-snap-align: center !important;
}

.clicker {
	position:absolute;
	top:50%;
	left:50%;
	user-select:none;
	transition: ease-in-out 500ms;
}

.clicker img {
	height: 25px;
	width: 25px;
}

.movetofile {
	top:40px !important;
	left:40px !important;
}

/* .section:not(:first-of-type){
	margin-top:2rem;
} */
.slider {
	right:-70px;
	z-index:800;
	filter:drop-shadow(-1px 1px 5px rgba(0,0,0,0.4));
}

.slider_header {
	position:relative;
	z-index:810;
}

.myspace_slider{
	height:100%;
	width:60px;
	position:fixed;
	top:0;
	background:white;
	box-sizing:border-box;
}
.myspace_slider_header{
	width:100%;
	height:45px;
	background:#003399;
	display:flex;
	align-items:center;
	flex-direction:row;
}
.insta_slider{
	height:100%;
	width:60px;
	position:absolute;
	top:0;
	background:white;
	box-sizing:border-box;
}
.insta_slider_header{
	width:100%;
	height:45px;
	background:white;
	display:flex;
	align-items:center;
	flex-direction:row;
}
.spotify_slider{
	height:100%;
	width:60px;
	position:absolute;
	top:0;
	background:black;
	box-sizing:border-box;
}
.spotify_slider_header{
	width:100%;
	height:45px;
	background:black;
	display:flex;
	align-items:center;
	flex-direction:row;
}

.myspace {
	font-family: Verdana Bold, sans-serif;
	/* pointer-events:none;
	-webkit-user-select: none;
	-ms-user-select: none; 
	user-select: none;  */
	width:100%;
	box-sizing:border-box;
	/* border-radius:10px; */
	overflow-x:clip;
	z-index:10;
	height:100%;
}

.topbar {
	width:100%;
	/* position:sticky !important; */
	top:0;
	z-index:100;
}

/* .topbar:first-of-type{
	border-top-left-radius:10px;
	border-top-right-radius:10px;
} */

.myspace .topbar{
	height:45px;
	background:#003399;
	display:flex;
	align-items:center;
	flex-direction:row;
}

.downarrow{
	font-size: .5rem;
	margin-left:3px;
}

.myspace .nav{
	height:20px;
	font-size:.75rem;
	z-index:50;
}

.myspace .option {
	color:white;
	width:50px;
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
}

.myspace .option:first-of-type{
	margin-left:10px;
}

.myspace .option:not(:first-of-type){
	border-left:1px solid #1b4eac;
}

.myspace .option:nth-last-of-type(2){
	margin-left:auto;
}
.myspace .option:nth-last-of-type(-n+2){
	border-left:1px solid #1b4eac;
	width:75px;
}

.myspace .myspacebody {
	background:white;
	display:flex;
	flex-direction: row;
	/* justify-content:center; */
	padding:1rem 10% 1rem 10%;
	/* flex-wrap:wrap; */
	height:fit-content;
	width:100%;
	box-sizing:border-box;
	gap:15px;
	max-height:100%;
	overflow-y:auto;
	height:calc(100% - 65px);
}


.myspace_friends {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:5px;
	height: 210px;
	width:100%;
}
.myspace_friends_row {
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	gap:5px;
	height:50%;
	width:100%;
}
.myspace_friends_item {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	height:100%;
	width: 25%;
}
.myspace_friends_item img {
	height: 90px;
	width: 90px;
	object-fit:cover;
}
.myspace_friends_item span {
	width: 100%;
	font-size:.8rem;
	color:blue;
	text-align:center;
}

.music_player_container {
	width: 300px;
	height: 50px;
	background: rgb(247,249,246);
	background: linear-gradient(180deg, rgba(247,249,246,1) 0%, rgba(216,213,214,1) 55%, rgb(158, 160, 160) 88%);
	display:flex;
	flex-direction:row;
	align-items:center;
	border:1px solid black;
}

.music_player_play {
	height: 100%;
	width: 75px;
	background:transparent;
	display:flex;
	justify-content:center;
	align-items:center;
}

.music_player_play_button {
	width: 40px;
	height:40px;
	background: rgb(247,249,246);
	background: linear-gradient(180deg, rgba(247,249,246,1) 0%, rgba(216,213,214,1) 21%, rgb(167, 167, 167) 82%, rgba(255,255,255,1) 99%);
	display:flex;
	justify-content:center;
	align-items:center;
	font-size: 1.5rem;
	color:#6a6a6a;
	border-radius: 8px;
	border: 1px solid #737373;
}

.music_player_body {
	width: 100%;
	height: 100%;
	background:transparent;
	display:flex;
	justify-content:center;
	align-items:center;
}

.music_player_body_text {
	height: 40px;
	width: calc(100% - 20px);
	background: #27201e;
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:center;
	color:white;
	border-radius:8px;
	box-sizing:border-box;
	padding: 5px;
}

.music_player_body_text_track {
	height: 100%;
	width: 50%;
	display:flex;
	justify-content:center;
	align-items:flex-start;
	flex-direction:column;
}
.music_player_body_text_track span {
	height: 50%;
	color:white;
	font-size:0.8rem;
}

.music_player_visual {
	width:50%;
	height:100%;
	display:flex;
	flex-direction:row;
	align-items:center;
	gap: 2px;
}
.music_player_visual_bar {
	height: 100%;
	width: 10px;
	display:flex;
	flex-direction: column-reverse;
	gap:2px;
}
.music_player_visual_pip {
	width:100%;
	height: 2px;
}

.music_player_visual_pip:nth-child(1) {
	background:#188a18;
}
.music_player_visual_pip:nth-child(2) {
	background:#a8f37c;
}
.music_player_visual_pip:nth-child(3) {
	background:#fbfbcc;
}
.music_player_visual_pip:nth-child(4) {
	background:#e9ef81;
}
.music_player_visual_pip:nth-child(5) {
	background:#dea671;
}
.music_player_visual_pip:nth-child(6) {
	background:#dec671;
}
.music_player_visual_pip:nth-child(7) {
	background:#de8771;
}


.parent {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 10px;
	font-size:.8rem;
	text-align:left;
	width:100%;
	max-width:300px;
	border-left:1px solid #a7aeb8;
	border-right:1px solid #a7aeb8;
	border-bottom:1px solid #a7aeb8;
	box-sizing:border-box;
	padding:10px 0 10px 0;
	background:#fbfbff;
}
	
.div1 { grid-area: 1 / 1 / 2 / 3; }
.div2 { grid-area: 1 / 3 / 2 / 7; }
.div3 { grid-area: 2 / 1 / 3 / 3; }
.div4 { grid-area: 2 / 3 / 3 / 7; }

.div1, .div2, .div3, .div4 {
	width:150px;
	cursor:pointer;
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	color: black !important;
	text-decoration: underline !important;
}

.div1:hover, .div2:hover, .div3:hover, .div4:hover {
	color:blue !important;
}

.myspacecolumnitem{
	width:100%;
	height:fit-content;
	display:flex;
	flex-direction:row;
}

.myspacecolumn .name{
	font-size:1.2rem;
	font-weight:bold;
}

.myspacedetails{
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
}

.myspacedetails span {
	margin-left:10px;
}
.myspacedetails img {
	margin-left:7px;
	margin-top:3px;
}

.myspace .myspacebody .myspacecolumn{
	height:fit-content;
	display:flex;
	flex-direction:column;
	gap:10px;
	flex:1 0 0;
	flex-basis:600px;
}

.myspacecolumn_main {
	height:100% !important;
}

.myspace .myspacebody .myspacecolumn:first-of-type{
	flex-basis:200px;

}
.myspacecolumn:nth-of-type(2n){
	
}

.red {
	background:red;
}

.bluetext{
	color: blue;
	cursor: pointer;
}

.borderbox{
	width:100%;
	height: auto;
	padding:2rem;
	font-size:1rem;
	border:2px solid black;
	box-sizing:border-box;
	text-align:center;
}

.fiftyREM {
	font-size:.5rem;
}

.seventyfiveREM {
	font-size:.75rem;
}

.bold {
	font-weight:bold;
}

.myspaceoptionheader {
	background: #619bc9;
	width:100%;
	max-width:300px;
	padding: 2px 0 2px 10px; 
	height:fit-content;
	color:white;
	border: 1px solid #a7aeb8;
	box-sizing:border-box;
}

.myspacenameimage {
	display:flex;
	flex-direction:column;
	gap:10px;
}

.myspaceoptions {
	max-width: 300px;
	align-items:center;
}

.column{
	flex-direction:column !important;
}

.header {
	background-image:url("../images/download.webp");
	height:100%;
	position:relative;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	width:100%;
	font-family: win95;
	display: flex;
	flex-direction:column;
	gap: 1rem;
}

.header_taskbar{
	width:100%;
	height:25px;
	background:#c2c2c2;
	position:absolute;
	bottom:0;
	border-top:1px solid #dadada;
	z-index:25;
}

.header_clock{
	height:18px;
	width:fit-content;
	position:absolute;
	right:2px;
	bottom:2px;
	border-top: 2px solid #969696;
	border-bottom: 2px solid #dadada;
	border-right: 1px solid #dadada;
	border-left: 1px solid #969696;
	font-size:.80rem;
	display:flex;
	justify-content:center;
	align-items:center;
	padding: 0 5px 0 5px;
}

.clippy_container {
	height: 200px;
	width: 300px;
	position:absolute;
	right: 0px;
	bottom: 25px;
}
.clippy {
	height: 100px;
	width: 100px;
	position:absolute;
	right:0;
	bottom:0;
	background-image:url("../images/clippy.png");
	background-size:cover;
}
.clippy_text {
	height: 100px;
	width: 200px;
	position:absolute;
	right: 80px;
	bottom: 75px;
	/* border: 1px solid black; */
	background: #f7f7c6;
	border-radius: .4em;
	padding:1rem;
	box-sizing:border-box;
	font-size:0.85rem;
}

.clippy_text:after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 19px solid transparent;
	border-left-color: #f7f7c6;
	border-right: 0;
	border-bottom: 0;
	margin-top: -9.5px;
	margin-right: -19px;
}

.header_document {
	/* position:absolute; */
	top:10px;
	left:10px;
	display:flex;
	height:100px;
	width:100px;
	flex-direction:column;
	justify-content:flex-start;
	align-items:center;
	gap:3px;
	text-align:center;
}

.header_document img {
	height: 60px;
	width: 60px;
}

.clicked {
	background-color:rgba(0,0,0,0.3);
	transform:translateY(4px);
}

.header_window {
	height:calc(100% - 25px);
	width:100%;
	background:white;
	position:absolute;
	top:0;
	bottom:25px;
	box-sizing:border-box;
	z-index:19;
}

.header_window_topbar {
	background: #000080;
	height:45px;
	width:100%;
	position:absolute;
	top:0;
	z-index:20;
	border-top: 2px solid #c0b8bf;
	border-left: 2px solid #c0b8bf;
	border-right: 2px solid #c0b8bf;
	border-bottom: 3px solid #c0b8bf;
	box-sizing:border-box;
	color:white;
	font-size:1rem;
	display:flex;
	align-items:center;
	padding-left:15px;
}

.header_window_body {
	position:absolute;
	top:45px;
	padding: 1rem;
	width:100%;
	height:calc(100% - 45px);
	box-sizing:border-box;
	border-left:3px solid #c0b8bf;
	border-right:3px solid #c0b8bf;
	border-bottom:3px solid #c0b8bf;
	color:black;
	overflow:auto;
}

.header_window_x {
	height: 30px;
	width: 30px;
	position:absolute; 
	top:5px;
	right:5px;
	background:#d7d7d7;
	font-size:25px;
	text-align:center;
	color:black;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	border-top: 2px solid #969696;
	border-bottom: 2px solid #dadada;
	border-right: 1px solid #dadada;
	border-left: 1px solid #969696;
	box-sizing:border-box;
}

.header_start_menu{
	max-height:300px;
	min-height:200px;
	width:140px;
	background:#c2c2c2;
	position:absolute;
	bottom:25px;
	left:0px;
	z-index:22;
}

.header_leftbar {
	height: 199px;
	width: 25px;
	background: #818181;
	position:absolute;
	bottom: 1px;
	left:1px;
}

.header_leftbar span {
	height:10px;
	width:280px;
	position:absolute;
	bottom:0;
	left:5px;
	background:none;
	transform-origin: 0 0;
  	transform: rotate(-90deg);
	margin:auto;
	text-align:left;
	color: white;
}

.header_startmenu_item {
	width:115px;
	height:30px;
	margin-left:25px;
	display:flex;
	flex-direction:row;
	cursor:default;
}

.header_startmenu_item:last-of-type{
	margin-top:auto;
}

.header_startmenu_item:hover {
	background:rgb(179, 179, 179);
}

.header_startmenu_item_icon {
	width: 30px;
	height:30px;
	display:flex;
	justify-content:center;
	align-items:center;
}
.header_startmenu_item_text {
	width:85px;
	min-width:0;
	height:30px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:.75rem;
}

#header_window_recycle{
	z-index:18;
}

.recycleparent {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(5, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	height:100%;
	width:100%;
}
	
.recyclediv1 { grid-area: 1 / 1 / 2 / 2; }
.recyclediv2 { grid-area: 1 / 2 / 2 / 3; }
.recyclediv3 { grid-area: 1 / 3 / 2 / 4; }
.recyclediv4 { grid-area: 1 / 4 / 2 / 5; }
.recyclediv5 { grid-area: 1 / 5 / 2 / 6; }
.recyclediv6 { grid-area: 2 / 1 / 3 / 2; }
.recyclediv7 { grid-area: 2 / 2 / 3 / 3; }
.recyclediv8 { grid-area: 2 / 3 / 3 / 4; }
.recyclediv9 { grid-area: 2 / 4 / 3 / 5; }
.recyclediv10 { grid-area: 2 / 5 / 3 / 6; }
.recyclediv11 { grid-area: 3 / 1 / 4 / 2; }
.recyclediv12 { grid-area: 3 / 2 / 4 / 3; }
.recyclediv13 { grid-area: 3 / 3 / 4 / 4; }
.recyclediv14 { grid-area: 3 / 4 / 4 / 5; }
.recyclediv15 { grid-area: 3 / 5 / 4 / 6; }
.recyclediv16 { grid-area: 4 / 1 / 5 / 2; }
.recyclediv17 { grid-area: 4 / 2 / 5 / 3; }
.recyclediv18 { grid-area: 4 / 3 / 5 / 4; }
.recyclediv19 { grid-area: 4 / 4 / 5 / 5; }
.recyclediv20 { grid-area: 4 / 5 / 5 / 6; }
.recyclediv21 { grid-area: 5 / 1 / 6 / 2; }
.recyclediv22 { grid-area: 5 / 2 / 6 / 3; }
.recyclediv23 { grid-area: 5 / 3 / 6 / 4; }
.recyclediv24 { grid-area: 5 / 4 / 6 / 5; }
.recyclediv25 { grid-area: 5 / 5 / 6 / 6; }

.recycleparent > div {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	text-align:center;
	gap:3px;
}
.tabbed_container {
	display:flex;
	flex-direction:column;
}
.tabbed {
	margin-left:15px;
}

#admin_body {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

#admin_body .admin_item {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	height: 1.5rem;
	border: 1px solid black;
}

#admin_body .admin_item .admin_item_item {
	width: 23%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items:center;
}

.dnd_container {
	width:100%;
	height:100%;
	box-sizing:border-box;
	background:rgb(194, 190, 185);
	border: 2px solid black;
}

.insta_container {
	width:100%;
	height:100%;
	background:white;
	font-family: 'Instagram Sans', sans-serif;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
}

.instagram {
	/* border-radius:10px; */
	overflow-x:clip;
}

.insta_topbar {
	width:100%;
	height: 80px;
	background:white;
	border-bottom:1px solid rgba(211, 211, 211,0.4);
	box-sizing:border-box;
	padding-bottom:15px;
}

.insta_topbuttons{
	position:absolute;
	top: 10px; 
	right:10px;
	font-size:1.25rem;
}
/* .insta_topbuttons img{
	height:20px;
}

.insta_topbuttons img:nth-child(2){
	margin-left:10px;
	margin-right:10px;
} */
.insta_topbuttons i:nth-child(2){
	margin-left:10px;
	margin-right:10px;
}

.insta_stories{
	width:calc(100% - 2px);
	height:80px;
	background:none;
	top:30px;
	left:0;
	display:flex;
	flex-direction:row;
	align-items:center;
	padding: 0 20px 0 20px;
	gap: 15px;
	overflow-y:auto;
	-ms-overflow-style: none;  /* IE and Edge */
  	scrollbar-width: none;  /* Firefox */
	box-sizing:border-box;
}

.insta_stories::-webkit-scrollbar{
	display: none;
}

.insta_feed_container{
	width:100%;
	height:calc(100% - 180px);
	display:flex;
	justify-content:center;
	align-items:center;
}

.insta_feed{
	min-width:250px;
	max-width:500px;
	display:flex;
	flex-direction:column;
	gap:20px;
	z-index:100;
	overflow-y:scroll;
	height:100%;
	overscroll-behavior-y: contain;
}

.insta_feed_item{
	width:100%;
	height:auto;
	background:white;
	display:flex;
	flex-direction:column;
	font-size:0.8rem;
}

.insta_feed_item span{
	margin-left: 10px;
}

.insta_feed_item img{
	width:100%;
	max-height:35rem;
	overflow:auto !important;
	object-fit:cover;
}

.insta_stories_item{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	font-size:.75rem;
}
.insta_interact_bar{
	width:100%;
	height:25px;
	background:white;
	font-size:15px;
	padding-left:12px;
	box-sizing:border-box;
	position:relative;
	display:flex; 
	align-items: center;
}
.insta_interact_bar i:not(:first-of-type){
	margin-left:10px;
}
.insta_interact_bar i:last-of-type{
	position:absolute;
	right: 10px;
}

.hideScrollbar {
	-ms-overflow-style: none;  /* IE and Edge */
  	scrollbar-width: none;  /* Firefox */
	box-sizing:border-box;
}
.hideScrollbar::-webkit-scrollbar{
	display: none;
}


/* .insta_stories_item img {
	border-image: linear-gradient(#f6b73c, #4d9f0c) 30;
	border-width: 4px;
	border-style: solid;
	border-radius:50px !important;
	background:red;
} */
.insta_stories_item img {
	/* border: double 4px transparent; */
	border: solid 1px #ff0077;
	border-radius: 80px;
	background-image: linear-gradient(white, white), radial-gradient(circle at top right, rgb(255, 0, 170),#ff9e20);
	background-origin: border-box;
	background-clip: content-box;
	background-color:white;
	padding:3px;
	height:50px;
}

/* .insta_stories_item img:before {
	content:" ";
	position:absolute;
	z-index:-1;
	top:5px;
	left:5px;
	right:5px;
	bottom:5px;
	border:5px solid #ffeeff;
} */
.insta_banner {
	width:calc(100% - 2px);
	height:45px;
	background:white;
	position:relative;

	top:0;
	z-index:100;
}

.insta_logo {
	position:absolute;
	top:10px;
	left:10px;
}

.insta_bottombar {
	height:50px;
	bottom:0;
	right:0;
	width:100%;
	background:white;
	border-top:1px solid rgba(211, 211, 211,0.4);
	display:flex;
	align-items:center;
	justify-content:center;
}

.insta_bottombar_buttons{
	width:50%;
	min-width: 300px;
	max-width:500px;
	height:50px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-direction:row;
	font-size: 25px;
}

.spotify {
	background:black;
	font-family: GothamBold;
	box-sizing:border-box;
}

.spotify_toast {
	height: 45px;
	width: 100%;
	position: absolute;
	top:-45px;
	right:0;
	left:0;
	transition: ease-in-out 500ms;
	background: #109658;
	color: white;
	font-family: GothamBold;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:row;
	gap:10px;
}

.spotify_toast_visible {
	top:0;
}

.spotify_topbar{
	height:45px;
	padding:5px;
	box-sizing:border-box;
	/* position:sticky; */
	top:0;
	display:flex;
	align-items:center;
}
.spotify_topbar img{
	height:35px;
}

.spotify_container {
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:center;
	height:100%;
	box-sizing:border-box;
}

.spotify_question_container{
	display:flex;
	justify-content:center;
	align-items:flex-start;
	width:100%;
	padding-top:10px;
}

.spotify_question_container input {
	height: 3rem;
	width: 300px;
	border:none;
	box-sizing:border-box;
	font-size:1.25rem;
}

.spotify_question_container input:focus {
    outline: none;
}

.spotify_question {
	height:3rem;
	width:3rem;
	display:flex;
	justify-content:center;
	align-items:center;
	background:white;
	background:white;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
}
.spotify_x {
	height:3rem;
	width:3rem;
	display:flex;
	justify-content:center;
	align-items:center;
	background:white;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
}

.spotify_search_container, .spotify_initial_container{
	width:100%;
	height:min-content;
	display:flex;
	justify-content:flex-start;
	align-items:center;
	flex-direction:column;
	gap:10px;
	box-sizing:border-box;
	overflow-y:auto;
}

.spotify_type_buttons{
	display:flex;
	justify-content:center;
	align-items:center;
	font-family: 'Gotham Light', sans-serif;
	font-size:.7rem;
	gap:10px;
	margin-top:10px;
}

.spotify_type_button {
	height: 2rem;
	padding: 10px 20px;
	text-align:center;
	text-decoration: none;
	display:inline-block;
	cursor:pointer;
	box-sizing:border-box;
	border-radius: 16px;
	border:1px solid white;
	color:white;
	gap:10px;
}

.spotify_focus {
	background:#1ab26b;
	border:1px solid #abfad5;
}

.spotify_search_items {
	height:fit-content;
	width:100%;
	max-width:600px;
	display:flex;
	justify-content:flex-start;
	align-items:center;
	flex-direction:column;
	gap:10px;
	box-sizing:border-box;
}

.spotify_item{
	width:100%;
	display:flex;
	justify-content:flex-start;
	align-items:center;
	padding-inline:1rem;
	box-sizing:border-box;
	gap:5px;
	border-radius: 15px;
}

.spotify_item_img {
	height:100%;
	width:auto;
	position:relative;
	border-radius: 15px;
	overflow:hidden;
}

.spotify_item > img {
	height: 85%;
}

.spotify_item_preview {
	height:100%;
	width:100%;
	background:rgba(0,0,0,0.3);
	backdrop-filter:blur(2px);
	display:none;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:0;
	left:0;
	border-radius: 15px;
}

.spotify_item_preview_pause {
	display:none;
	justify-content:center;
	align-items:center;
	height:100%;
	width:100%;
	background:rgba(0,0,0,0.3);
	backdrop-filter:blur(2px);
	position:absolute;
	top:0;
	left:0;
	border-radius: 15px;
}

.spotify_item_add {
	height:60%;
	width: 100px;
	background: #1ab26b;
	border: 1px solid #abfad5;
	margin-left:auto;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:0.75rem;
	cursor:pointer;
	border-radius: 15px;
	text-align:center;
	font-family: 'Gotham Light', sans-serif;
}

.spotify_added {
	background: #3f3f3f;
	border: 1px solid #8b8b8b; 
}

.spotify_added:hover {
	background: #3f3f3f;
	border: 1px solid #8b8b8b;
}

.spotify_item_img:hover > .spotify_item_preview {
	display:flex;
}

.spotify_item_text {
	display:flex;
	flex-direction:column;
}

.spotify_item_text_track {
	height:50%;
	font-family: 'Gotham Bold', sans-serif;
	color:white;
	max-width:200px;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	background:transparent;
	flex: 1 0 auto;
}
.spotify_item_text_artist {
	height:50%;
	font-family: 'Gotham Bold', sans-serif;
	color:#808080;
	max-width:200px;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	background:transparent;
}

.dnd_container img {
	object-fit:contain;
	max-width:80%;
	filter:grayscale(100%);
}

.start_screen {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background:rgb(194, 190, 185);
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:20px;
}

.character_creation_screen {
	background:rgb(194, 190, 185);
	height:100%;
	width:100%;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	box-sizing:border-box;
	padding:10px;
	gap: 10px;
}

.character_creation_column {
	height:100%;
	width:50%;
	border:1px solid black;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10px;
	padding:10px;
}

.stat_container {
	width:90%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

.stat_container_item {
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
}

.character_creation_column input[type='text'], .character_creation_column select{
	border:none;
	background:rgb(145, 136, 127);
	border-bottom:2px solid rgb(104, 97, 89);
	color:white;
	width:90%;
	height:2rem;
	font-size:1.2rem;
	font-family:win95;
	border-radius:5px;
	text-align:center;
}

.cc_button {
	border:none;
	background:rgb(187, 162, 136);
	border-bottom:2px solid rgb(116, 97, 77);
	color:rgb(247, 238, 225);
	width:90%;
	height:3rem;
	font-size:1.2rem;
	font-family:win95;
	border-radius:5px;
	text-align:center;
	margin-top:1rem;
}

.cc_button:hover {
	background:rgb(240, 213, 185);
	color:rgb(163, 149, 130);
	transition:all ease-in-out 150ms;
}

.character_creation_column_item {
	width: 90%;
}

.stat_container > table > tbody > tr > td {
	width:50px;
	height:40px;
	font-size: 1.25rem;
}
.stat_container > table > tbody > tr >  td > button {
	height:40px;
	width:100%;
	font-size:20px;
}

.character_creation_column input[type='text']::placeholder{
	color:rgb(184, 184, 184);
	font-size:1.2rem;
	text-align:center;
	font-family:win95;
}

.cc_stat {
	text-align:center;
	font-size:1.25rem;
}

.spacer-10 {
	height:10px;
	width:100%;
}

.spacer-20 {
	height:20px;
	width:100%;
}

.game_screen {
	width:100%;
	height:100%;
	background:transparent;
}

.game_over_screen {
	height:100%;
	width:100%;
	background:rgb(204, 175, 172);
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	font-size:2rem;
}
.glitch_screen {
	height:100%;
	width:100%;
	background:rgba(255, 100, 100,0.3);
	backdrop-filter:blur(2px);
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	font-size:2rem;
	position:absolute;
	top:0;
	left:0;
	z-index:20;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Glitch Effect Start */
h1,
h2 {
  margin: 0;
}

a {
  color: #ccc;
}

section {
  padding: 20px;
}

.hero {
  font-size: clamp(40px, 10vw, 100px);
  line-height: 1;
  display: inline-block;
  color: #fff;
  z-index: 2;
  letter-spacing: 10px;

  /* Bright things in dark environments usually cast that light, giving off a glow */
  filter: drop-shadow(0 1px 3px);
}

.demo {
  height: 100px;
  background: #fff;
}

.layers {
  position: relative;
}

.layers::before,
.layers::after {
  content: attr(data-text);
  position: absolute;
  width: 110%;
  z-index: -1;
}

.layers::before {
  top: 10px;
  left: 15px;
  color: #e0287d;
}

.layers::after {
  top: 5px;
  left: -10px;
  color: #1bc7fb;
}

.single-path {
  clip-path: polygon(
    0% 12%,
    53% 12%,
    53% 26%,
    25% 26%,
    25% 86%,
    31% 86%,
    31% 0%,
    53% 0%,
    53% 84%,
    92% 84%,
    92% 82%,
    70% 82%,
    70% 29%,
    78% 29%,
    78% 65%,
    69% 65%,
    69% 66%,
    77% 66%,
    77% 45%,
    85% 45%,
    85% 26%,
    97% 26%,
    97% 28%,
    84% 28%,
    84% 34%,
    54% 34%,
    54% 89%,
    30% 89%,
    30% 58%,
    83% 58%,
    83% 5%,
    68% 5%,
    68% 36%,
    62% 36%,
    62% 1%,
    12% 1%,
    12% 34%,
    60% 34%,
    60% 57%,
    98% 57%,
    98% 83%,
    1% 83%,
    1% 53%,
    91% 53%,
    91% 84%,
    8% 84%,
    8% 83%,
    4% 83%
  );
}

.paths {
  animation: paths 5s step-end infinite;
}

@keyframes paths {
  0% {
    clip-path: polygon(
      0% 43%,
      83% 43%,
      83% 22%,
      23% 22%,
      23% 24%,
      91% 24%,
      91% 26%,
      18% 26%,
      18% 83%,
      29% 83%,
      29% 17%,
      41% 17%,
      41% 39%,
      18% 39%,
      18% 82%,
      54% 82%,
      54% 88%,
      19% 88%,
      19% 4%,
      39% 4%,
      39% 14%,
      76% 14%,
      76% 52%,
      23% 52%,
      23% 35%,
      19% 35%,
      19% 8%,
      36% 8%,
      36% 31%,
      73% 31%,
      73% 16%,
      1% 16%,
      1% 56%,
      50% 56%,
      50% 8%
    );
  }

  5% {
    clip-path: polygon(
      0% 29%,
      44% 29%,
      44% 83%,
      94% 83%,
      94% 56%,
      11% 56%,
      11% 64%,
      94% 64%,
      94% 70%,
      88% 70%,
      88% 32%,
      18% 32%,
      18% 96%,
      10% 96%,
      10% 62%,
      9% 62%,
      9% 84%,
      68% 84%,
      68% 50%,
      52% 50%,
      52% 55%,
      35% 55%,
      35% 87%,
      25% 87%,
      25% 39%,
      15% 39%,
      15% 88%,
      52% 88%
    );
  }

  30% {
    clip-path: polygon(
      0% 53%,
      93% 53%,
      93% 62%,
      68% 62%,
      68% 37%,
      97% 37%,
      97% 89%,
      13% 89%,
      13% 45%,
      51% 45%,
      51% 88%,
      17% 88%,
      17% 54%,
      81% 54%,
      81% 75%,
      79% 75%,
      79% 76%,
      38% 76%,
      38% 28%,
      61% 28%,
      61% 12%,
      55% 12%,
      55% 62%,
      68% 62%,
      68% 51%,
      0% 51%,
      0% 92%,
      63% 92%,
      63% 4%,
      65% 4%
    );
  }

  45% {
    clip-path: polygon(
      0% 33%,
      2% 33%,
      2% 69%,
      58% 69%,
      58% 94%,
      55% 94%,
      55% 25%,
      33% 25%,
      33% 85%,
      16% 85%,
      16% 19%,
      5% 19%,
      5% 20%,
      79% 20%,
      79% 96%,
      93% 96%,
      93% 50%,
      5% 50%,
      5% 74%,
      55% 74%,
      55% 57%,
      96% 57%,
      96% 59%,
      87% 59%,
      87% 65%,
      82% 65%,
      82% 39%,
      63% 39%,
      63% 92%,
      4% 92%,
      4% 36%,
      24% 36%,
      24% 70%,
      1% 70%,
      1% 43%,
      15% 43%,
      15% 28%,
      23% 28%,
      23% 71%,
      90% 71%,
      90% 86%,
      97% 86%,
      97% 1%,
      60% 1%,
      60% 67%,
      71% 67%,
      71% 91%,
      17% 91%,
      17% 14%,
      39% 14%,
      39% 30%,
      58% 30%,
      58% 11%,
      52% 11%,
      52% 83%,
      68% 83%
    );
  }

  76% {
    clip-path: polygon(
      0% 26%,
      15% 26%,
      15% 73%,
      72% 73%,
      72% 70%,
      77% 70%,
      77% 75%,
      8% 75%,
      8% 42%,
      4% 42%,
      4% 61%,
      17% 61%,
      17% 12%,
      26% 12%,
      26% 63%,
      73% 63%,
      73% 43%,
      90% 43%,
      90% 67%,
      50% 67%,
      50% 41%,
      42% 41%,
      42% 46%,
      50% 46%,
      50% 84%,
      96% 84%,
      96% 78%,
      49% 78%,
      49% 25%,
      63% 25%,
      63% 14%
    );
  }

  90% {
    clip-path: polygon(
      0% 41%,
      13% 41%,
      13% 6%,
      87% 6%,
      87% 93%,
      10% 93%,
      10% 13%,
      89% 13%,
      89% 6%,
      3% 6%,
      3% 8%,
      16% 8%,
      16% 79%,
      0% 79%,
      0% 99%,
      92% 99%,
      92% 90%,
      5% 90%,
      5% 60%,
      0% 60%,
      0% 48%,
      89% 48%,
      89% 13%,
      80% 13%,
      80% 43%,
      95% 43%,
      95% 19%,
      80% 19%,
      80% 85%,
      38% 85%,
      38% 62%
    );
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    clip-path: none;
  }
}

.movement {
  /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */
  position: relative;
  animation: movement 8s step-end infinite;
}

@keyframes movement {
  0% {
    top: 0px;
    left: -20px;
  }

  15% {
    top: 10px;
    left: 10px;
  }

  60% {
    top: 5px;
    left: -10px;
  }

  75% {
    top: -5px;
    left: 20px;
  }

  100% {
    top: 10px;
    left: 5px;
  }
}

.opacity {
  animation: opacity 5s step-end infinite;
}

@keyframes opacity {
  0% {
    opacity: 0.1;
  }

  5% {
    opacity: 0.7;
  }

  30% {
    opacity: 0.4;
  }

  45% {
    opacity: 0.6;
  }

  76% {
    opacity: 0.4;
  }

  90% {
    opacity: 0.8;
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    opacity: 0;
  }
}

.font {
  animation: font 7s step-end infinite;
}

@keyframes font {
  0% {
    font-weight: 100;
    color: #e0287d;
    filter: blur(3px);
  }

  20% {
    font-weight: 500;
    color: #fff;
    filter: blur(0);
  }

  50% {
    font-weight: 300;
    color: #1bc7fb;
    filter: blur(2px);
  }

  60% {
    font-weight: 700;
    color: #fff;
    filter: blur(0);
  }

  90% {
    font-weight: 500;
    color: #e0287d;
    filter: blur(6px);
  }
}

.glitch span {
  animation: paths 5s step-end infinite;
}

.glitch::before {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 8s step-end infinite, movement 10s step-end infinite;
}

.glitch::after {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 7s step-end infinite, movement 8s step-end infinite;
}

.hero-container {
  position: relative;
  padding: 200px 0;
  text-align: center;
}

.environment {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  filter: blur(5px);
  background: url(https://images.unsplash.com/photo-1602136773736-34d445b989cb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80)
    center no-repeat;
  background-size: cover;
}

/* Glitch Effect End */


.travel {
	width:100%;
	height:100%;
	background:transparent;
	display:flex;
	flex-direction:column;
	justify-content:center;
	box-sizing:border-box;
	padding:5px;
	gap:5px;
}

.travel_image {
	height:60%;
	width:100%;
	border:1px solid black;
	box-sizing:border-box;
	position:relative;
}

.travel_image img {
	min-width:100%;
	height:100%;
	object-fit:cover;
	filter:grayscale(100%);
}

.travel_text {
	height:40%;
	width:100%;
	border:1px solid black;
	box-sizing:border-box;
	padding:2rem;
	overflow:scroll;
	position:relative;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.travel_options {
	height:40%;
	width:100%;
	border:1px solid black;
	box-sizing:border-box;
	padding:2rem;
	overflow:scroll;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	padding:2px;
	gap:2px;
}

.dnd_option {
	width:100%;
	height:100%;
	border:1px solid black;
	box-sizing:border-box;
	padding:10px;
	display:flex;
	justify-content:center;
	align-items:center;
	cursor:pointer;
}

.dnd_option:hover {
	border:1px solid gold;
	transition:all ease-in-out 150ms;
	background:rgb(145, 136, 127);
	color:white;
}



.spotifyparent > div {
	border-radius:5px;
	background:#ff00ff;
	width:100%;
	height:100%;
	position:relative;
	overflow:hidden;
	box-sizing:border-box;
}

.spotifyparent > div > img {
	max-height:100%;
	/* transform:rotate(25deg);
	transform-origin: center; */
	/* antialiasing */
	outline: 1px solid transparent;
	-webkit-backface-visibility: hidden;
	transform: rotate(28deg);
	will-change: transform;
	-webkit-perspective: 1000;
	position:absolute;
	right:-2%;
	bottom:-29%;
	border-radius:3px;
}

.bigArt {
	object-fit:contain;
	transform:rotate(0deg) !important;
	position:absolute;
	height:100%;
	top:0;
	opacity:70%;
}

.bigDiv {
	background-position:center !important;
	background-size:cover !important;
}

.spotifyparent > div > .spotify_span {
	font-family: 'Gotham Black', sans-serif;
	height: 100%;
    width: 50%;
    display: flex;
    margin: 10px 0 0 10px;
    font-size: 1rem;
    font-weight: bolder;
	z-index:10;
	position:relative;
	/* filter: drop-shadow(3px 3px 3px rgba(0, 0, 0,0.5)); */
}

.bigSpan {
	font-family: 'Gotham Black', sans-serif;
	font-weight:bolder;
	background:rgba(0,0,0,0.4);
	backdrop-filter:blur(3px);
	width: 100% !important;
	height:65px !important;
	margin: 10px 0 0 0 !important;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	font-size:.85rem !important;
}

.spotifyparent {
	color:white;
	display: grid;
	width:100%;
	max-width:500px;
	height:100%;
	grid-template-columns:repeat(4, 1fr);
	grid-template-rows: repeat(6, 1fr) ;
	grid-column-gap: 5px;
	grid-row-gap: 5px;
	box-sizing:border-box;
	padding:2px;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
	
.spotifydiv1 { min-height: 120px; display:flex; flex-direction:column; gap:10px; border:2px solid white !important; background:#282828 !important; padding:1rem !important; grid-area: 1 / 1 / 1 / 5; }
.spotifydiv2 { grid-area: 2 / 1 / 2 / 3; }
.spotifydiv3 { grid-area: 2 / 3 / 2 / 5; }
.spotifydiv4 { grid-area: 3 / 1 / 3 / 3; }
.spotifydiv5 { grid-area: 3 / 3 / 3 / 5; }
.spotifydiv6 { grid-area: 4 / 1 / 5 / 3; }
.spotifydiv7 { grid-area: 4 / 3 / 5 / 5; }
.spotifydiv8 { grid-area: 5 / 1 / 6 / 3; }
.spotifydiv9 { grid-area: 5 / 3 / 6 / 5; }
.spotifydiv10 { grid-area: 6 / 1 / 7 / 3; }
.spotifydiv11 { grid-area: 6 / 3 / 7 / 5; }

.spotifydiv1 > span {
	font-family: 'Gotham Bold', sans-serif;
	font-size:.75rem !important;
}

.insta_loader{
	width: 100%;
	display:flex;
	justify-content:center;
	align-items:center;
	height:35px;
}

.spinloader {
	width: 35px;
	height: 35px;
	border: 3px solid #202020;
	border-bottom-color: transparent;
	border-radius: 50%;
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
  }
  
  @keyframes rotation {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
  } 

@media only screen and (max-height:500px) {
	.start_screen img{
		width: 40%;
	}
	.character_creation_column input[type='text'], .character_creation_column select{
		height: 1.4rem;
	}
	.character_creation_column {
		height: 100% !important;
		gap: 4px !important;
	}
	.character_creation_screen {
		flex-direction:row !important;
	}
	.travel {
		width:100%;
		height:100%;
		background:transparent;
		display:flex;
		flex-direction:row;
		justify-content:center;
		box-sizing:border-box;
		padding:5px;
		gap:5px;
	}
	.travel_image, .travel_text, .travel_options { 
		height: 100%;
	}
	.insta_feed {
		align-items:center;
	}
	.insta_feed_item {
		width: 60%;
	}
	.insta_feed_container {
		height: calc(100% - 150px);
	}
	.insta_bottombar, .insta_bottombar_buttons {
		box-sizing:border-box;
		height: 20px;
		border: none;
	}
	.insta_bottombar_buttons {
		font-size:1.1rem;
	}
	.spotify_span {
		font-size:0.8rem !important;
	}
}

@media only screen and (max-width:1290px) {
	.myspace .myspacebody .myspacecolumn{
		flex-basis:300px;
	}
	.myspace .myspacebody .myspacecolumn:first-of-type{
		flex-basis:200px;
	}
}

@media only screen and (max-width:950px) {
	.main {
		flex-direction:row;
		overflow-x: scroll;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		gap:0px;
	}
	.myspace .nav {
		display:none;
	}
	.section{
		min-width:100%;
		height:100%;
		max-height:100%;
	}
	.insta_feed_container {
		max-height:100%;
	}
	.myspacecolumn .name{
		font-size:1rem;
	}
	.myspacebody {
		display:flex;
		flex-direction:column !important;
		gap:5px;
	}
	.myspacecolumn{
		width:100% !important;
		align-items:center;
		box-sizing:border-box; 
		height:max-content !important;
	}
	.myspace_friends_item {
		gap: 2px;
	}
	.myspace_friends_item img {
		width: 60px;
		height: 60px;
	}
	.myspacenameimage {
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
	}
	#borderbox, #blogs {
		display:none;
	}
	.recycleparent {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 0px;
		grid-row-gap: 25px;
	}
	
	.recyclediv1 { grid-area: 1 / 1 / 2 / 2; }
	.recyclediv2 { grid-area: 1 / 2 / 2 / 3; }
	.recyclediv3 { grid-area: 2 / 1 / 3 / 2; }
	.recyclediv4 { grid-area: 2 / 2 / 3 / 3; }
	.recyclediv5 { grid-area: 3 / 1 / 4 / 2; }
	.recyclediv6 { grid-area: 3 / 2 / 4 / 3; }
	.recyclediv7 { grid-area: 4 / 1 / 5 / 2; }
	.recyclediv8 { grid-area: 4 / 2 / 5 / 3; }
	.recyclediv9 { grid-area: 5 / 1 / 6 / 2; }
	.recyclediv10 { grid-area: 5 / 2 / 6 / 3; }

	.character_creation_screen {
		flex-direction:column;
	}
	.character_creation_column {
		width:100%;
		height:30%;
		overflow:scroll;
	}
	.character_creation_column:first-of-type {
		height:70%;
	}

}