body {
	padding:0;
	margin:0; 
	background-color:#3a3a3a; 
	font-size: larger;
}

.rotleft{
	transform: rotate(-0.5deg);
}

#id{
	
}

.rotright{
	transform: rotate(0.5deg);
}

.ctext{
	text-align: center;
}

.chunks{
	max-width:100vw;
	width: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #0d0d0d;
	background-size: auto;
	background-repeat: repeat;
	background-image: url("../img/dithered-clouds.png")
}

.chunk{
	font-family: 'Courier New', monospace;
	font-weight:400;
	/* margin-left:20px;
	margin-right:40px; */
	max-width:70vw;
	margin-top: 20px;
	margin-bottom: 20px;
	padding-left: 30px; 
	padding-right: 30px;
	padding-top: 10px;
	padding-bottom: 30px;
	width: auto; 
	background-color:#0d0d0d;
	border-width: 7px; 
	border-color: white;
	color: #ddd
}

#websiteheader{
	font-family:Georgia, 'Times New Roman', Times, serif;
	font-style: italic;
	background-size: cover;
    background-repeat: repeat;
    background-position: center center;   
	font-size: 3em;
	color: rgb(255, 153, 0);
	text-shadow: 2px 2px 5px black;
}

.bannercontainer{
	position:absolute;
	height:350px;
	width: 100%;
	padding: 0;
	margin: 0;
	mix-blend-mode:difference;
	overflow: hidden;
}

.daffbanner {
	position:absolute; 
	top:0px; 
	left:0px;
	padding: 0;
	margin: 0;
	white-space: nowrap;
	animation: bannermove 100s linear infinite;
  }
  
  .daffbanner img {    
	margin: 0;
	padding: 0;
	width:100%;
	mix-blend-mode: inherit;
	margin: 0 0.5em 
  }
  
  @keyframes bannermove {
	0% {
		transform: translate(-50%, 0);
	}
	100% {
		transform: translate(0, 0);
	}
  }
/* OLD STUFF */

@keyframes backforth {
	0%  {transform: rotate(0deg);}
	25%  {transform: rotate(-2deg);}
	75%  {transform: rotate(2deg);}
	100%  {transform: rotate(0deg);}
}

.dance{
	animation:backforth 2s ease-in-out infinite;
}

.boxdropshadow{
	box-shadow: 0.5vw 1vw 1vw rgba(0, 0, 0, 0.5);
}

.boxinnershadow{
	box-shadow: inset 0.5vw 1vw 1vw rgba(0, 0, 0, 0.5);
}

.shadow{
	filter: drop-shadow(10px 10px 10px black);
}

.gradientbg{
	margin: 0;
	width: 100%;
	height:	100vh;
	background: linear-gradient(to bottom, rgb(0,0,0),rgb(255,255,255));
	background-attachment: fixed;
}

.homebtn{
	display: block;
	height: 0;
	width: 0;
}

.plaque{
	background-color: pink;
	text-align : center;	
	margin: 0 auto;
	color : rgb(255,100,100);
	border-top-style: inset;
	border-right-style: inset;
	border-bottom-style: inset;
	border-left-style: inset;
	border-width: 1vw;
	border-color: rgb(170,170,255);
	vertical-align: middle;
}

.sectionbutton{
	font-style: bold;
	line-height: 2em;
	display: inline;
}

.selectup{
	transition: all 0.5s ease;
}

.selectup:hover{
	transform: scale(1.2) rotate(17deg) translate(-1vw, -5vh);
}

.select{
	transform: translate(0,1vh);
	transition: all 0.5s ease;
}

.select:hover{
	transform: scale(1.2) translate(0, -1vw);
}

.stricken{
	font-size:8vw;
	color:red;
	text-shadow: 2px 2px 15px black;
}

#welcome{
	text-align : center;	
	color : rgb(255,100,100);
	width: 100%;
	text-shadow: 2px 2px 15px black;
	left: 50%;
	background-image: url("../img/clouds.jpg");
	background-size: cover;
    background-repeat:no-repeat;
    background-position: center center;   
	position: absolute;
  	top: 10vh; 
	font-style: italic;
	font-size: 9vw;
  	transform: translate(-50%,0%);
  	height: 30%;
}

#sections{
	text-align : center;
	left: 50%;
	transform: translate(-50%,0%);
	background-image: url("../img/grass.jpg");
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
	border-color: rgb(255,100,100);
	background-color: rgb(50,50,180);
	margin: 0 auto;
	vertical-align: middle;
	
	font-size: 5vh;
	position: absolute;
	margin: 0 auto;
	width: 100%;
	height: 30%; 
	top: 55vh;
}

#bgdiv{
	height: 100vh;
    background-repeat: repeat;
}