body {
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: start;
  image-rendering: pixelated;
  font-family: 'pixelSans';

}
@keyframes infinite-shift-left {
  0% {
    background-position-x: -50000px;
    background-position-y: 50000px;
  }
  100% {
    background-position: 0;
  }
}
@font-face {
font-family: 'pixelSans';
src: url('pixelSans.ttf');

}
.middleContent { 	
      gap: 16px; /* consistent space between widgets */
  padding: 16px; 
  width: 1000px;
  height: 1200px;
 display: flex;
 flex-direction: column; 
top: 0;
order: 1;
min-height: 100vh; /* ensure it can fill the screen */
}

.tilesSmall {
height: 150px;
}
.tilesBig {
width: 700px;
}
.tilesBig, .tilesSmall {
background-color: rgba(50, 50, 175, 1);
border: 2px outset rgba(50, 50, 175, 1);
padding: 10px;
}
.hero-img {
background: transparent url(pattern3.png) repeat-x 50% 0;
background-repeat: repeat;
animation: infinite-shift-left 2500s linear;

}


#tab-home {
display: block;

}


.content {
color: white;

}
#links {
height: 100%;
width: 600px;
flex-direction: row;
justify-content: end;
position: relative;
}

.tab {
margin-left: 215px;
bottom: 0;	
position: absolute;
width: 600px;
height: 50px;
border: none;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: transparent; 
font-family: pixelSans;
font-size: 25px;
color: white;
border: none;
}
.tab button:hover {
color: lightgrey;
cursor: pointer;
}

/* Create an active/current tablink class */
.tabButtonAractive {


}

/* Style the tab content */
.tabcontent {
width: 100%;
height: 100%;
background-color: rgba(50, 50, 175, 1);
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
  border-top: none;

}

.snootIMG {
width: 220px;
height: auto;
}

.logo {
width: 200px;
height: auto;
rotate: 10deg;
}

.logoGroup {


}

#topBar {
background-image: url(snootpieTopbar.png);
display: flex;
top: 0;
order: 1;
width: 100%;
height: 200px; 
overflow: hidden;
position: relative;
}

.shadow {
filter: drop-shadow(8px 5px 0px rgba(35, 30, 39, 0.5));

}



.marquee {

  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  animation: marquee 20s linear infinite;
}



.scroller {
  position: absolute;
  width: 400px;
  height: 100px;
  overflow: hidden;
}



@keyframes scroll {
	to {
	transform: translate(-100%);

	}

}

@keyframes marquee {
  0% { transform: translateX(35%); }
  100% { transform: translateX(-100%); }
}
.chat {
position: absolute;

}
#chat {
order: 2;
position: relative;
width: 200px;
height: 600px;
background-color: rgba(50, 50, 175, 1);
border: 3px outset black;
}
#musicPlayer {
order: 3;
position: relative;
right: 0;
width: 200px;
height: 200px;
background-color: rgba(50, 50, 175, 1);
bottom: 1;

}


#mainContent {
flex: 1;
background-color: rgba(50, 50, 175, 1);
overflow: hidden;
}

.flex-break {
flex-basis: 100%;
height: 0;
}

.flex-wrapper {
justify-content: center;
display: flex;
justify-content: center;

}

.content-row {
display: flex;
flex-direction: row;
gap: 16px;
height: 500px;
order: 2;
}

.left-column {
display: flex;
flex-direction: column;
width: 200px;
gap: 16px;
}
.iBorder {
border-style: outset;
border-width: 3px;
border-color: midnightblue;
}
.clicked {
text-decoration: underline solid orange 3px;
}
.artImage {
max-width: 200px;
object-fit: cover;
object-position: center;

}
.artImage:hover {
border: 2px solid orange;
cursor: pointer;

}
.textBox {
/*border: 1px solid white;*/

color: white;
padding: 15px;
margin: 15px;
}

#footer {
display: flex;
flex-direction: row;
  order: 5;	
  width: 1000px;
  height: 200px; 
  gap: 16px;
overflow: hidden;
}

#webrings {
display: flex;
justify-content: center;
order: 1;
width: 492px;
height: 200px;
position: absolute;
left: 0;
background-color: rgba(50, 50, 175, 1);
overflow: hidden;
}
#images {
width: 492px;
flex: 1;
order: 2;
height: 200px;
position: absolute; 
right: 0;
background-color: rgba(50, 50, 175, 1);
overflow: hidden;
}
.icons  {
display: flex;
flex-direction: row;
margin-bottom: 50px;

}

.icons img {
width: 30px;
height: auto;

}
.icons img:hover {
border-color: white;
border-style: solid;
border-width: 1px;
width: 29px;
height: auto;
}

.simpleSlides {
width: 170px;
height: 120px;
border: 2px solid orange;

}
#randomGifs {
align-content: center;
width: 200px;
height: 200px;
position: absolute;
right: 0;
}
.tv {
z-index: 1000;
width: 180px;
height: auto;
position: absolute;
right: 0;
pointer-events: none;
}

.slides {
	object-fit: cover;
object-position: center;
	width: 170px;
	height: 120px;
	max-height: 120px;
}

.animate-left {
	position: relative;
	animation: animateleft 0.8s
}

@keyframes animateleft { 
	from { left :0; opacity:0 } 
	to { left:0; opacity:1 }
}
.title {
margin-top: 20px;
margin-bottom: 20px;
color: white;
font-size: 30px;
font-family: pixelSans;
text-shadow: 0.2px 0.2px 10px white, 0.2px 0.2px 10px white;
}
.titleSlim {
margin-top: 20px;
color: orange;
font-family: pixelSans;
font-size: 20px;

}
.titleMiddle {
font-size: 20px;
}
#furryring {
position: absolute;

}
summary {
font-size: 20px;
cursor: pointer;
}
#bucket-webring {
width: 500px;
position: absolute;
bottom: 0;

}


.rainbow{
		animation: rainbow 2.5s linear;
		animation-iteration-count: infinite;
}
@keyframes rainbow{
		100%,0%{
			color: rgb(255,0,0);
		}
		8%{
			color: rgb(255,127,0);
		}
		16%{
			color: rgb(255,255,0);
		}
		25%{
			color: rgb(127,255,0);
		}
		33%{
			color: rgb(0,255,0);
		}
		41%{
			color: rgb(0,255,127);
		}
		50%{
			color: rgb(0,255,255);
		}
		58%{
			color: rgb(0,127,255);
		}
		66%{
			color: rgb(0,0,255);
		}
		75%{
			color: rgb(127,0,255);
		}
		83%{
			color: rgb(255,0,255);
		}
		91%{
			color: rgb(255,0,127);
		}
	}


.snootBanner {
text-align: center; 
position: absolute;
}

#banners {
background-color: rgba(50, 50, 175, 1);
width: 968px; 
order: 6;
align-content: center;
text-align: center;
padding: 16px;
}
a {
color: lightblue;
}

summary::-webkit-details-marker {
  margin-right: 0.5em; /* Add spacing between arrow and text */
}

.linkBanner {
position: absolute;
border: 1px solid white;
color: white;
margin: 30px;
padding: 15px;
filter: drop-shadow(5px 5px 0px rgba(35, 30, 39, 0.5));
transition: 0.5s;
}
.linkBanner:hover {
cursor: pointer;
filter: drop-shadow(5px 15px 0px rgba(35, 30, 39, 0.5));
margin-top: -5px;
transition: 0.5s;
}

.slimBox {
background-color: rgba(50, 50, 175, 1);
color: white;

}
.openable {
transition: 0.25s;
}
.openable:hover {
filter: drop-shadow(0 0 0.25rem white);
transition: 0.25s;
cursor: pointer;
}

.border {
border: 3px solid orange;

}

/*
 Blog stuff
  */
#blogListElement {
margin: 15px;
gap: 15px;
display: flex;
flex-direction: column;
}
.blogElement {
padding: 5px;
width: 400px;
border: 2px outset midnightblue;
background-color: midnightblue;
}

/* Interests List */

#interestsList {
display: flex;
flex-direction: column;
max-width: 500px;
}

#themeSwitcherElement {
min-width: 30px;
min-height: 30px;
padding: 5px;
gap: 5px;

}
#themeSwitcherElement img {
width: 30px;
height: auto;
}

.interestsList details -> .secondColor
#interestsList details {

padding: 7px;
margin: 5px;
}
#tab-home div {
margin: 10px;
color: white;

}