*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100dvh;
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(to left bottom, #2652e4, #9e30dd);
    overflow: hidden;
}

main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.notification {
    display: flex;
    justify-content: center;
    padding: 1rem;
    color: #000;
    display: inline-block;
    font-size: 4rem;
    font-weight: 700;
    position: relative;
    letter-spacing: -0.05em;
    -webkit-text-stroke: 2px #fab114;
    /* text-shadow: 0 0 10px #ff7c7c; */

    background: -webkit-gradient(
        left top,
        left bottom,
        color-stop(0%, rgba(128, 128, 128, 1)),
        color-stop(58%, rgba(59, 50, 50, 1)),
        color-stop(100%, rgba(59, 50, 50, 1))
    );
    background: -webkit-linear-gradient(
        top,
        rgba(128, 128, 128, 1) 0%,
        rgba(59, 50, 50, 1) 58%,
        rgba(59, 50, 50, 1) 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    &:after {
        color: red;
        content: attr(data-text);
        position: absolute;
        -webkit-text-stroke: 0.15em #d9a3ff;
        left: 0;
        z-index: -2;
        font-size: 1em;
    }
}

.test_grid {
    width: 90%;
    max-width: 400px;
    aspect-ratio: 1/1;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    border: 1px solid #ffffff93;

    .cell {
        background-color: #0000002c;
        /* opacity: 0; */
        border: 1px solid #ffffff93;
    }

    .hover {
        background-color: #ffeea296;
        border: 1px solid white;
        box-shadow: 0 0 20px 4px #f8cc3d;
    }

    .filled {
        background-color: #f3a143;
        /* border: 10px groove #96969679; */
    }
}

.draggable__wrapper {
    width: 100%;
    max-width: 800px;
    height: 15rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.draggable {
    display: grid;
    display: static;
    touch-action: none;
    transition: all 0.3s linear;
    transition: scale 0.5s ease;

    .cell {
        /* width: 50px; */
        aspect-ratio: 1/1;
        background-color: transparent;
    }

    .active {
        border: 1px solid #c75b14c7;
        background-color: #ff9e2e;
    }
}

@media (max-width: 768px) {
    .draggable {
        transform: scale(0.8);
    }
}