/*
Theme Name: Peace Coloring
Theme URI: https://example.com/
Author: Wyshandra Glaze
Description: A custom WordPress theme for an interactive online coloring experience.
Version: 1.0
*/


            #coloringCanvas {
                touch-action: pinch-zoom;
            }

            .resizeHandle {
                position: absolute;
                width: 16px;
                height: 16px;
                background: white;
                border: 2px solid black;
                cursor: nwse-resize;
                display: none;
                z-index: 10;
                touch-action: none;

            }

            .colorButton {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                border: 2px solid black;
                cursor: pointer;

            }

            #coloringApp {
                width: 100%;
            }

            #brushSizes {
                text-align: center;
                margin: 0 auto;
            }

            #brushSizes button {
                padding: 8px 15px;
                margin: 5px;
                cursor: pointer;
            }


            h1 {
                text-align: center;
            }

            #pageOptions {
                text-align: center;
                margin: 30px auto;
            }

            #pageOptions button {
                margin: 5px;
            }

            #canvasContainer {
                position: relative;
                width: 800px;
                height: 1000px;
                margin: 20px auto 30px;
                border: none;
                box-sizing: border-box;
                overflow: hidden;
            }

            #coloringCanvas {
                position: absolute;
                top: 0;
                left: 0;
                width: 800px;
                height: 1000px;
                z-index: 2;
                mix-blend-mode: multiply;

                outline: 4px solid #bababa;
                outline-offset: -4px;
            }
            #lineArtCanvas {
                position: absolute;
                top: 0;
                left: 0;
                width: 800px;
                height: 1000px;
                z-index: 1;
                pointer-events: none;
            }

            #lineArtCanvas {
                pointer-events: none;
            }

            #communityGallery {
                width: 100%;
                max-width: 800px;
                margin: 40px auto 0;
                text-align: center;
            }

            /* Community Gallery Comments */
            .commentsArea {
                margin-top: 25px;
                padding: 20px;
                background-color: #f7f7f7;
                border: 1px solid #d6d6d6;
                border-radius: 12px;
                text-align: left;
            }

            .commentsTitle {
                margin-top: 0;
                margin-bottom: 20px;
                text-align: center;
            }

            .commentFormField {
                margin-bottom: 15px;
            }

            .commentFormField label {
                display: block;
                margin-bottom: 6px;
                font-weight: bold;
            }

            .commentFormField input,
            .commentFormField textarea {
                width: 100%;
                padding: 10px;
                border: 1px solid #bbb;
                border-radius: 6px;
                box-sizing: border-box;
                font-family: inherit;
                font-size: 16px;
            }

            .commentFormField textarea {
                resize: vertical;
            }

            .required {
                color: #777;
            }

            .commentSubmitButton {
                padding: 10px 18px;
                border: none;
                border-radius: 6px;
                cursor: pointer;
                font-size: 16px;
            }

            /* Individual Community Comments */
            .commentList {
                list-style: none;
                margin: 0 0 25px 0;
                padding: 0;
            }

            .commentList li {
                margin-bottom: 15px;
                padding: 15px;
                background-color: white;
                border: 1px solid #d6d6d6;
                border-radius: 10px;
            }                       

            .coloringPageThumbnail {
                width: 120px;
                height: 90px;
                object-fit: contain;
                cursor: pointer;
                margin: 5px;
            }

            .coloringPageThumbnail:hover {
                transform: scale(1.05);
            }

            #coloringPageGallery {
                margin-top: 15px;
                padding: 10px;
            }

            .coloringPageThumbnail.selected {
                border: 3px solid black;
            }

            .colorButton.selected {
                outline: 3px solid gray;
                outline-offset: 1px;

            }

            .controlButton.selected {
                outline: 3px solid gray;
                outline-offset: 2px;
                background-color: #e0e0e0;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            }

            #customColorPicker {
                width: 40px;
                height: 40px;
                padding: 0;
                border: none;
                cursor: pointer;
            }

            #customColorPicker.selected {
                outline: 3px solid gray;
                outline-offset: 2px;
            }

            #cropSelection {

                position: absolute;
                border: 2px dashed black;
                background: rgba(255, 255, 255, 0.15);
                display: none;
                pointer-events: none;
                z-index: 20;

            }

            #customColor {
                margin-top: 12px;
            }

            #shareForm {
                margin-top: 20px;
                padding: 20px;
                border: 2px solid #bababa;
                border-radius: 10px;
            }

            #shareForm h2 {
                margin-top: 0;
            }

            #shareForm label {
                display: block;
                margin-top: 10px;
            }

            #shareForm input[type="text"] {
                width: 100%;
                max-width: 400px;
                padding: 8px;
                margin-top: 5px;
                box-sizing: border-box;
            }

            #blueButton {
                background-color: blue;
            
            }

            #redButton {
                background-color: red;
            }

            #yellowButton {
                background-color: yellow;
            }

            .siteName img {
                width: 75px;
                height: auto;
            }

            .siteIntroduction {
                margin-top: 50px;
                margin-bottom: 60px;
                line-height: 1.6;
            }


            /* Mobile responsive layout */
@media (max-width: 768px) {

    body {
        margin: 0;
        padding: 10px;
        overflow-x: visible;
    }

    #coloringCanvas,
    #lineArtCanvas {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    #canvasContainer {
        max-width: 100%;
        width: 100%;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        margin: 0 auto 60px;
    }

    .communityPost img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }


    button {
        max-width: 100%;
    }

    #siteFooter {
    text-align: center;
    margin-top: 30px;
    padding: 20px;
    }
}

main {
    position: relative;
}

#basketball {
    font-size: 50px;
    display: block;
    margin-top: 70px;
    animation: basketballBounce 5s linear infinite;
}


@keyframes basketballBounce {
    0% {
        transform: translateX(-100px) translateY(0);
    }

    10% {
        transform: translateX(10vw) translateY(-25px);
    }

    20% {
        transform: translateX(20vw) translateY(0);
    }

    30% {
        transform: translateX(30vw) translateY(-35px);
    }

    40% {
        transform: translateX(40vw) translateY(0);
    }

    50% {
        transform: translateX(50vw) translateY(-25px);
    }

    60% {
        transform: translateX(60vw) translateY(0);
    }

    70% {
        transform: translateX(70vw) translateY(-15px);
    }

    80% {
        transform: translateX(80vw) translateY(0);
    }

    90% {
        transform: translateX(90vw) translateY(-65px);
    }

    100% {
        transform: translateX(100vw) translateY(-85px);
    }
}




#football {
    font-size: 50px;
    position: absolute;
    top: 0;
    left: 0;
    animation: footballFly 4s linear infinite;
}

@keyframes footballFly {
    0%{
        transform: translateX(-100px) translateY(0) rotate(0deg);
    }

    25%{
        transform: translateX(25vw) translateY(-20px) rotate(180deg);
    }

    50% {
        transform: translateX(50vw) translateY(-30px) rotate(360deg);
    }

    75% {
        transform: translateX(75vw) translateY(-20px) rotate(540deg);
    }

    100% {
        transform: translateX(100vw) translateY(0) rotate(720deg);
    }
}