@charset "UTF-8";
/* CSS Document */
/* Add a black background color to the top navigation */
@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('background3-320.png');
	width: 320px;
	height: 267px;
	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;
}

a {
  color: white;
  font-family: 'Bad Comic'; 
  text-decoration: none;
}


.dori-image {
  background: url("dorireal.png");
  width: 300px;
  height: 300px;
  -webkit-transform: scale(.2);
    transform: scale(.2); 
  position: absolute;
  top: 25px;
  left: 125px;
}
.faith-image {
  background: url("faithreal.png");
  width: 300px;
  height: 300px;
  -webkit-transform: scale(.2);
    transform: scale(.2); 
  position: absolute;
  top: 25px;
  left:50px;
}
.luna-image {
  background: url("lunareal.png");
  width: 300px;
  height: 300px;
   -webkit-transform: scale(.2);
    transform: scale(.2); 
  position: absolute;
  top: 25px;
  left: -100px;
}
.hercules-image {
  background: url("hercreal.png");
  width: 300px;
  height: 300px;
    -webkit-transform: scale(.2);
    transform: scale(.2); 
  position: absolute;
  top: 25px;
  left: -25px;
}
.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0; /* Hidden by default */
  transition: opacity 0.3s ease;
}

.text-overlay:hover {
  opacity: 1; /* Show on hover */
}
.text {
  font-family: 'Bad Comic';
	color: white;
	font-size: 10px;
  position: absolute;
  top: 120px;
  left: 10px;
}


/* Small devices (phones, 480px and up) */
@media screen and (min-width: 480px){
	.frame {
  background: url('background3-480.png');
	width: 480px;
	height: 401px;
	margin: 0px auto;
	position: relative;
}

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

/* 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-480.jpg");
    width:480px;
    height:135px;
	position: absolute;
	top: 35px;
	left:0px;
}
a {
  color: white;
  font-family: 'Bad Comic'; 
  text-decoration: none;
}


.dori-image {
  background: url("dorireal.png");
  width: 300px;
  height: 300px;
    -webkit-transform: scale(.35);
    transform: scale(.35); 
  position: absolute;
  top: 90px;
  left: 30px;
}
.faith-image {
  background: url("faithreal.png");
  width: 300px;
  height: 300px;  -webkit-transform: scale(.35);
    transform: scale(.35); 
  position: absolute;
  top: 90px;
  left: 150px;
}
.luna-image {
  background: url("lunareal.png");
  width: 300px;
  height: 300px;  -webkit-transform: scale(.35);
    transform: scale(.35); 
  position: absolute;
  top: 90px;
  left: -90px;
}
.hercules-image {
  background: url("hercreal.png");
  width: 300px;
  height: 300px;  -webkit-transform: scale(.35);
    transform: scale(.35); 
  position: absolute;
  top:90px;
  left: 270px;
}
.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0; /* Hidden by default */
  transition: opacity 0.3s ease;
}

.text-overlay:hover {
  opacity: 1; /* Show on hover */
}
.text {
  font-family: 'Bad Comic';
	color: black;
	font-size: 12px;
  position: absolute;
  top: 170px;
  left: 10px;
}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	.frame {
  background: url('background3-992.png');
	width: 992px;
	height: 829px;
	margin: 0px auto;
	position: relative;
}
/* Add a black background color to the top navigation */
.topnav {
  overflow: hidden;
	margin-left: 270px;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: black;
  text-align: center;
  padding: 8px 8px;
  text-decoration: none;
  font-size: 19px;
	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-992.png");
    width:992px;
    height:279px;
	position: absolute;
	left:0px;
}

a {
  color: white;
  font-family: 'Bad Comic'; 
  text-decoration: none;
}


.dori-image {
  background: url("dorireal.png");
  width: 300px;
  height: 300px;
  -webkit-transform: scale(.7);
    transform: scale(.7); 
  position: absolute;
  top: 350px;
  left: 230px;
}
.faith-image {
  background: url("faithreal.png");
  width: 300px;
  height: 300px;
  -webkit-transform: scale(.7);
    transform: scale(.7); 
  position: absolute;
  top: 350px;
  left: 460px;
}
.luna-image {
  background: url("lunareal.png");
  width: 300px;
  height: 300px;
  -webkit-transform: scale(.7);
    transform: scale(.7); 
  position: absolute;
  top: 350px;
  left: 1px;
}
.hercules-image {
  background: url("hercreal.png");
  width: 300px;
  height: 300px;
  -webkit-transform: scale(.7);
    transform: scale(.7); 
  position: absolute;
  top: 350px;
  left: 690px;
}
.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0; /* Hidden by default */
  transition: opacity 0.3s ease;
}

.text-overlay:hover {
  opacity: 1; /* Show on hover */
}
.text {
  font-family: 'Bad Comic';
	color: black;
	font-size: 20px;
  position: absolute;
  top: 310px;
  left: 130px;
}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.frame {
  background: url('background3.jpg');
	width: 1200px;
	height: 1000px;
	margin: 0px auto;
	position: relative;
}
/* Add a black background color to the top navigation */
.topnav {
  overflow: hidden;
	margin-left: 350px;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: black;
  text-align: center;
  padding: 8px 8px;
  text-decoration: none;
  font-size: 20px;
	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.png");
    width:903px;
    height:254px;
	position: absolute;
	left:150px;
}

a {
  color: white;
  font-family: 'Bad Comic'; 
  text-decoration: none;
}


.dori-image {
  background: url("dorireal.png");
  width: 300px;
  height: 300px;
  -webkit-transform: scale(1);
    transform: scale(1); 
  position: absolute;
  top: 350px;
  left: 450px;
}
.faith-image {
  background: url("faithreal.png");
  width: 300px;
  height: 300px;
  -webkit-transform: scale(1);
    transform: scale(1); 
  position: absolute;
  top: 350px;
  left: 800px;
}
.luna-image {
  background: url("lunareal.png");
  width: 300px;
  height: 300px;
   -webkit-transform: scale(1);
    transform: scale(1); 
  position: absolute;
  top: 350px;
  left: 100px;
}
.hercules-image {
  background: url("hercreal.png");
  width: 300px;
  height: 300px;
   -webkit-transform: scale(1);
    transform: scale(1); 
  position: absolute;
  top: 690px;
  left: 100px;
}
.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0; /* Hidden by default */
  transition: opacity 0.3s ease;
}

.text-overlay:hover {
  opacity: 1; /* Show on hover */
}
.text {
  font-family: 'Bad Comic';
	font-color: black;
	font-size: 20px;
  position: absolute;
  top: 310px;
  left: 170px;
}
}