img {max-width:100%;}

html,
body{
height:100%;
min-height:100%;
}

body {
  padding: 0;
  margin: 0;
  display: flex;
  background-image: url("Media/SiteBackground.png");
  cursor: url("Media/cursor.png"), auto;
  background-color: #1A2113;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-position: center; /* Center the image */
  background-size: cover;
}

#secondBody {
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.back-video {
  position: fixed;
  z-index: -1;
  width: 1920px;
  height: 1080px;
  bottom: 0;
  left: 0;
  
}


#headerContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: center;
  padding: 25px;
  margin 20px;
  
}

#myself {
  max-width: 350px;
  max-height: 350px;
}


.gradientBlock,
#guestbook,
#footer,
#confirmBox,
#header,
#youtubeMusicLink,
#blog,
#myself,
#spotifyEmbed iframe,
#headerDetails {
  padding: 10px;
  color: #fffb00;
	background-color: rgba(0, 0, 0, 0);
	background-position-x: 0%;
	background-position-y: 0%;
	background-repeat: repeat;
	background-attachment: scroll;
	background-image: linear-gradient(rgb(190, 190, 190) 0px, rgb(119, 119, 119) 3%, rgb(35, 35, 35) 55%, rgb(0, 0, 0) 55%, rgb(22, 22, 22) 98%, rgb(0, 0, 0) 100%);
	background-size: auto;
	background-origin: padding-box;
	background-clip: border-box;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
	border-left-width: 1;
	border-left-style: solid;
	border-left-color: rgb(75, 75, 75);
	border-right-width: 1;
	border-right-style: solid;
	border-right-color: rgb(75, 75, 75);
	border-bottom-width: 1;
	border-bottom-style: solid;
	border-bottom-color: rgb(0, 0, 0);
	padding-top: 2;
	padding-right: 5;
	padding-bottom: 4;
	padding-left: 5;
	align-items: center;
	justify-content: center;
	font-weight: 400;
	font-family: "segoe ui", tahoma, geneva, verdana, sans-serif, arial, helvetica, sans-serif;
	position: relative;
	actualwidth: 723;
	actualheight: 24;
}

#aeroRing {
  background-image: url(Media/backgroundMove.gif);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  padding: 10px;
}

#aero-ring a {
  color: #FFF;
  padding: 5px;
  border: 1px solid black;
  border-radius: 15px;
  background-color: rgba(0, 50, 32, 0.7);
}


#headerCeption {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

#chocolateBarCollection {
  align-self: center;
}


div#mainBody div#headerCeption div.window.active div.window-body.has-space {
  background: black;
}


#chocolateBarExplain {
  width: 300px;
  display: block;
}




#chocolateBar {
  min-width: 100px;
  height: 150px;
  margin: 3px;
  cursor: url("Media/cursorGrab.png"), auto;
}

#chocoToggleBar {
  align-self: center;
  display: flex;
}

#Switchbars {
  cursor: url("Media/cursorGrab.png"), auto;
}


#header {
}

#headerDetails {
  width: 400px;
}



#coverAndTrackList {
	flex-wrap: wrap;	
	display: flex;
	justify-content: center;
	align-items: center;
}

#firstAlbumCover .albumCover {
	flex: 1;
}


#spriteOnList {
  align-self: center;
}

#tracklist .tracks li {
	list-style-type: none;
	margin: 2.5px;
 color: #fffb00;
	background-color: rgba(0, 0, 0, 0);
	background-position-x: 0%;
	background-position-y: 0%;
	background-repeat: repeat;
	background-attachment: scroll;
	background-image: linear-gradient(rgb(190, 190, 190) 0px, rgb(119, 119, 119) 3%, rgb(35, 35, 35) 55%, rgb(0, 0, 0) 55%, rgb(22, 22, 22) 98%, rgb(0, 0, 0) 100%);
	background-size: auto;
	background-origin: padding-box;
	background-clip: border-box;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
	border-left-width: 1;
	border-left-style: solid;
	border-left-color: rgb(75, 75, 75);
	border-right-width: 1;
	border-right-style: solid;
	border-right-color: rgb(75, 75, 75);
	border-bottom-width: 1;
	border-bottom-style: solid;
	border-bottom-color: rgb(0, 0, 0);
	padding-top: 2;
	padding-right: 5;
	padding-bottom: 4;
	padding-left: 5;
	max-width: 970px;
	font-weight: 400;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif, Arial, Helvetica, sans-serif;
	font-size: 25px;
	actualWidth: 723;
	actualHeight: 24;
}


.tracks {
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
   padding: 0px 0px 0px 0px;
}

#links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

}

#visitCount {
	width: 100%;
	height: 100%;
}

#twoMusicThings {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1REM;
  align-items: center;
}




#musicBarGif {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  flex-wrap: wrap;
  margin: 50px;

}

/*haiii!!!! how was your day!! :DDD*/

#betweenMusicAndMusic {
  height: 100px;
  display: flex;
  align-items: center;
  font-size: 50px;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  padding: 35px;
  margin: 25px;
  flex-direction: column;
  margin-bottom: 200px;
}

#bandCampEmbed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px;
  margin: 25px;
}

#bigGallery {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 50px;

}

html body div#secondBody div#mainBody div#wlftunnelContainer div.window.active div.window-body.has-space {
  display: flex;
  flex-direction: column;
  gap: 50px;

}



#wlfgrltunnel {
  width: 960px;
  height: 540px;
  align-self: center;
}

[data-tab-content] {
  display: none;
}

.active[data-tab-content] {
  display: block;
}

#tabSwitcher {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  flex-wrap: wrap;
  left: 0;
  z-index: 2;
  display: flex;
  min-width: 1200x;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  min-height: 60px;
  list-style-type: none;
  background-image: url("Media/GreenGradient.png");
  flex: 1;
}


.tabThing {
  color: white;
  position: relative;
  top: 0px;
  margin: 10px;
  text-align: center;
  font-size: 25px;
  background-image: url("Media/BlueGradient.png");
  width: 250px;
  height: 35px;
  cursor: url("Media/cursorGrab.png"), auto;
  font-family: Inter, Helvetica Neue, Arial, sans-serif;
  transition: top 0.06s;
}

.tabThing.largerButton {
  height: 60px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-origin: content-box;
}

.clicked {
  position: relative;
  top: 5px;

}

#wlfVimeo {
  width: 1200px;
  height: 520px;
}

.greenWindow {
   --w7-w-bg: #6bc94f;
}

.blueWindow {
  --w7-w-bg: #1711C7;

}

#reporpContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#reporpChild {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 35px;
}








#spotifyEmbed {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
   flex-wrap: wrap;

}

#spotifyEmbed iframe {
	margin 10px;
}

#leftBar,
#rightBar {
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 3rem;
  height: 100%;
  position: relative;
  flex: 1;
  align-self: stretch;
 
}

#rightBar {
  min-width: 100px;
  width: 100px;
}

#leftBar {
  min-width: 200px;
  width: 100px;
}



#footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#bigbuddy {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#confirmBox {
  padding: 45px;
}


#buttons {
  flex-wrap: wrap;
  padding: 10px;
  margin: 15px;
  display: flex;
  justify-content: center;;
  align-items: center;
  gap: 50px;
}

#blog button,
#guestbook button {
  cursor: url("Media/cursorGrab.png"), auto;
}
html body div#secondBody div#mainBody div#coverAndTrackList div#tracklist.gradientBlock ul.tracks li,
span,
#rainbowColor {
  /*background: linear-gradient(
        90deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
    */
    background-image: url("Media/backgroundMove.gif");
    background-clip: text;
    color: transparent;
  }

html body div#secondBody div#mainBodyContainer div#reporp.active div#reporpContainer div#reporpChild div#tracklist.gradientBlock {
  background-image: url(Media/backgroundMove.gif);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}