body {
		height: 100vh;
		background-image: url('https://farm5.staticflickr.com/4023/4229820086_091e1a5cbd_b.jpg');
		background-size: auto 100%; /* do not stretch, that looks ugly, height is full */
		animation: zoomIn 20s infinite; /* activate zoom animation, forwards keeps the style when done, infinite means it repeats*/
		/*It tesselates when it is to wide, I left that in intentionally*/
	}

	@keyframes zoomIn {
		0% {
			background-position: 60% 33%; /* place to zoom to */
		}
		50% {
			background-size: auto 800%; /* zoom in to 8x*/
			background-position: 60% 33%; /* place to zoom to */
		}
		100% {
			background-position: 60% 33%; /* place to zoom to, reset to 1x zoom */
		}
	}

	/*I noticed that this footer was present on all of the examples, and I wanted to see if I could hide it */
	codecraft-web-project-footer {
    display: none !important;
}


	#mySummer{
		margin-left:auto;
		margin-right:auto;
		margin-top:8px;
		height:240px;
		width:500px;
		z-index:999;
		background-color:#cdb549;
		opacity:.75;
		padding:10px;
		font-family:monospace;
		font-size:64px;
		
	}

	
	#banner{
		width:778px;
		padding:2px;
		margin-right:auto;
		margin-left:auto;
        margin: top 10px; /*I have not noticed a difference even with */
		background-color:#3239ff;
		opacity:.85;
		font-size:75px;
		font-family:monospace;
		color:#000000;
		z-index:999;
	}
	
	/* #myPic{
		position:fixed;
		top:0px;
		left:0px;
		height:100%;
		width:100%;
		z-index:-999;
	} */
	
	#credits{
		position:fixed;
		bottom:10px;
		font-family: monospace;
		font-size:12px;
		color:#000;
		z-index:999;
		background-color:#fff;
		opacity:.75;
	}
	
	a{
		font-family:monospace;
		font-size:12px;
		color:#000;
	}