* {
    background-color: rgb(50, 1, 47);
}

.penguin {
    --penguin-skin: black;
    --penguin-belly: white;
    --penguin-beak: orange;

    position: relative;
    margin-top: 5px;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

/* Penguin parts */
.penguin-top { top: 10%; left: 25%; background: var(--penguin-skin); width: 50%; height: 45%; border-radius: 70% 70% 60% 60%; position: absolute; }
.penguin-bottom { top: 40%; left: 23.5%; background: var(--penguin-skin); width: 53%; height: 45%; border-radius: 70% 70% 100% 100%; position: absolute; }
.right-hand { top: 5%; left: 25%; background: var(--penguin-skin); width: 30%; height: 60%; border-radius: 30% 30% 120% 30%; transform: rotate(130deg); z-index: -1; animation: wave 2s linear infinite; transform-origin: 0 0; position: absolute; }
.left-hand { top: 0%; left: 75%; background: var(--penguin-skin); width: 30%; height: 60%; border-radius: 30% 30% 30% 120%; transform: rotate(-45deg); z-index: -1; position: absolute; }
.right-cheek { top: 15%; left: 35%; background: var(--penguin-belly); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; position: absolute; }
.left-cheek { top: 15%; left: 5%; background: var(--penguin-belly); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; position: absolute; }
.belly { top: 60%; left: 2.5%; background: var(--penguin-belly); width: 95%; height: 100%; border-radius: 120% 120% 100% 100%; position: absolute; }
.right-feet { top: 85%; left: 60%; background: var(--penguin-beak); width: 15%; height: 30%; border-radius: 50%; transform: rotate(-80deg); z-index: -2222; position: absolute; }
.left-feet { top: 85%; left: 25%; background: var(--penguin-beak); width: 15%; height: 30%; border-radius: 50%; transform: rotate(80deg); z-index: -2222; position: absolute; }
.right-eye { top: 45%; left: 60%; background: black; width: 15%; height: 17%; border-radius: 50%; position: absolute; }
.left-eye { top: 45%; left: 25%; background: black; width: 15%; height: 17%; border-radius: 50%; position: absolute; }
.sparkle { top: 25%; left: 15%; background: white; width: 35%; height: 35%; border-radius: 50%; position: absolute; }
.blush-right { top: 65%; left: 15%; background: pink; width: 15%; height: 10%; border-radius: 50%; position: absolute; }
.blush-left { top: 65%; left: 70%; background: pink; width: 15%; height: 10%; border-radius: 50%; position: absolute; }
.beak-top { top: 60%; left: 40%; background: var(--penguin-beak); width: 20%; height: 10%; border-radius: 50%; position: absolute; }
.beak-bottom { top: 65%; left: 42%; background: var(--penguin-beak); width: 16%; height: 10%; border-radius: 50%; position: absolute; }

body {
    background-color: rgb(50, 1, 47);
    margin: 0;
    padding: 0;
    font-family: "Handlee", "Comic Sans MS", cursive;
}

.penguin {
    animation: loop 10s linear infinite;
    transform-origin: 0% 0%;
}

@keyframes wave {
    10% { transform: rotate(110deg); }
    30% { transform: rotate(130deg); }
    50% { transform: rotate(110deg); }
    80% { transform: rotate(130deg); }
    100% { transform: rotate(110deg); }
}

@keyframes loop {
    0% { transform: rotateY(0deg); }
    25% { transform: rotateY(-10deg); }
    50% { transform: rotateY(0deg); }
    75% { transform: rotateY(10deg); }
    100% { transform: rotateY(0deg); }
}

/* Layout containers */
.top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 50px;
}
.message p {
    font-size: 40px;
    color: white;
}
.input-box {
    width: 100%;   
    display: flex;
    justify-content: center;
    margin-top: 50px;
}
.input {
    border: 2px solid white;
    border-radius: 10px;
    padding: 10px 25px;
    background: transparent;
    width: 200px;
    font-size: 15px;
    outline: none;
    color: white;
}
.input:focus,
.input:active {
    box-shadow: 2px 2px 15px white inset;
}
#message-box {
    margin-top: 20px;
    text-align: center;
    color: white;
    font-size: 18px;
}

/* ===== MEDIA QUERIES ===== */
@media (max-width: 1024px) {
    .penguin { width: 150px; height: 150px; margin-top: 30px; }
    .message p { font-size: 35px; }
    .input { width: 180px; font-size: 14px; padding: 8px 20px; }
}

@media (max-width: 768px) {
    .penguin { width: 130px; height: 130px; margin-top: 20px; }
    .message p { font-size: 28px; }
    .input { width: 160px; font-size: 13px; padding: 7px 18px; }
}

@media (max-width: 480px) {
    .penguin { width: 100px; height: 100px; margin-top: 15px; }
    .message p { font-size: 22px; }
    .input { width: 140px; font-size: 12px; padding: 6px 15px; }
}