* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

body {
    background-image: url('background.png');
    background-size: cover;           
    background-position: center;      
    background-repeat: no-repeat;     
    background-attachment: fixed;     
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.cutiebox {
    padding: 10px;
    width:100%; 
    margin-top: 23%;
    height: 100%;
    position: relative;
    margin-bottom: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.eye {
    position: absolute; 
    width: 100%; 
    height: auto;
    object-fit: cover;
}

.blink {
    animation: blink 2s;
    animation-iteration-count: infinite;
}

.thought-bubble {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.bubble {
    width: 80%;
    height: 80%;
    opacity: 0;
    position: absolute;
}

.bubble1 {
    top: 0;
    animation: showBubble 0s 0.5s forwards;
}

.bubble2 {
    top: -10px;
    animation: showBubble 0s 1s forwards;
}

.bubble3 {
    top: -20px; 
    animation: showBubble 0s 1.5s forwards;
}

.bubble4 {
    top: -30px; 
    animation: showBubble 0s 2s forwards;
}

@keyframes showBubble {
    to {
        opacity: 1;
    }
}

.item {
    width: 10%;
    height: auto; 
    position: absolute; 
    left: 58%;
    margin-top: 3%; 
    opacity: 0; 
    animation: fade 5s 9s ease-in-out infinite, spin 8s  linear infinite;  
}


@keyframes fade {
    0%, 20% {
        opacity: 1; 
    }
    25%, 45% {
        opacity: 0;
    }
    50%, 70% {
        opacity: 1;
    }
    75%, 95% {
        opacity: 0; 
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes fade {
    0%, 20% {
        opacity: 0; 
    }
    25%, 45% {
        opacity: 1; 
    }
    75%, 95% {
        opacity: 0; 
    }
}

.cutie {
    animation: fade 9s ease-in-out infinite, spin 8s linear infinite; 
    animation-delay: 1s, 0s; 
    margin-top: 4%;
}

.carrot {
    animation: fade 9s ease-in-out infinite, spin 8s linear infinite; 
    animation-delay: 4s, 0s;
}

.box {
    animation: fade 9s ease-in-out infinite, spin 8s linear infinite; 
    animation-delay: 7s, 0s;
    margin-top: 5%; 
}