@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;
	
}
.zerothree{
	position: absolute;
	top:30px;
	left:230px;
	color: #095ca9;
		-webkit-transition: 2s;
        transition: 2s;
}

.zerothree:hover{
    background-size: cover;
    -webkit-transform: scale(2);
    transform: scale(2); 
}

.ten{
	position: absolute;
	top:280px;
	left:130px;
	color: #5f09a9;
		-webkit-transition: 2s;
        transition: 2s;
}

.ten:hover{
    background-size: cover;
    -webkit-transform: scale(2);
    transform: scale(2); 
}

.fifteen{
	position: absolute;
	top:170px;
	left:410px;
	color: #7a09a9;
		-webkit-transition: 2s;
        transition: 2s;
}

.fifteen:hover{
    background-size: cover;
    -webkit-transform: scale(2);
    transform: scale(2); 
}

.twenty{
	position: absolute;
	top:430px;
	left:330px;
	color: #9c09a9;
		-webkit-transition: 2s;
        transition: 2s;
}

.twenty:hover{
    background-size: cover;
    -webkit-transform: scale(2);
    transform: scale(2); 
}

.twentythree{
	position: absolute;
	top:340px;
	left:630px;
	color: #b72a9e;
		-webkit-transition: 2s;
        transition: 2s;
}

.twentythree:hover{
    background-size: cover;
    -webkit-transform: scale(2);
    transform: scale(2); 
}

.twentyfive{
	position: absolute;
	top:590px;
	left:540px;
	color: #d83ebd;
		-webkit-transition: 2s;
        transition: 2s;
}

.twentyfive:hover{
    background-size: cover;
    -webkit-transform: scale(2);
    transform: scale(2); 
}


.frame{
	position: relative;
	background: yellow url("EOShome2.png");
	width:800px;
	height:640px;
	margin:0px auto;
}
a{
	text-decoration: none;
	text-shadow: 2px 1px 2px grey;
	opacity: 0;
        -webkit-animation: fadeIn 2s; /* Chrome, Safari, Opera */
        animation: fadeIn 2s;
        -webkit-animation-delay: 3s;
        animation-delay: 3s;
        -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: 70px;
	 -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
  transform: rotate(0deg);
	opacity: 1;
	text-shadow: 1px 2px 3px lightblue;
	position:absolute;
top:0px;
	left:370px;
	opacity: 0;
        -webkit-animation: fadeIn 2s; /* Chrome, Safari, Opera */
        animation: fadeIn 2s;
        -webkit-animation-delay: 1s;
        animation-delay: 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;
}

p{
	font-size: 30px;
}