
	
	body {
		margin:0;
		background-color: #00013a;
background-image: url(img/br.png);
background-size:2700px;
background-position: top center;
  box-shadow: none;
  padding: 0px;
  image-rendering: pixelated;
  background-attachment: fixed;

	}

	#main {
/*
* Created with https://www.css-gradient.com
* Gradient link: https://www.css-gradient.com/?c1=03024a&c2=02267e&gt=l&gd=dbr
*/
background: #03024A;
background: linear-gradient(135deg, #03024A, #02267E);
		height: fit-content;
		max-width:700px;
		margin:auto;
		margin-top:50px;
		padding:15px;
	}
	.flex {
		display:flex;

	}
	.left {
		height:250px;

		width:50%;
	}
	.right {
		display:flex;
		min-width:350px;
		width:350px;

	}
	#menu {
		background-image: url(img/menu.png);
		height:auto;
		width:260px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: right;
		cursor: pointer;
		image-rendering: auto;

	}
	#sim {
		background-color: #000029;
		width:100%;
		padding:15px;

	}
	.namething {

		padding:10px;
		  display: flex;
  justify-content: center;
  align-items: center;

	}
	#name {
		margin-right:80px;
	}

	#me {
background: #5C5E8C;
background: linear-gradient(180deg, #5C5E8C, #080C44);
height:100%;
border: 1.5px solid #7677a3;
border-radius: 7px;
padding-bottom:3px;
	}
	#sally {
		background-image: url(img/sally.png);
		width:100%;
		height:100%;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		image-rendering:initial;
		cursor:grab
	}
	#input-textarea-1 {
		width:100%;
	}
	.textthing {
		  border: 0;
  border-radius: 9px;
  background-color: #000029;
  font-size: 13px;
  height: 27px;
  padding: 4px 9px;
  color: white;
  width:200px;
  box-shadow:
    /* Top Left */
    0 0 1px 3px rgb(0, 0, 48),
    /* Bottom Right */
    0 0 1px 4px rgb(0, 0, 74),
    3px 2px 1px 1px rgba(255, 255, 255, 1),
    2px 2px 1px 1px rgba(255, 255, 255, 1),
    /* Inside */
    inset -1px -1px 1px 4px rgba(0, 0, 48, 0.9),
    inset 3px 0 1px 1px rgba(255, 255, 255, 0.1),
    inset 1px 2px 1px 1px rgba(255, 255, 255, 0.8);
	
	}
button.skew::before {

	z-index: -1;
	height:55px;
	  left: -10.732px;
	  top:-15px;
	border-radius: 23px;
	  transform: skew(-32deg);



}
button {
	z-index: 1;
}
#btns {
	padding:13px;
	padding-top:24px

}
#current {
	height:200px;
	width:200px;
	margin:auto;
	  background-color: #000029;

}
b {
	color: #0afcfb;
}
 ul{
	margin-left:-20px;
}
 li {
	margin-bottom:10px;
	list-style-type:"⬧ ";
}
#input-textarea-1 {
	  border: 0;
  border-radius: 9px;
  background-color: #000029;
  margin-bottom:5px;
  font-size: 13px;
  padding: 4px 9px;
  color: white;
height:110px;
  box-shadow:
    /* Top Left */
    0 0 1px 3px rgb(0, 0, 48),
    /* Bottom Right */
    0 0 1px 4px rgb(0, 0, 74),
    3px 2px 1px 1px rgba(255, 255, 255, 1),
    2px 2px 1px 1px rgba(255, 255, 255, 1),
    /* Inside */
    inset -1px -1px 1px 4px rgba(0, 0, 48, 0.9),
    inset 3px 0 1px 1px rgba(255, 255, 255, 0.1),
    inset 1px 2px 1px 1px rgba(255, 255, 255, 0.8);
	overflow-y: scroll;;
}
.tabcontent {
	display:none;
}
#fart {
	height:fit-content;
	margin-bottom:15px;
	
}
.flex2 {
	display:flex;
	flex-direction: row;
	  justify-content: space-around;
	  margin-top:10px;


}
.left2 {

	height:400px;




}
#games {
	overflow-y: scroll;
	  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
  overflow-x: hidden;
  image-rendering: auto;


}
#games img {
	height:100px;
	width:70px;
	margin:5px;
	transition: 0.2s ease;
	box-shadow: -3px 0px 5px rgb(0, 0, 0);
	display:block;
	border: 1px solid white
}
#games img:hover {
	transform:scale(120%)
}

#fart li {
	list-style-type:"";
	margin-left: -20px;
}
#scroll {
	overflow-y: scroll;
}
#fanlistings {
	display:grid;
	overflow-y: scroll; 
	 grid-template-columns: repeat(auto-fill, 50px);
	 grid-gap: 3px;
	
}
#fanlistings img{
	transition: 0.2s ease;
}
#fanlistings img:hover {
	transform:scale(120%)
}
#stamps img:hover {
	transform:scale(120%)
}

  @media only screen and (max-width: 600px) {
                   .left, .right {
					width:100%;

				   }
				   .right {
					order:1;
					min-height:400px;
					margin-bottom:15px;

				   }
				   .left {
					order:2;
				   }
				   .flex {
					flex-direction: column;
				   }
				   #name {
					margin:0px
				   }
				   #menu {
							min-width:220px;
		
				   }
				   #current {

	width:100%;


}
                   .left2, .right2 {
					width:100%;

				   }
				   #fart, #scroll, #games, #stamps, #fanlistings {
					width:100%
				   }


				   .flex2 {
					flex-direction: column;
				   }
				   .center {
					margin-bottom:10px;
				   }

            }
			     footer {
        font-weight: bold;
                /* background color for footer */
                width: 100%;
                height: 40px;
                padding: 10px;
                text-align: center;
                margin-top:10px;
                text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;/* color of song title */

                /* this centers the footer text */
            }
			#stamps {
				height:150px; 
				overflow-x: hidden;
				display:grid;
				  grid-template-columns: repeat(auto-fill, 82px);
				 

			}
			#stamps img {
				width:80px;
				height:44.8px;
				transition: 0.2s ease;
			}
			






