@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* Graphics
		https://www.tumblr.com/communities/the-neocities-club/post/793237576329871360?source=share
*/

body {
  background-color: #1F2433;
  padding: 0px;
  margin: 0px;
  z-index: -2;
}

#BGOverlay {
	display: inline-block;
 	position: fixed;
	height: 100%;
 	width: 100%;
	z-index: -1;
	background-color: #092780; /*1F2433*/
	background-image: url("https://media3.giphy.com/media/IrGdEDZsaH3Pi/giphy.gif");	
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
	background-blend-mode: multiply;
}

#FavIcon {
	content:url("../Content/Images/blueKangaroo.png")
}

#BGImg {
  /*content:url("../Content/Images/PoolRooms.gif");*/
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

main {
  margin: 0px 25%;
  padding: 0px; 
  background: rgba(236, 132, 58, 0.4);
  background: rgba(18, 31, 80, .93);
}

@media screen and (max-width: 1200px) {
	main {
		margin: 0px;
	}
}

.PreventSelect {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

p, h1, h2, h3, h4, h5, a, li, label, button{
  color: #fc7a00; /*#FF7A32*/
  margin: 0px;
  /*font-family: "Inter", sans-serif; old font*/
  position: relative;
  z-index: 2;
  text-shadow: -.04em -.04em 0 #092563,
				-.04em .04em 0 #092563,
				.04em -.04em 0 #092563,
				.04em .04em 0 #092563;

  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
}

h1, h2, h3, h4, h5 {
	color: #FF7A32;
	text-shadow: -.06em -.06em 0 #092563,
				-.06em .06em 0 #092563,
				.06em -.06em 0 #092563,
				.06em .06em 0 #092563;

	letter-spacing: 2px;
}

ul {
	margin: 0px;
}

header {
	background-color: orange;
	max-height: 300px;
	overflow: clip;
}

header img {
	display: block;
	content:url("../Content/Images/RooWaveBanner2.png");
	pointer-events: none;
	width: 100%;
}

#navbar ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	background-color: #2754C5;
}

#navbar li{
	width: 25%;
}	
	
@media screen and (max-width: 900px) {
	#navbar li{
		width: 33%;
	}	
}
	
#navbar a{
	border-style: hidden solid;
	border-image: linear-gradient(rgba(5, 21, 61, 0), rgb(58 146 255), rgba(5, 21, 61, 0)) 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #1B45AE;
	text-decoration: none;
	padding: 15px;
	text-align: center;
	font-size: 35px;
	font-weight: bold;
	height: 50px;	

	text-shadow: -.06em -.06em 0 #092563,
				-.06em .06em 0 #092563,
				.06em -.06em 0 #092563,
				.06em .06em 0 #092563;
}
		
#navbar a:hover{
	background-color: #1A2C68;
}

.content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 1em;
	padding: 10px;
}


.contentContainer {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 5px;
  position: relative;
}

.contentHeader {
  background-color: #234C98;
  padding: 10px;
  border-radius: 5px 5px 0px 0px;
}

.contentBody {
	background-color: #2C67BE;
	padding: 20px;
	border-radius: 0px 0px 5px 5px;
}

.BoxEffect {
	/*content:url("../Content/Images/WaterTextureAnimated.gif");*/
	background-image: url(https://opengameart.org/sites/default/files/water_128px.gif);
	background-size: 400px;
	background-attachment: fixed;
	width: 100%; 
	position: absolute; 
	mix-blend-mode: overlay;
	opacity: .5;
	overflow: hidden;
	height: 100%;
	border-radius: 5px;
}

.ContentMedium .contentHeader {
	height: 65px;
}

.ContentMedium .contentBody {
	
}

.ContentMedium h2 {
	font-size: 35px;
	font-style: italic;
	font-weight: bold;
	margin-top: 15px;
	/*transform: translateY(40%); it be a good idea to figure out a more adaptive way to move the text down
	maybe turn this to padding eventually*/
}

.ContentMedium, p, li {
	font-size: 20px;
	font-style: none;
	font-weight: bold;
}

.ContentMedium .contentHeader {
	padding-left: 20px;
}

#Censor {
	display: flex;
	position: absolute; 
	z-index: 5;
	justify-content: center;
    align-items: center;
	background-color: black;
	width: 100%;
	height: 100%;
	cursor: pointer;
	transition: .3s ease;
}

#Censor:hover {
	background-color: #0f121f;
}

#Censor p {
	color: red;
	text-shadow: none;
	font-weight: normal;
	font-size: 20px;
}

#Welcome {
	width: 100%;
}

#Welcome .contentHeader {
	padding-left: 40px;
	height: 90px;
}

#Welcome h2{
	font-size: 48px;
	font-style: italic;
	font-weight: bold;
	margin-top: 20px;
	/*transform: translateY(35%);*/
}

#Welcome p{
	font-size: 24px;
	font-style: none;
	font-weight: bold;
}

@media screen and (max-width: 450px) {
	#Welcome .contentHeader {
		padding-left: 20px;
		height: 120px;
	}
}

@media screen and (max-width: 450px) {
	#Welcome h2{
		font-size: 42px;
		margin-top: 15px;
	}
}

#AboutOwner {
	/* width: 54%; */
	flex: 1 1 54%;
}

#SiteUpdates {
	/* width: 44%; */
	flex: 1 1 44%;
}

#SiteUpdates li {
	margin-bottom: .5em;
}

.scrollBody{
	overflow: hidden;
	overflow-y: auto;
	height: 100%;
	scrollbar-color: rgba(0, 0, 0, 40%);
}

#ChatFrame::-webkit-scrollbar, #ButtonScroll::-webkit-scrollbar, .scrollBody::-webkit-scrollbar {
	width: 10px;
}

#ChatFrame::-webkit-scrollbar-track, #ButtonScroll::-webkit-scrollbar-track, .scrollBody::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 40%);
	border-radius: 5px;
}

#ChatFrame::-webkit-scrollbar-thumb, #ButtonScroll::-webkit-scrollbar-thumb, .scrollBody::-webkit-scrollbar-thumb {
	background: #61A3F9;
	border-radius: 5px;
}

#SiteUpdates li{
	padding-bottom: .5em;
}

.HClampMid .contentBody {
	height: 200px;
}

#SideContainer {
	display: flex;
	flex-wrap: wrap;
    flex-direction: row;
	align-content: space-between;
    justify-content: space-around;
    align-items: center;
	flex: 1 1 200px;
	gap: 1em;
}

#Buttons {
	width: 100%;
	max-width: 200px;
}

#Buttons .contentBody {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px 5px;
}

#Buttons .contentBody img {
	image-rendering: pixelated;
}

#Buttons a {
	text-decoration: none;
	display: contents;
}

#Buttons img {
	margin-bottom: 5px;
}

#Buttons img{
	cursor: pointer;
	transition: .3s ease
}

#Buttons img:hover {
	transform: scale(.9)
}

#ButtonText {
	margin-bottom: 10px;
	font-size: 15px;
}

#ButtonHint {
	font-size: 9px;
	margin-bottom: 5px;
}

#separatorV {
	height: 4px;
	width: 100%;
	background-image: linear-gradient(90deg, rgba(26, 45, 108, 0) 0%, rgba(26, 45, 108, 100) 35%, rgba(26, 45, 108, 100) 65%, rgba(26, 45, 108, 0) 100%);
	margin-bottom: 5px;
}

#ButtonScroll {
	display:flex;
	flex-direction: column;
    justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 100%/*155px*/;
	max-height: 160px;
	overflow: auto;
	scrollbar-color: rgba(0, 0, 0, 40%);
	margin: 0px 5px;
}

#ButtonScroll img{
	width: 88px;
}

#Webring {
	max-width: 300px;	
}

.HeaderMedSmall h2 {
	font-size: 30px;
	font-style: italic;
	font-weight: bold;
}

#footer {
	display: flex;
	height: 100px;
	background-color: #1B45AE;
	padding: 0px 1em; 
	justify-content: space-between;
}

.OtherSites {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

@media screen and (max-width: 1300px){
	.OtherSites {
	width: 60%;
	}
}

#footer h2 {
	font-size: 25px;
}

#footer img {
	height: 30px;
	padding: 0px .2em;
}

.IconHolder a {
	text-decoration: none;
}

#creationDate {
	padding-top: 10px;
	font-size: 15px;
	text-align: right;
}

@media screen and (max-width: 1300px){
	#creationDate {
	width: 55%;
	}
}

/*GALLERY*/

.GallerySpacing {
	flex: 1 1 49%;
	transition: .1s ease;
}

.GallerySpacing:hover {
	filter: brightness(75%);
	transform: scale(.98);
}

.GallerySpacing a{
	text-decoration: none;
}

.GalleryThumbnail {
	overflow: hidden;
	max-height: 350px;
	height: 350px;
	width: 100%;
	object-fit: cover;
	position: relative;
	z-index: 2;

	border-width: 10px;
	border-style: solid;
	border-radius: 10px;
	border-color: #234C98;
	background-color: #1e47a093;
}

.GallerySpacing .contentBody {
	overflow: hidden;
	display: flex;
}

/*Show more button here and stuff for sub gallery pages*/

.Fill{
	flex: 1 1 100%;
}

/*small issue here with apple devices they stretch images because
of the flex container for whatever reason so we need to find a fix
to that*/

.SubGalleryItems {
	/*display: flex;*/
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.ShowButton {
	display: inline-block;
	background-color: #FF7A32;
	border-radius: 5px;
	color: white;
	font-size: 22px;
	cursor: pointer;
	padding: 8px 20px;
	margin: 5px;
}

/*.ShowButton:hover {
	filter: brightness(75%);
	transform: scale(.98);
}*/

.roundAllCorners {
	border-radius: 10px;
}

.HiddenContent {
	display: none;
}

.contentBody.active .HiddenContent{
	display: inline;
}
/*I think i came up with a solution to the video sizing its kind of out there but...
basically we create a 1920/1080 img could be anything even furry porn and
use that as the containing element for the youtube video then place the
youtube video inside of it and have it scale 100% width and height as well
as making its positioning absolue (maybe relative idk) and then hopfully that
would force the video to be big*/
.youtubeVideo {
	width: 100%;
	aspect-ratio: 16/9;
	margin-bottom: 15px;
}

.ArtContent {
	margin-bottom: 15px;
	width: 100%;
	height: 100%;
}

.ArtContentHalf {
	width: 49%;
	margin-bottom: 15px;
}

.GalleryContentSize {
	flex: 1 1 49%;
}

@media screen and (max-width: 900px) {
	.GalleryContentSize {
		flex: 1 1 100%;
	}
}

.OrganizeArt {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

/*prevents ugly rescaling for pixel art*/
.PixelArt {
	image-rendering: pixelated;
}

.Column {
	flex: 1 1 49%;
}

/*@media screen and (max-width: 800px) {
	.Column {
		width: 100%;
	}
}*/

.Column .contentContainer {
	margin-bottom: .9em;
}

.FanartContent {
	width: 90%;
	position: relative;
	/*box-shadow: 2px 5px 5px #222942;*/
}

.Pin {
	position: absolute;
	bottom: 94%;
	width: 20px;
	height: 20px;
	background-color: red;
	color: red;
	border-radius: 100%;
	z-index: 2;
}

.PinShine {
	position: absolute;
	left: 50%;
    top: 15%;
	width: 5px;
	height: 5px;
	background-color: white;
	color: white;
	border-radius: 100%;
	z-index: 2;
	 -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}

.FanartInfo {
	display: none;
	flex-direction: column;
	align-content: space-around;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 90%;
	height: 100%;
	object-fit: cover;
	background-color: rgba(10, 17, 38, 80%);
	z-index: 1;
}

.SubGalleryItems.active .FanartInfo {
	display: flex;
}

.FanartInfo p, .FanartInfo a {
	 font-size: 25px;
	 font-weight: normal;
	 color: #83DAFF;
	 user-select: none;
 }
 
.FanartContent:hover, .FanartInfo:hover {
	 cursor: pointer;
 }
.ArtistLinks {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .3em;
}

.ArtistLinks img {
	 width: 30px;
 }
 
.AddGap {
	margin-bottom: 2em;
}

/* FULLSCREEN FUCTIONALITY */

.Fullscreen {
	width: 100%; 
	height: 100%; 
	padding: 1% 0px; 
	background-color: rgba(3, 8, 37, 0.904); 
	position: fixed; 
	z-index: 100; 
	box-sizing: border-box;
}
/* need to make image verticle align and fit container on mobile better*/
.FullHolder {
	width: 100%; 
	height: 100%;  
	text-align: center;
}

.FullExit {
	width: 3em; 
	position: absolute; 
	cursor: pointer;
}

.FullArt {
	height: 100%;
}

/* TOPICS */

.TopicWidth {
	width: 100%;
	margin: 0px 5%
}

.MainTopic {
	background-color: #234C98;
	margin: 0px;
}

.MainTopic h2 {
	margin: 0px;
	padding: 10px;
}

.SubCatagories {
	border: 3px solid #204c9f;
}

.Topic:hover {
	filter: brightness(60%);
}

/*.Topic * div {
	padding: 8px 10px;
}*/

.TopicContent p {
	font-size: 18px;
}

.SubCatagories {
	background-color: #2C67BE;
}
	
.SubCatagories a {
	text-decoration: none;
}	

.TopicHeader {
	background-color: #2265e3;
	padding: 8px 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .2em;
}

.TopicHeader h2 {
	font-size: 22px;
    font-style: normal;
    font-weight: 500;
	margin: 0px;
}


.TopicHeader h2, .TopicHeader h3 {
	letter-spacing: 1px; /*font specific*/
	/*may or may not need to remove this later if you decide to change font*/
}


.TopicDate {
	font-size: 16px;
	color: #d3430a;
}

.TopicContent {
	background-color: #397fff;
	padding: 8px 5px;
	display: flex;
	align-items: center;
}

.TopicContent p {
	padding: 10px;
}

.TopicImage {	
	display: block;
	width: 75px;
	max-height: 100%;
}

/*.SubCatagories>div:nth-of-type(even) {
	background: #3c89fb;
}*/

/* Fun Stuff */

.GayText {
	background: linear-gradient(
		to left,
		violet,
		indigo,
		blue,
		green,
		yellow,
		orange,
		red
	);
	
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: anim 2s linear infinite;
	text-shadow: 0px 0px 0 #09256300;
	background-size: 400px, 100%;
}

@keyframes anim{
	to{
		background-position-x: 400px;
	}
}