@import url('https://fonts.googleapis.com/css2?family=Cabin+Sketch&display=swap');

:root {
    --c1: rgb(120, 0, 0);
    --c2: rgb(255, 255, 255);   
    --c3: rgb(24, 117, 24);

    --load-time: 0.5s;
}

body {
    background-color: var(--c1);
    color: var(--c2);
    font-family: 'Cabin Sketch', sans-serif;
    animation: load var(--load-time) ease-in;
}

.header {
    font-size: 2.3rem;
}

.widget {
    background-color: var(--c3);
    box-shadow: rgba(255, 215, 0, 0.5) 0 0 60px 20px;
    animation: swing 2s infinite alternate;
}

.tag {
    animation: swirl var(--load-time);
}


@keyframes load {
    0%{
        transform: scale(1.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes swing {
    0%{
        transform: rotate(7deg);
    }
    100% {
        transform: rotate(-7deg);
    }
}

@keyframes swirl {
    0%{
        transform: rotate(-1440deg);
    }
    100% {
        transform: rotate(0deg);
    }
}