:root {
    --dark: #1d1d1d;
    --color1: lightyellow;
    --color2: lightblue;
    --color3: lightseagreen;
    --color4: lightcoral;
    --color5: lightgoldenrodyellow;
    --color6: violet;
}

@font-face {
    font-family: 'glossy_sheenshine';
    src: url('assets/fonts/glossysheenshine.woff2') format('woff2'),
        url('assets/fonts/glossysheenshine.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cashrole';
    src: url('assets/fonts/cashrole.woff2') format('woff2'),
        url('assets/fonts/cashrole.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.fixed,
.flash {
    box-shadow: 12px 9px 0px lightpink, -10px -10px 0px lightgreen;
}

.fixed:nth-child(4n + 1) {
    background-color: var(--color1);
}

.fixed:nth-child(4n + 2) {
    background-color: var(--color2);
}

.fixed:nth-child(4n + 3) {
    background-color: var(--color5);
}

.fixed:nth-child(4n) {
    background-color: var(--color6);
}

.container {
    display: flex;
    flex-direction: column;
    max-width: 90%;
    margin: auto;
}

.center {
    background-color: white;
    /* border-radius: 15px; */

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',
        sans-serif;
    text-align: center;
    padding: 1.5rem 3rem;
    margin: 3rem auto;
    position: relative;
}

.flash {
    animation: 3s ease-in alternate infinite flash;
}

@keyframes flash {
    0% {
        background-color: var(--color1);
    }

    20% {
        background-color: var(--color2);
    }

    40% {
        background-color: var(--color3);
    }

    60% {
        background-color: var(--color4);
    }

    80% {
        background-color: var(--color5);
    }

    100% {
        background-color: var(--color6);
    }
}