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

@font-face{
    font-family: 'Quadrangle';
    src: url('https://users.rowan.edu/~cantwe86/explorationofself/Quadrangle.woff2') format('woff2'),
        url('https://users.rowan.edu/~cantwe86/explorationofself/Quadrangle.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
	background: black;
	font-family: 'Quadrangle';
	color: white;
	font-size: 24px;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

p1 {
	font-family: impact;
	position: relative;
	color: white;
	font-size: 30px;
	text-shadow: 5px 4px 7px black;
-webkit-transform: rotate(0deg); /*Chrome, Safari, Opera */
transform: rotate(0deg);
position: absolute;
top: 1275px;
left: 400px;
opacity: 0;
-webkit-animation: fadeIn 4s; /* Chrome, Safari, Opera */
animation: fadeIn 4s;
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-fill-mode: forwards; 	   
animation-fill-mode: forwards;
}

h1 {
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	position: absolute;
	color: white;
	font-size: 48px;
}

h1 {
display: block;
-webkit-transform: rotate(0deg); /*Chrome, Safari, Opera */
transform: rotate(0deg);
position: absolute;
top: 690px;
left: 470px;
opacity: 0;
-webkit-animation: fadeIn 5s; /* Chrome, Safari, Opera */
        animation: fadeIn 5s;
        -webkit-animation-delay: 6s;
        animation-delay: 6s;
        -webkit-animation-fill-mode: forwards; 
	    animation-fill-mode: forwards;
}

.frame {
	background-image: image("newfor2021.jpg");
	position: relative;
  width: 350px;
	height: 40px;
	margin: 0px auto;
}

.illustration {
	background: white url("newfor2021.jpg"); 
	width: 685px;
	height: 900px;
	margin: 0px auto;	
}