body {
    margin: 0;
    padding: 0;
    display: grid;
    justify-content: center;
    align-items: center;
    place-content: center;
    height: 100vh;
    font-family: "Merriweather", serif;
    font-weight: 700;
    font-style: normal;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;

    @media not (prefers-reduced-motion) {
        animation: gradient 15s ease infinite;
    }
}


@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.wrapper {
    display: grid;
    justify-content: center;
    align-items: center;
    place-content: center;
    max-width: 1200px;

    h1 {
        font-family: "Cookie", cursive;
        font-weight: 400;
        font-style: normal;
        text-align: center;
        font-size: 3.5rem;
        color: #fafafa;

        a {
            color: #fafafa;
            text-decoration: none;
        }
    }

    p {
        text-align: center;
        font-size: 1rem;
        color: #fafafa;

        a {
            color: #fafafa;
            text-decoration: none;
        }
    }

    small {
        text-align: center;
        color: #fff;
    }

    .manage-list-screen {

        &.inactive {
            display: none;
        }

        .add-attendees-form {
            display: grid;
            justify-content: center;
            align-items: center;
            place-content: center;
            width: 100%;

            &.inactive {
                display: none;
            }

            .input-attendee-form {
                display: flex;

                input {
                    font-family: "Merriweather", serif;
                    font-weight: 700;
                    font-style: normal;
                    font-size: 2rem;
                    padding: 10px 15px 5px;
                    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
                    border: none;
                    width: 230px;
                    height: 55px;
                }
            }
        }

        .attendee-list {
            display: flex;
            flex-wrap: wrap;
            margin-top: 1em;

            .attendee-tag {
                margin: 0.25em;
                padding: 0.5em 1em 0.5em 0.5em;
                cursor: pointer;
                font-size: 1.5rem;
                font-weight: bold;
                color: #535353;
                background-color: antiquewhite;

                &.dismissed {
                    opacity: 0.5;
                }

                .attendee-remove {
                    display: inline-block;
                    position: relative;
                    bottom: -0.12em;
                    border-radius: 2em;
                    margin-right: 0.3em;
                    width: 1em;
                    height: 1em;
                    background-color: #fff;

                    &:hover {
                        background-color: red;

                        &:after{
                            color: #fff;
                        }
                    }

                    &:after{
                        position: absolute;
                        top: -0.15em;
                        left: 0.17em;
                        content: "\00d7"; /* This will render the 'X' */
                        color: red;
                    }
                }
            }
        }

        .buttons {
            display: grid;
            justify-content: center;
            align-items: center;
            place-content: center;
            width: 100%;
            margin: 1rem 0 2rem 0;
        }
    }
}

@keyframes spinner {
    from { top: 0; }
    to { top: -1820px; }
}

#slot-machine {
    &.inactive {
        display: none;
    }

    .spinner {
        position: relative;
        margin: 5px;
        height: 210px;
        width: 100%;
        overflow: hidden;
        background: #fafafa;

        .boxes {
            position: relative;

            &.spinning {
                /* transition-delay: 2s; */
                /* animation: spinner 5s ease; */
                /* animation: spinner 5s; */
                @media not (prefers-reduced-motion) {
                    animation: spinner 5s cubic-bezier(.56,.27,.38,.93);
                }
                top: -1820px;
            }

            .box {
                display: flex;
                border-top: 1px solid #535353;
                justify-content: center;
                align-items: center;
                font-size: 5rem;
                width: 100%;
                height: 109px;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .glass {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgb(2,0,36);
            background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(2,0,36,0) 25%, rgba(2,0,36,0) 75%, rgba(2,0,36,1) 100%);
        }
    }
}

button {
    cursor: pointer;
    font-size: 1.2rem;
    border: none;
    background-image: linear-gradient(to right, #4776E6 0%, #8E54E9  51%, #4776E6  100%);
    padding: 15px;
    text-align: center;
    text-transform: uppercase;
    background-size: 200% auto;
    color: white;
    display: block;

    &:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
      }
}