html {
 width: 100%;

}

body {

 width: 100%;
 background-color: black;
 }
 
 .titlebar{
	color: white;
 }
 
 .titletext{
	text-align: center;
 }
 
.polaroidslider{
	display: block;
	width: 100%;

}

.polaroidcontainer{
	display: block;
	width: 66%;
	margin-left: 17%;
	
	}
	
.polaroidbuttonbar{
	width: 66%;
	margin-left: 17%;
	display: grid;
	grid-template-columns: 35% 30% 35%;
}



.backbuttoncontainer{
	display: block;
	width:100%;
	}

.backbuttoncontainer:hover{
	content: url("/assets/backover.jpg");
}

.backbuttoncontainer:active{
	content: url("/assets/backpress.jpg");
}

.nextbuttoncontainer{
	display: block;
	width:100%;
	}

.nextbuttoncontainer:hover{
	content: url("/assets/nextover.jpg");
}

.nextbuttoncontainer:active{
	content: url("/assets/nextpress.jpg");
}

.polaroidcounter{
	text-align: center;
	color: white;
}