@keyframes bobbing {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* @keyframes hover {
    0%, 100% {
        box-shadow: 2px 2px;
    }
    50% {
    }
} */

@keyframes blurring {
    0%, 100% {
        filter: blur(1px)
    }

    50% {
        filter: blur(0px)
    }
}

@keyframes outl {
    0%, 100%{
        outline-width: 0px;
    }

    50% {
        outline-width: 10px;
    }
}

h1 {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    animation: blurring 3s ease-out infinite;
}

body {
    display: flex; 
    height: 500px;
    justify-content: center;
    background-color: bisque;
}

.styled-button {
    background: linear-gradient(
        to left,
        hsl(100deg, 100%, 16%) 0%,
        hsl(100deg 100% 25%) 8%,
        hsl(100deg 100% 25%) 92%,
        hsl(100deg 100% 16%) 100%
    );
    border: none; /* Removes border */
    color: white; /* White text color */
    padding: 0; /* Top-bottom and left-right padding */
    text-align: center; /* Centers text */
    text-decoration: double; /* Removes underline */
    font-size: 16px; /* Text size */
    margin: 20px 20px; /* Margin */
    border-radius: 8px; /* Rounded corners */
    transition: transform 0.3s, outline 0.2s;/* Smooth transition for background color */
    box-shadow: 0px -1px 0px 0.5px lightcoral;
}

.front {
    perspective: 1000px;
    display:block;
    
    background-image: linear-gradient(
    0deg,
    hsl(139deg 89% 39%) 0%,
    hsl(139deg 81% 41%) 11%,
    hsl(139deg 76% 42%) 22%,
    hsl(140deg 72% 44%) 33%,
    hsl(141deg 69% 45%) 44%,
    hsl(142deg 66% 46%) 56%,
    hsl(143deg 64% 47%) 67%,
    hsl(144deg 62% 47%) 78%,
    hsl(146deg 61% 48%) 89%,
    hsl(147deg 59% 49%) 100%
    );

    border: none; /* Removes border */
    color: white; /* White text color */
    padding: 12px 24px; /* Top-bottom and left-right padding */
    text-align: center; /* Centers text */
    text-decoration: double; /* Removes underline */
    font-size: 16px; /* Text size */
    border-radius: 8px; /* Rounded corners */
    transform: translateY(-8px) scaleX(102%) rotateX(30deg);
    transition: background-color 0.3s, transform 0.4s, filter 0.3s;/* Smooth transition for background color */
    outline-offset: 4px;
    box-shadow: 0px 1px 0px 0.1px lightgreen;
}


.styled-button:hover .front{
    filter:brightness(110%);
    transform: translateY(-5px) scaleY(95%) scaleX(100%);
}

.styled-button:active .front {
    background-color: #45a049; /* Darker green on hover */
    box-shadow: 0px -1px 3px 0px black;
    filter:brightness(85%);
    transform: translateY(4px) scaleY(75%) scaleX(98%);
    transition: transform 0.05s, filter 0.1s;
    
}



.container {
    display: grid;
    grid-template-columns: 200px;
    gap: 10px;
}

.box {

    border: 3px solid #666;
    background-color: gray;
    border-radius: .5em;
    padding: 10px;
    cursor: move;
    transition: transform 0.2s;
}


.box.over {
    border: 3px dotted #666;
}


.draggable {
    touch-action: none;
    width: 120px;
    height: 40px;
    background-image: linear-gradient(
        60deg,
        hsl(240deg 94% 51%) 0%,
        hsl(229deg 100% 49%) 11%,
        hsl(225deg 100% 50%) 22%,
        hsl(222deg 100% 50%) 33%,
        hsl(219deg 100% 50%) 44%,
        hsl(216deg 100% 50%) 56%,
        hsl(213deg 100% 49%) 67%,
        hsl(211deg 100% 49%) 78%,
        hsl(208deg 100% 48%) 89%,
        hsl(206deg 95% 48%) 100%
    );
    border-radius: 10px;
    position: absolute;
    cursor: grab;
    box-shadow: 1px 1px 1px 1px;
    transition: box-shadow .2s, top .05s, left .05s;
    /* animation: hover 5s infinite; */
}

.slot {
    width: 120px;
    height: 40px;
    background-color: rgba(50 100 200 / .5);
    position: absolute;
    cursor: grab;
}

textarea {
    width: 100%;
    text-align:center;
    border-radius: 8px;
    border: none;
    outline: none;
    box-shadow: 1px 1px 3px 1px darkslategray;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 16px;
    background-color: transparent;

    color: white;
    resize: none;
}

/* textarea:focus { */
    /* width: 100%;
    text-align:center;
    border-radius: 8px;
    border: 0px solid white;
    background: transparent;
    color: white;
    resize: none; */
/* } */



.draggable:active {
    touch-action: none;
    cursor: grabbing;
    box-shadow: 2px 2px 4px, 8px 8px 8px grey;
    /* box-shadow: 0px 0px 1px 2px black; */
}

.doodle {
    box-shadow: 2px 2px 5px, 4px 4px 10px grey;
}