@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap');
body {
    font-family: 'Roboto', sans-serif;
}

/* Анимации */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.float-animation {
    animation: float 3s ease-in-out infinite;
}

/* Кастомные стили для неопределённости */
.undefined-bg {
    background: linear-gradient(45deg, #f3f4f6, #e5e7eb, #d1d5db);
    background-size: 300% 300%;
    animation: gradient 8s ease infinite;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Comic styles */
comic-editor {
    margin: 2rem 0;
}
#canvas {
    background: repeating-linear-gradient(
        45deg,
        #f3f4f6,
        #f3f4f6 10px,
        #e5e7eb 10px,
        #e5e7eb 20px
    );
    border: 3px solid #000;
    box-shadow: 3px 3px 0 #000;
}

comic-editor h3 {
    font-family: 'Bangers', cursive;
    font-size: 1.5rem;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 #ccc;
    margin-bottom: 1rem;
    border-bottom: 3px solid #000;
    padding-bottom: 0.5rem;
}