@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'Crowsink';
    src: url('Crowsink-lxgl5.woff2') format('woff2'),
        url('Crowsink-lxgl5.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
	
	body {
	background:blue;
	font-family: 'Crowsink';
	color: #a9095f;
	
}
.PicOne{
	position: absolute;
	top:200px;
	left:400px;
	color: #095ca9;
	background: url(PicOne.png);
	width:213px;
		height:320px;
	text-indent: -9999px;
	-webkit-transition: 1s;
        transition: 1s;
}


.PicFour{
	position: absolute;
	top:160px;
	left:460px;
	color: #5f09a9;
	background: url(PicTen.png);
	width:300px;
		height:400px;
	scale: 85%;
	text-indent: -9999px;
	-webkit-transition: 1s;
        transition: 1s;
}

.glaad{
	position: absolute;
	top:410px;
	left:70px;
	color: purple;
		text-shadow: 2px 1px 2px blueviolet;
				-webkit-transition: 2s;
        transition: 2s;
}

.glaad:hover{
    background-size: cover;
    -webkit-transform: scale(1.25);
    transform: scale(1.25); 
}

.hrc{
	position: absolute;
	top:460px;
	left:70px;
	color: purple;
	text-shadow: 2px 1px 2px blueviolet;
				-webkit-transition: 2s;
        transition: 2s;
}

.hrc:hover{
    background-size: cover;
    -webkit-transform: scale(1.25);
    transform: scale(1.25); 
}

.nj{
	position: absolute;
	top:510px;
	left:70px;
	color: purple;
	text-shadow: 2px 1px 2px blueviolet;
			-webkit-transition: 2s;
        transition: 2s;
}

.nj:hover{
    background-size: cover;
    -webkit-transform: scale(1.25);
    transform: scale(1.25); 
}

.Home{
	position: absolute;
	top:590px;
	left:530px;
	color: #095ca9;
		-webkit-transition: 2s;
        transition: 2s;
	        -webkit-animation-delay: 2s;
        animation-delay: 2s;
}

.Home:hover{
    background-size: cover;
    -webkit-transform: scale(1.25);
    transform: scale(1.25); 
}

.Back{
	position: absolute;
	top:590px;
	left:30px;
	color: #095ca9;
		-webkit-transition: 2s;
        transition: 2s;
	        -webkit-animation-delay: 2s;
        animation-delay: 2s;
}

.Back:hover{
    background-size: cover;
    -webkit-transform: scale(1.25);
    transform: scale(1.25); 
}

.frame{
	position: relative;
	background: yellow url("EOSblank.png");
	width:800px;
	height:640px;
	margin:0px auto;
}
a{
	text-decoration: none;
	text-shadow: 2px 1px 2px grey;
	opacity: 0;
        -webkit-animation: fadeIn 1s; /* Chrome, Safari, Opera */
        animation: fadeIn 1s;
        -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	    animation-fill-mode:forwards;
}
	
	/* Chrome, Safari, Opera */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* Standard syntax */
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
} 

h1{
	font-size: 80px;
	 -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
  transform: rotate(0deg);
	opacity: 1;
	text-shadow: 1px 2px 3px lightblue;
	position:absolute;
top:0px;
	left:130px;
	opacity: 0;
        -webkit-animation: fadeIn 2s; /* Chrome, Safari, Opera */
        animation: fadeIn 2s;
        -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	    animation-fill-mode:forwards;
}

h2{
	font-size: 20px;
	 -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
  transform: rotate(0deg);
	opacity: 1;
	text-shadow: 1px 2px 3px lightblue;
	position:absolute;
top:150px;
	left:30px;
	width: 700px;
	opacity: 0;
        -webkit-animation: fadeIn 2s; /* Chrome, Safari, Opera */
        animation: fadeIn 2s;
        -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	    animation-fill-mode:forwards;
}

p{
	font-size: 30px;
}