body {
  background-image: url('1.jpg');
  color: black;
  font-family: Verdana;
}

#container {
  margin: 0 auto;
  max-width: 1000px;
  padding: 5px;
  width: 1000px;
  position: relative;
}

.box-center {
	color: black;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	background-image: url('Border-Noheader.png');
	background-repeat: no-repeat;
	margin: 0px;
	height: 1500px;
	text-align: center;
}

#title {
	top: 196px;
	left: 368px;
	position: absolute;
	width: 26%;
}

.toolbar {
	font-family: "Times New Roman", Times, serif;
	top: 297px;
	left: 449px;
	position: absolute;
}

a {
  color: black;
  text-decoration: none;
}

#main {
  flex: 1;
  width: 600px;
  height: 800px;
  margin: 0 auto;
  z-index: 1;
  position: relative;
  padding: 100px;
  order: 2;
  overflow: visible;
}

#frame1 {
	left: 114px;
	top: 380px;
	width: 23%;
	overflow: visible;
	position: absolute;
}

#frame1:hover {
	transform: rotate(-2deg);
}

#frame2 {
	left: 169px;
	top: 692px;
	width: 29%;
	overflow: visible;
	position: absolute;
}

#frame2:hover {
	transform: rotate(-2deg);

}
#frame3 {
	left: 321px;
	top: 386px;
	width: 22%;
	overflow: visible;
	position: absolute;
}

#frame3:hover {
	transform: rotate(2deg);

}

#frame4 {
	left: 294px;
	top: 486px;
	width: 27%;
	overflow: visible;
	position: absolute;
}

#frame4:hover {
	transform: rotate(-2deg);
} 

#frame5 {
	left: 437px;
	top: 684px;
	width: 30%;
	overflow: visible;
	position: absolute;
}

#frame5:hover {
	transform: rotate(1deg);
} 

#frame6 {
	left: 382px;
	top: 828px;
	width: 42%;
	overflow: visible;
	position: absolute;
}

#frame6:hover {
	transform: rotate(-2deg);
} 

#frame7 {
	left: 89px;
	top: 601px;
	width: 20%;
	overflow: visible;
	position: absolute;
}

#frame7:hover {
	transform: rotate(2deg);
} 

#frame8 {
	left: 515px;
	top: 397px;
	width: 20%;
	overflow: visible;
	position: absolute;
}

#frame8:hover {
	transform: rotate(-2deg);
} 

#midnight {
	left: 73px;
	top: 881px;
	width: 13%;
	overflow: visible;
	position: absolute;
	animation-name: midnight-hover;
	animation-play-state: paused;
}

#midnight:hover {
	transform: translateY(-2px);
}

@keyframes cat-blinking {
  0%   {opacity: 0;}
  32%   {opacity: 0;}
  33%   {opacity: 1;}
  65%   {opacity: 1;}
  66%   {opacity: 0;}
  100%   {opacity: 0;}
}

#cat-bat {
	left: 621px;
	top: 338px;
	width: 13%;
	overflow: visible;
	position: absolute;
}

#cat-bat-closed {
	left: 621px;
	top: 338px;
	width: 13%;
	overflow: visible;
	position: absolute;
	opacity: 0;
	animation-name: cat-blinking;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}

#footer {
	top: 1140px;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
}

.buttons {
	width: 1000px;
}