@font-face {
    font-family: 'emoji';
    src: url('./emoji.ttf') format('truetype');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow: hidden;
    font-family: 'Comic Sans MS', cursive, 'emoji', sans-serif;
    position: relative;
    height: 100vh;
    background-image: url(./background.png);
    background-position: center;
}

img {
    position: absolute;
    top: 10%;
    height: 75%;
    filter: drop-shadow(5px 0 0 black) 
    drop-shadow(0 5px 0 black)
    drop-shadow(-5px 0 0 black) 
    drop-shadow(0 -5px 0 black);
}

img:first-of-type {
    left: 0;
}

img:last-of-type {
    right: 0;
    transform: scaleX(-1);
}

h1 {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    font-size: 64px;
    color: black;
    -webkit-text-fill-color: white;
    -webkit-text-stroke: 3px;
}

.rainbow {
    background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet, red);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
            background-clip: text;
    background-size: 200%;
    animation: emphasisScroll 1s linear infinite;
}

@keyframes emphasisScroll {
    from {
        background-position: 0% center;
    }
    to {
        background-position: -200% center;
    }
}