* {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
    cursor: url('./cursor.png'), auto;
}


#box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#myo{
    width: 55vmin;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#myo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#myo img:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease, filter 0.3s ease;
}

#neutral:hover {
    filter: drop-shadow(0 0 15px rgba(164, 237, 255, 0.7));
}

#sad:hover {
    filter: drop-shadow(0 0 15px rgba(0, 100, 200, 0.7));
}

#angry:hover {
    filter: drop-shadow(0 0 15px rgba(255, 100, 100, 0.7));
}

#happy:hover {
    filter: drop-shadow(0 0 15px rgba(255, 182, 193, 0.7));
}

#scared:hover {
    filter: drop-shadow(0 0 15px rgba(255, 165, 0, 0.7));
}

#disgust:hover {
    filter: drop-shadow(0 0 15px rgba(144, 238, 144, 0.7));
}

#confused:hover {
    filter: drop-shadow(0 0 15px rgba(255, 255, 0, 0.7));
}

#intro {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-family: 'VT323', monospace;
    font-size: 23px;
    color: #00728F;
}

#intro a {
    color: #4B0082;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: 'VT323', monospace;
}

#intro a:hover {
    color: #2E0051;
    font-size: 1.2em;
}

#share {
    position: fixed;
    top: 20px;
    left: 20px;
    font-family: 'VT323', monospace;
    font-size: 23px;
    color: #4B0082;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

#share:hover {
    color: #2E0051;
    font-size: 28px;
}

#share.copied {
    color: #1A0033;
}

/* Mobile styles */
@media (max-width: 768px) {
    #myo {
        width: 75vw;
    }

    #inputField {
        width: 75vw;
        gap: 15px;
    }

    #userInput {
        height: 8vw;
        border-radius: 10px;
        padding-left: 2vw;
    }

    #button {
        height: 8vw;
        padding-top: 6px;
    }
}

#inputField{
    width: 55vmin;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 11px;
    margin-top: -3vmin;
    z-index: 10;
    position: relative;
}

#userInput {
    height: 5vmin;
    aspect-ratio: 6/1;
    border-radius: 8px;
    padding-left: 1.1vmin;
    border: 3px solid #00728F;
    background-color: #F4F4F4;

}

#button {
    border-radius: 50%;
    height:5vmin;
    aspect-ratio: 1/1;
    color: #00728F;
    border: 3px solid #00728F;   
    background-color: #D2F6FF;
    padding-top: 4px;
}

#button:hover {
    background-color: #A4EDFF;
    border-color: #005f6b;
}

#userInput:hover {
    border-color: #005f6b;
    background-color: #F0F0F0;
}

.blurryCircle {
    background-color: rgba(164, 237, 255, 0.83);
    width: 15vmin;
    aspect-ratio: 1;
    border-radius: 50%;
    position: fixed;
    box-shadow: 0 0 200px 150px #A4EDFF;
    z-index: -1;
}

#first {
    bottom: 20vh;
    left:15vw;
}

#sec {
    top: 20vh;
    right:15vw;
}

#loadingText {
    color:#00728F; 
    font-size:1.8vmin; 
    margin-top:2vmin; 
    opacity: 0;
}

#apiErr {
    color: red; 
    font-size:1.8vmin; 
    margin-top:2vmin; 
    opacity: 0;
}