@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Nova+Square&family=Quicksand&display=swap');



*{
	padding: 0;
	margin: 0;
}
html{
	overflow-x: hidden;
}
body{
	font-size:17px;
	font-color: #dbad3c;
	line-height: 1.7;
	font-family: "Quicksand";
	background: #000000 url("../img/pattern.png");
	
}
section{
	padding: 50px 0;
}

footer{
	padding: 30px 0;
	text-align: center;
	font-family:'Quicksand';
	color: #dbad3c; 

}
p {
	color:#dddbdb;
	
}


h1 {
	font-family:'Nova Square';
	font-size: 90px;
}

h2 {
	font-family:'Nova Square';
	font-size: 60px;
	color: #dbad3c;
}

h3 {
	font-family:'Nova Square';
	font-size: 100px;
	color: #dbad3c;

}

h4 {
	font-family:'Nova Square';
	font-size: 30px;
	color: whitesmoke; 
	
}
h5, h6{
	font-family:'Nova Square';
	font-size: 50px;
	color: #dbad3c;
	text-shadow: whitesmoke; 

}

h7{
	font-family:'Nova Square';
	font-size: 35px;
	color: #dbad3c;
	
}
/* End: Three Columns / Boxes Centred in a row */

	.brand{
		float: left;
	}

h8 {
font-family:'Nova Square';
	font-size: 25px;
	color: #dbad3c;
		
}

.bodylinks{color:yellow; text-decoration:none;}

.bodylinks:hover{color:gray;}

h9 {
	font-family:'Nova Square';
	font-size: 35px;
	color: #dddbdb;}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
	width: 120px;

}

 .biography{
        padding:5px;
	 	padding-bottom: 35px;
        background:#F2C84B;
		background: url("../img/batmanbg1.png") no-repeat;

    }

/* Use where you want the page to be fixed width centred of browser width */
.container{
	margin: 0 auto;
	width:1000px;
	
}
.floatright   {
    float: right;
}
/*Start - 2 column Layout */
.col-left, .col-right{
	width: 25%;	
}
.fltleft{
	float: left;
}
.fltright{
	right: 110px;
	position: relative;
	float: right;
}
.img-fluid{
	max-width: 100%;
	height: auto;
}
.clear{
	clear: both; /* Fixes a bug when floating */
}
/*End - 2 column Layout */

.bg1{
	background: #000000;/*  background colours */
;/*  background colours */
}
.bg2{
	background: #000000; /*  background colours */	
}

/* Start: Three Columns / Boxes Centred in a row */
.boxes, .circles{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	
}
.circle1 {
	width: 300px;
	height: 300px;
	border: 5px solid black;
	border-color: #dbad3c;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
	margin-right: 20px;
	margin-bottom: 20px;
}
.box1 {
	width: 1000px;
	height: 250px;
	border: 5px solid black;
	margin-right: 20px;
	margin-bottom: 20px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border-color: #DBAD3C;

}
.box2 {
	width: 300px;
	height: 300px;
	border: 5px solid black;
	margin-right: 20px;
	margin-bottom: 20px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border-color: #dbad3c;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
	
	
}

.box3{
	width: 1000px;
	height: 150px;
	border: 5px solid black;
	margin-right: 20px;
	margin-bottom: 20px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border-color: #DBAD3C;
}

.box4{
    width: 260;
    height: 360;
    border: 5px;
    margin-left: 980px;
    margin-right: 980px;
}

hr{
	border:none;
	border-bottom:1px #DBAD3C solid;
}

.characters h2 {
	text-align: center;
}

.masthead {
	background: #e4745;
	
}
.masthead p{
	text-align: center;
}

.circle1, .circle2 {
  position: relative;
	top: 10px;
  width: 300px;
}

.image {
  display: block;
  width: 300px;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #DBAD3C;
border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;	
}

.circle1:hover .overlay {
  opacity: 1;
}


.text {
  color: white;
  font-size: 50px;
	font-family: 'andesregular';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}


/* End: Three Columns / Boxes Centred in a row */


nav{
		float: inherit;
		padding-top: 5px;
		padding-bottom: 5px;
		text-align: center;
		
		

	}
	nav li{
		display: inline-block;
		padding-right: 50px;
		font-family: 'Nova Square';
		font-size: 35px;
		color: #DBAD3C;	
		text-align: center;
	
	
		
	
	}
	nav li a{
		text-decoration: none;
		color: #DBAD3C;
		

	}
	nav li a:hover{
		color: #838886;
	}

	nav li:last-child{padding-right:0;
}


h2{
	transition:margin-left 1s ease;
	margin-left: 0;

}


h2:hover{
	margin-left: 80px;
}

h3{
	transition:margin-left 1s ease;
	margin-left: 0;
}


h3:hover{
	margin-left: 80px;
}

h8:hover{
	color: #838886;
	margin-left: auto;
	
}

h9:hover{
	color: #838886;
	transition:margin-left 1s ease; 
}

body {
    margin-left: auto;
    margin-right: auto;
}


.leftpic {

}
.descright   {
    width: 475px;
    float: right;
}
.storylinetext {
    width: 525px;
    float: left;
    text-align: left;
}
.descleft {
    width: 450px;
    float: left;
    text-align: left;
}
.descright
{
	
}