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

@font-face {
    font-family: 'Bad Comic';
    src: url('BadComic.woff2') format('woff2'),
        url('BadComic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* 320 scale size*/
.frame {
  background: url('background5-320.jpg');
	width: 320px;
	height: 533px;
	margin: 0px auto;
	position: relative;
}

/* Add a black background color to the top navigation */
.topnav {
  overflow: hidden;
	margin-left: 0px;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: black;
  text-align: center;
  padding: 8px 8px;
  text-decoration: none;
  font-size: 12px;
	font-family: 'Bad Comic';
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color:lightblue;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4942a7;
  color: white;
}

.header{
	background:url("banner3-320.jpg");
    width:320px;
    height:90px;
	position: absolute;
	top: 30px;
	left:0px;
}
#Dori{
	background: url("dori-320.gif");
	width: 108px;
	height: 100px;
	    -webkit-transform: scale(.6);
    transform: scale(.6); 
 	position: absolute;	
	top:140px;
	left:150px;
	 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Dori:hover {
    background-image: url('doriwithname.gif'); /* Change on hover */
	}

#Luna{
	background: url("luna-320.png");
	width: 187px;
	height: 261px;
    -webkit-transform: scale(.4);
    transform: scale(.4); 
	position: absolute;	
	top:180px;
	left:0px;
	 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Luna:hover {
    background-image: url('lunawithname.png'); /* Change on hover */
	}

#Faith{
	background: url("faith-320.png");
	width: 271px;
	height: 299px;
     -webkit-transform: scale(.3);
    transform: scale(.3); 
	position: absolute;	
	top:170px;
	left:70px;
 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Faith:hover {
    background-image: url('faithwithname.png'); /* Change on hover */
	}

#Herc{
		background: url("hercules-320.png");
	width: 187px;
	height: 204px;
    -webkit-transform: scale(.3);
    transform: scale(.3); 
	position: absolute;	
	top:110px;
	left:15px;	
 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Herc:hover {
    background-image: url('hercwithname.png'); /* Change on hover */
	}

#Lucki{
		background: url("lucki-320.gif");
	width: 306px;
	height: 306px;
   -webkit-transform: scale(.4);
    transform: scale(.4); 
	position: absolute;	
	top:300px;
	left:-40px;	
 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Lucki:hover {
    background-image: url('luckiwithname.gif'); /* Change on hover */
	}

#Leonard{
		background: url("leonard-320.png");
	width: 325px;
	height: 503px;
   -webkit-transform: scale(.2);
    transform: scale(.2); 
	position: absolute;	
	top:235px;
	left:110px;	
 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Leonard:hover {
    background-image: url('leowithname.png'); /* Change on hover */
	}

#Rook{
		background: url("rook.gif");
	width: 565px;
	height: 603px;
   -webkit-transform: scale(.15);
    transform: scale(.15); 
	position: absolute;	
	top:120px;
	left:-70px;
	
background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Rook:hover {
    background-image: url('rookwithname.gif'); /* Change on hover */
	}

.game{
	background: url("stargame-320.png");
	width: 175px;
	height: 182px;
	 -webkit-transform: scale(.5);
    transform: scale(.5); 
	position: absolute;	
	top:60px;
	left:160px;	
}

/* Small devices (phones, 480px and up) */
@media screen and (min-width: 480px){
 
.frame {
  background: url('background5-480.jpg');
	width: 480px;
	height: 800px;
}	
	
/* Add a black background color to the top navigation */
.topnav {
	margin-left: 40px;
}

/* Style the links inside the navigation bar */
.topnav a {
  padding: 8px 8px;
  font-size: 16px;
}	
	
.header{
	background:url("banner3-480.jpg");
    width:480px;
    height:135px;
	top: 30px;
	left:0px;
}	
	
#Dori{
	background: url("dori-320.gif");
   -webkit-transform: scale(.8);
    transform: scale(.8); 
	position: absolute;	
	top: 200px;
	left: 280px;
	 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Dori:hover {
    background-image: url('doriwithname.gif'); /* Change on hover */
	}
	
#Luna{
	background: url("luna-320.png");
	width: 187px;
	height: 261px;
    -webkit-transform: scale(.5);
    transform: scale(.5); 
	position: absolute;	
	top:240px;
	left:0px;
	 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Luna:hover {
    background-image: url('lunawithname.png'); /* Change on hover */
	}

#Faith{
	background: url("faith-320.png");
	width: 271px;
	height: 299px;
     -webkit-transform: scale(.4);
    transform: scale(.4); 
	position: absolute;	
	top:250px;
	left:120px;
 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Faith:hover {
    background-image: url('faithwithname.png'); /* Change on hover */
	}
	
#Herc{
		background: url("hercules-320.png");
	width: 187px;
	height: 204px;
    -webkit-transform: scale(.5);
    transform: scale(.5); 
	position: absolute;	
	top:230px;
	left:330px;	
	 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Herc:hover {
    background-image: url('hercwithname.png'); /* Change on hover */
	}
	
#Lucki{
		background: url("lucki-320.gif");
	width: 306px;
	height: 306px;
   -webkit-transform: scale(.5);
    transform: scale(.5); 
	position: absolute;	
	top:390px;
	left:-40px;	
 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Lucki:hover {
    background-image: url('luckiwithname.gif'); /* Change on hover */
	}
	
#Leonard{
		background: url("leonard-320.png");
	width: 450px;
	height: 703px;
   -webkit-transform: scale(.2);
    transform: scale(.2); 
	position: absolute;	
	top:300px;
	left:170px;	
 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Leonard:hover {
    background-image: url('leowithname.png'); /* Change on hover */
	}
	
	#Rook{
		background: url("rook.gif");
	width: 565px;
	height: 603px;
   -webkit-transform: scale(.2);
    transform: scale(.2); 
	position: absolute;	
	top:420px;
	left:-70px;
	
background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Rook:hover {
    background-image: url('rookwithname.gif'); /* Change on hover */
	}

.game{
	background: url("stargame-320.png");
	width: 175px;
	height: 182px;
	 -webkit-transform: scale(.5);
    transform: scale(.5); 
	position: absolute;	
	top:120px;
	left:330px;	
}	
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	
.frame {
  background: url('background5-992.jpg');
	width: 992px;
	height: 1653px;
}	
	
/* Add a black background color to the top navigation */
.topnav {
	margin-left: 250px;
}

/* Style the links inside the navigation bar */
.topnav a {
  padding: 8px 14px;
  font-size: 18px;
}	
	
.header{
	background:url("banner3-992.png");
  width:992px;
  height:279px;
	position: absolute;
	top: 30px;
	left:45px;
}	

#Dori{
	background: url("dori.gif");
  -webkit-transform: scale(.4);
  transform: scale(.4); 
	width: 543px;
	height: 503px;
	position: absolute;	
	top: 300px;
	left: 400px;
	 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Dori:hover {
    background-image: url('doriwithname.gif'); /* Change on hover */
	}
	
	#Luna{
	background: url("luna-320.png");
	width: 187px;
	height: 261px;
    -webkit-transform: scale(.9);
    transform: scale(.9); 
	position: absolute;	
	top:640px;
	left:20px;
	 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Luna:hover {
    background-image: url('lunawithname.png'); /* Change on hover */
	}

#Faith{
	background: url("faith-320.png");
	width: 271px;
	height: 299px;
     -webkit-transform: scale(.7);
    transform: scale(.7); 
	position: absolute;	
	top:900px;
	left:150px;
 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Faith:hover {
    background-image: url('faithwithname.png'); /* Change on hover */
	}
	
#Herc{
		background: url("hercules-320.png");
	width: 187px;
	height: 204px;
    -webkit-transform: scale(.8);
    transform: scale(.8); 
	position: absolute;	
	top:680px;
	left:630px;	
 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Herc:hover {
    background-image: url('hercwithname.png'); /* Change on hover */
	}
	
#Lucki{
		background: url("lucki-320.gif");
	width: 306px;
	height: 306px;
   -webkit-transform: scale(.9);
    transform: scale(.9); 
	position: absolute;	
	top:990px;
	left:540px;	
 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Lucki:hover {
    background-image: url('luckiwithname.gif'); /* Change on hover */
	}
	
#Leonard{
		background: url("leonard-320.png");
	width: 425px;
	height: 653px;
   -webkit-transform: scale(.4);
    transform: scale(.4); 
	position: absolute;	
	top:1050px;
	left:240px;	
 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Leonard:hover {
    background-image: url('leowithname.png'); /* Change on hover */
	}
	
		#Rook{
		background: url("rook.gif");
	width: 565px;
	height: 603px;
   -webkit-transform: scale(.3);
    transform: scale(.3); 
	position: absolute;	
	top:420px;
	left:70px;
	background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Rook:hover {
    background-image: url('rookwithname.gif'); /* Change on hover */
	}

.game{
	background: url("stargame-320.png");
	width: 175px;
	height: 182px;
	 -webkit-transform: scale(.7);
    transform: scale(.7); 
	position: absolute;	
	top:320px;
	left:630px;	
}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
   
.frame {
  background: url('background5.png');
	width: 1200px;
	height: 2000px;
}

/* Add a black background color to the top navigation */
.topnav {
	margin-left: 300px;
}

/* Style the links inside the navigation bar */
.topnav a {
  padding: 14px 16px;
  font-size: 17px;
}

.header{
	background:url("banner3.png");
  width:903px;
  height:254px;
	position: absolute;
	top: 40px;
	left:150px;
	
}

#Dori{
	background-image: url("dori.gif");
	width: 543px;
	height: 503px;
    -webkit-transform: scale(.5);
    transform: scale(.5);  
	position: absolute;	
	top:350px;
	left:500px;
	 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Dori:hover {
    background-image: url('doriwithname.gif'); /* Change on hover */
	}
		
#Luna{
	background: url("luna.png");
	width: 1250px;
	height: 1743px;
    -webkit-transform: scale(.15);
    transform: scale(.15);  
	position: absolute;	
	top:250px;
	left:-450px;
	 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Luna:hover {
    background-image: url('lunawithname.png'); /* Change on hover */
	}


#Faith{
	background: url("faith.png");
	width: 542px;
	height: 598px;
    -webkit-transform: scale(.5);
    transform: scale(.5);  
	position: absolute;	
	top:750px;
	left:400px;
 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Faith:hover {
    background-image: url('faithwithname.png'); /* Change on hover */
	}
	
#Herc{
		background: url("hercules.png");
	width: 1253px;
	height: 1365px;
    -webkit-transform: scale(.15);
    transform: scale(.15);  
	position: absolute;	
	top:150px;
	left:-250px;	
 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Herc:hover {
    background-image: url('hercwithname.png'); /* Change on hover */
	}
	
#Lucki{
		background: url("lucki.gif");
	width: 767px;
	height: 766px;
    -webkit-transform: scale(.4);
    transform: scale(.4);  
	position: absolute;	
	top:1050px;
	left:450px;	
 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Lucki:hover {
    background-image: url('luckiwithname.gif'); /* Change on hover */
	}
	
#Leonard{
		background: url("leonard.png");
	width: 450px;
	height: 700px;
    -webkit-transform: scale(.5);
    transform: scale(.5);  
	position: absolute;	
	top:1350px;
	left:250px;	
 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Leonard:hover {
    background-image: url('leowithname.png'); /* Change on hover */
	}
	
		#Rook{
		background: url("rook.gif");
	width: 565px;
	height: 603px;
   -webkit-transform: scale(.4);
    transform: scale(.4); 
	position: absolute;	
	top:1500px;
	left:550px;
	
 background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out;
}
	#Rook:hover {
    background-image: url('rookwithname.gif'); /* Change on hover */
	}

.game{
	background: url("stargame.png");
	width: 2064px;
	height: 2752px;
	 -webkit-transform: scale(.15);
    transform: scale(.15); 
	position: absolute;	
	top:-920px;
	left:-60px;	
}	
	
}