@font-face {
    font-family: "FiraSans";
    src: url("fonts/FiraSans-Regular.ttf");
}

@keyframes linear-animation {
    from {
        background: linear-gradient(0deg, #e66465, #9198e5);
    }

    to {
        background: linear-gradient(12deg, #8a181a, 20%, #4751c5);
    }
}


:root {
    width: 100%;
    height: 100%;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    > .box {
        width: 60vw;
        height: 60vh;
    }
}

text {
    font-family: "FiraSans";
    font-size: 20px;

    height: 60px;
}

.bottom-text {
    position: absolute;
    width: 100%;
    bottom: 10px;

    height: 30px;
    text-align: center;
}

.linear-gradient {
    background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
}

.linear-animation {
    /*background-color: black;*/
    animation: 2s ease-in-out infinite alternate linear-animation;
}

.radial-gradient {
    background-image: radial-gradient(
            in hsl,
            red,
            blue
    );
}


.radial-gradient-longer {
    background-image: radial-gradient(
            in hsl longer hue,
            red,
            blue
    );
}


.conic-gradient {
    background: conic-gradient(
            red 6deg,
            orange 6deg 18deg,
            yellow 18deg 45deg,
            green 45deg 110deg,
            blue 110deg 200deg,
            purple 200deg
    );
}