@font-face {
    font-family: "coolAwesomeFont";
    src:url("https://codehs.com/uploads/9143f732d25f60ab8bbb3871179c23ec") format('truetype');
}
div h1, h2, p{
    font-family: "coolAwesomeFont";
    font-weight: 100;
    color: white;
}
p {
    font-size: 25px;
}
div h1:first-letter, h2:first-letter, p:first-letter {
    font-size: 2em;
}
div {
    margin-left: 15%;
    margin-right: 15%;
}
a {
    transition: font-size 1s;
}
a:hover {
    font-size: 1.5em;
}
img {
    filter: grayscale(50%);
    border: groove;
    border-width: 5px;
    height: 50%;
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
body {
    background-color: black;
    text-align: center;
}
#spin {
    animation: funnyspin 2s forwards;
}
#scary {
    animation: scaryfade 10s forwards;
}
#slide {
    animation: slide 2s forwards;
}

/*Animations*/

@keyframes scaryfade {
    from {
        display: none;
        filter: grayscale(100%) brightness(0%);
    }
    to {
        display: block;
        filter: grayscale(80%) brightness(80%);
    }
}

@keyframes funnyspin {
    from {
        transform: rotate(359deg) translateX(200%);
        opacity: 0;
    }
    to {
        transform: rotate(0deg) translateX(0%);
        opacity: 100%;
    }
    
}
@keyframes slide {
    from {
        transform: translateX(-200%);
    }
    to {
        transform: translateX(0%);
    }
}