body {
    background-color: yellow;
    font-family: Arial, sans-serif;
    margin: 0;
    /* padding: 1%; */

    user-select: none; /* Prevent text selection */
    -webkit-user-select: none; /* For Safari */
    -ms-user-select: none; /* For Internet Explorer */
    -webkit-touch-callout: none; /* Disable callout on iOS */
}

.desktop-off{
    display: none;
}

.mobile-off{
    display: block;
}

/* Centered Logo Styling */
.logo-wrapper{
    width: 100%;
    display: flex;
    justify-content: right;
}
.logo-container {
    padding-top: 1%;
    width: 50%;
    display: flex;
    flex-direction: column;
    text-align: left;
    position: fixed;

    h1{
        font-size: 8vw;
        font-weight: normal;
        letter-spacing: 0.05em;
        color: yellow;
        line-height: 1;
        font-style: italic;
        margin: 0;

        filter: blur(2px);
        opacity: 1;

        font-family: "Carattere", cursive;
        font-weight: 400;
        font-style: normal;
    }

    p{
        font-size: 1vw;
        margin: 0;
        color: yellow;
        filter: blur(0.8px);
    }
}

.type-wrapper{
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    background-color: yellow;
    padding: 10px;

    #messageForm{
        width: 100%;
        display: flex;
        /* justify-content: center; */
        align-items: center;

        .textsubmit-wrapper{
            width: 70vw;

            input{
                width: 100%;
                padding: 5px;
            }
        }

        .privacy-wrapper{
            width: 22vw;
            padding-left: 1%;

            #privacySelect{
                padding: 5px;
            }

            /* #privacySelect{
                width: 12vw; for large screens
            } */
        }

        button{
            width: 5.5vw;
            padding: 5px;
            font-size: 1vw;
        }
    }
}


#messages {
    /* margin-top: 20px; */
    margin-bottom: 3%;
}
.message {
    margin-bottom: 2px;
    padding: 20px;
    background-color: lightgrey;
    /* border-radius: 20px; */

    .time-wrapper{
        display: flex;
        align-items: end;

        p{
            font-size: 4vw;
            margin: 0;
        }
    }

}

.replies{
    margin-bottom: 50px;

    p{
        font-size: 16px;
    }
}

.reply-container {
    display: flex;
    gap: 10px; /* Add spacing between input and button */
    margin-top: 10px;
}

.reply-input {
    flex: 1; /* Make the input take up available space */
    padding: 5px;
}

.send-reply-btn {
    padding: 5px 10px;
    /* background-color: yellow; */
    /* color: white; */
    /* border: none; */
    cursor: pointer;
}

@media (max-width: 768px) {

    body{
        background-color: blue;
        padding: 5%;
    }

    .mobile-off{
        display: none;
    }

    .desktop-off{
        display: block;
    }

    .logo-wrapper{
        justify-content: normal;
    }

    .logo-container {
        width: 100%;
    
        h1{
            font-size: 15vw;
        }
    
        p{
            font-size: 100%;
        }
    }
}