body {
  font-family: Verdana;
  background-repeat: repeat;
  margin: 0;
  padding: 0;
  background-attachment: fixed;
  width: auto;
  height: auto;
  position: relative;
  background: #1b1b1b;
  color: #c8c8c8;
  opacity: 1;
  text-shadow: 0px 0px 6px #0000ff ;
  overflow-x: scroll;
}

bg {animation: bgmove 5s linear infinite;
}
@keyframes bgmove {
  0% {background-position: 0px 0px;}
  100% {background-position: 640px 0px;}

  }

center {
  text-align: center;
  }



.glow {
  font-size: 20px;
  color: #fff;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff0000, 0 0 40px #ffff00, 0 0 50px #00ff00, 0 0 60px #0000ff, 0 0 70px #ff00ff ;
  }
  to {
    text-shadow: 0 0 20px #fff,  0 0 30px #fff, 0 0 40px #ff0000, 0 0 50px #ffff00, 0 0 60px #00ff00, 0 0 70px #0000ff, 0 0 80px #ff00ff ;
  }
}
/*All sidebars go in here.*/  
.sidebar-group {
  position: fixed;
  top: 0;
  margin-top: 25px;
  }


/*Code shared by all window-style boxes. To see what different specific sidebar classes look like, check the demo page.*/
.sidebar, .mini-sidebar, .wide-sidebar, .box {
  background-image: url("img/brick.gif");
  display: relative;
  opacity: 0.68;
  outline-style: outset;
  border: 1px;
  box-shadow: 2px 2px #0D0C13;
  }
  
/*Prevent image overflow.*/
.sidebar img, .mini-sidebar img, .wide-sidebar img, .box img {
  max-width: 100%;
  height:auto; /*Prevent squishing*/
  }
  
.sidebar, .sidebar-box {
  display: inline-block;
  vertical-align: top;
  width: 160px;
  }
  
/*Container for vertical stacks of multiple mini-sidebars*/
.sidebar-box {
  margin-left: 10px;
  }
  
.sidebar {
  width: 160px;
  margin-left: 25px;
  }
  
.mini-sidebar {
  margin-bottom: 25px;
  }
  
.wide-sidebar {
  margin-left: 25px;
  margin-top: 25px;
  width: 340px;
  min-height: 150px;
  }
  
/*Inside/main text of window boxes.*/
.inner {
  padding: 10px;
  padding-bottom: 5px;
  padding-top: 0px;
  }

/*The title bar at the top of window boxes.*/
.title-bar, .box-title-bar {
  font-family: 'VT323', monospace;
  font-size: clamp(.8rem, 2vw, 1.4rem);
  text-align: center;
  color:#D0FF56;
  text-transform: capitalize;
  font-weight: 650;
  box-sizing:border-box;
  background-color:#0a0b18;
  text-shadow:3px #D0FF56;
  background: #02002A;
  border-style: ridge;
  border: 2.5px solid #D6D3E7;
  outline-style: ridge;
  box-shadow: 3px 3px #0D0C13;
  }
  
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	padding: 10em 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.4);
	box-shadow: 2px 2px #0D0C13;
  margin-left: -100px;
  margin-top: -75px;
}


::-webkit-scrollbar-corner {

background-image: url(resources/corner.png);
background-repeat: no-repeat;

background-color: #000AFF;
}


/*The title bar of boxes has slightly more padding, since there's more room to space text.*/
.box-title-bar {
  padding: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  }
  
/*For the symbol in the top right corner.*/
.right {
  float: right;
  margin-right: 5px;
  font-family: "Comic Sans", sans-serif;
  line-height: 12px;
  }
  
/*Round circular image.*/
.icon {
  border: #D6D3E7 solid 2px;
  border-radius: 50%;
  }
  
/*Main body text boxes.*/
.box {
  margin-top: 25px;
  margin-left: 400px;
  width: 455px;
  margin-bottom: 25px;
  }
  
  
/*marquee bar*/
.marqueebar {
  color:#D0FF56;
  font-size: 15px;
  font-weight: bold;
  text-shadow:3px,#7AFF56;
  background: #02002A;
  border-radius: 5px;
  border-style: ridge;
  border: 2.5px solid #D6D3E7;
  outline-style: ridge;
  box-shadow: 3px 3px #0D0C13;
}

.imagemarqueebar {
margin-left: 370px;
border-radius: 1.5px;
background: transparent

}
/*Ramblings UI*/

.content{
    position: absolute;
    top: 120px;
    left: 160px;
    width: 800px;
    margin-left: 90;
    height:500px;
    box-sizing: border-box;
}
.ygopost{
    position: relative;
    height:500px;
    margin-left: 30;
    width: 700px;
    color: #f6f0e9;
    background-image: url('https://www.pngall.com/wp-content/uploads/2016/04/Brain-PNG-Image.png');  opacity: 0.95; 
    background-color: linear-gradient(#0507e9, #0a0a42);
    box-sizing: border-box;
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 8px solid #28ff22;
    box-shadow: 2px 2px #0D0C13;
  }
  .yugiohpost{
    position: relative;
    height:500px;
    margin-left: 30;
    width: 700px;
    color: #f6f0e9;
    background-image: linear-gradient(#0507e9, #0a0a42);    opacity: 0.75; 
    box-sizing: border-box;
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 5px solid #c7c7cb;
    box-shadow: 2px 2px #0D0C13;
  }
.post {
    position: relative;
    margin-left: 50;
    background-image: linear-gradient(#79bf7d, #aadbad);
    width: 715px;
    min-height: 200px;
    padding: 15px;
    margin-top: 20px;
    max-width: 100%;
    margin-bottom: 20px;
    opacity: 0.70; 
    box-sizing: border-box;
    display: inline-block;
    border: 5px solid #007c40;
    box-shadow: 2px 2px #0D0C13;
    border-radius: 5px;
}

.minipost {
  margin-bottom: 25px;
  width: 357.5px;
  margin-left: 50;
  min-height: 200px;
  padding: 15px;
  background-image: linear-gradient(#79bf7d, #aadbad);
  opacity: 0.70; 
  box-sizing: border-box;
  display: inline-block;
  border: 5px solid #007c40;
  box-shadow: 2px 2px #0D0C13;
  }



.big-quote {
  font-size: 32px;
  color: #F4F2FF;
  letter-spacing: 6px;
  word-spacing: 2px;
  font-family: "Garamond", "Bookman", serif;
  position: fixed;
  margin-left: 900px;
  margin-top: 200px;
  top: 0;
  width: 900px;
  }
.overlap {
  background-image: url('snowfall.gif');
  position: fixed;
  top: 0;
  background-size: cover;
  background-position: center;
  height: 100%;
  margin: 6;
}
wide {
  letter-spacing: 16px;
  
  }
  
midwide {
  letter-spacing: 3px;
  }

@-webkit-keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	
	@-webkit-keyframes snowflakes-shake {
		0%,
		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}
		50% {
			-webkit-transform: translateX(80px);
			transform: translateX(80px)
		}
	}
	
	@keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	
	@keyframes snowflakes-shake {
		0%,
		100% {
			transform: translateX(0)
		}
		50% {
			transform: translateX(80px)
		}
	}
	
	.snowflake {
		position: fixed;
		top: -10%;
		z-index: 9999;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-animation-name: snowflakes-fall, snowflakes-shake;
		-webkit-animation-duration: 10s, 3s;
		-webkit-animation-timing-function: linear, ease-in-out;
		-webkit-animation-iteration-count: infinite, infinite;
		-webkit-animation-play-state: running, running;
		animation-name: snowflakes-fall, snowflakes-shake;
		animation-duration: 10s, 3s;
		animation-timing-function: linear, ease-in-out;
		animation-iteration-count: infinite, infinite;
		animation-play-state: running, running
	}
	
	.snowflake:nth-of-type(0) {
		left: 1%;
		-webkit-animation-delay: 0s, 0s;
		animation-delay: 0s, 0s
	}
	
	.snowflake:nth-of-type(1) {
		left: 10%;
		-webkit-animation-delay: 1s, 1s;
		animation-delay: 1s, 1s
	}
	
	.snowflake:nth-of-type(2) {
		left: 20%;
		-webkit-animation-delay: 6s, .5s;
		animation-delay: 6s, .5s
	}
	
	.snowflake:nth-of-type(3) {
		left: 30%;
		-webkit-animation-delay: 4s, 2s;
		animation-delay: 4s, 2s
	}
	
	.snowflake:nth-of-type(4) {
		left: 40%;
		-webkit-animation-delay: 2s, 2s;
		animation-delay: 2s, 2s
	}
	
	.snowflake:nth-of-type(5) {
		left: 50%;
		-webkit-animation-delay: 8s, 3s;
		animation-delay: 8s, 3s
	}
	
	.snowflake:nth-of-type(6) {
		left: 60%;
		-webkit-animation-delay: 6s, 2s;
		animation-delay: 6s, 2s
	}
	
	.snowflake:nth-of-type(7) {
		left: 70%;
		-webkit-animation-delay: 2.5s, 1s;
		animation-delay: 2.5s, 1s
	}
	
	.snowflake:nth-of-type(8) {
		left: 80%;
		-webkit-animation-delay: 1s, 0s;
		animation-delay: 1s, 0s
	}
	
	.snowflake:nth-of-type(9) {
		left: 90%;
		-webkit-animation-delay: 3s, 1.5s;
		animation-delay: 3s, 1.5s
	}
	
	.snowflake:nth-of-type(10) {
		left: 25%;
		-webkit-animation-delay: 2s, 0s;
		animation-delay: 2s, 0s
	}
	
	.snowflake:nth-of-type(11) {
		left: 65%;
		-webkit-animation-delay: 4s, 2.5s;
		animation-delay: 4s, 2.5s
	}
	
.fish{
    z-index: 3;
    left: 0;
    top: 0;
    width: calc(200% + 32px);
    height: calc(100% + 32px);
}
.fishleft {
    animation: scroll-left 20s linear infinite;
    z-index: 3 !important;
}

@keyframes scroll-left {
    0% {
        transform: translateX(1000%);
        opacity: 0;
    }
    50% {
        opacity: 100%;
    }
    100% {
        transform: translateX(-1000%);
        opacity: 0;
    }
}
.fishright {
    animation: scroll-right 20s linear infinite;
    z-index: 3 !important;
}

@keyframes scroll-right {
    0% {
        transform: translateX(-1000%);
        opacity: 0;
    }
    50% {
        opacity: 100%;
    }
    100% {
        transform: translateX(1000%);
        opacity: 0;
    }
}