@font-face {
    font-family: "comic_sans_ms";
url("./resources/comicSansMS.woff2") format("woff2"),
url("./resources/comicSansMS.woff") format("woff"),
url("./resources/comicSansMS.ttf") format("truetype"),
}

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    margin: -60px 0 0 -60px;
    cursor: pointer;
}

:root {
    --color1: rgb(55, 173, 194);
    --color2: rgb(255 235 59);
    --color3: rgb(245 17 0);
}

.halo3 {
    box-shadow: var(--color1) 0px 0px 60px 30px,
    var(--color2) 0px 0px 100px 60px,
    var(--color3) 0px 0px 140px 90px;
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes rotate {
    to {
        --angle: 360deg;
    }
}

.marcoPolo {
    border: 8px solid;
    border-image: linear-gradient(var(--angle),
    rgb(55, 173, 194),
    rgb(255 235 59),
    rgb(245 17 0)
    ) 1;
    animation: 3s rotate linear infinite;
}

.spin {
    animation: spin 4s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

html {
    overflow: hidden;
    background-size: cover;
    background-image: url("./resources/collage.jpg");
}

.rainbow-text {
    font-size: 150px;
    font-family: "comic_sans_ms";
    background-image: linear-gradient(
            to left,
            blue,
            yellow,
            violet,
            red,
            indigo,
            white,
            green,
            violet,
            orange,
            black
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}