<template>
    <div class="middle-message-box">
        <div class="middle-message">
            {{props.message!.message}}
        </div>
    </div>
</template>
  
 <script lang="ts" setup>
  const props = defineProps({
     "message": Object
  })
</script>
  
<style scoped>
    .middle-message {
        color: black;
        width: 70%;
        border-radius: 50px;
        background-color: rgba(165, 165, 165, 0.3);
        text-align: center;
    }
    .middle-message-box {
        padding: 5px;
        display: flex;
        justify-content: center;
        text-align: justify;
        align-items: center;
        height: auto;
        width: 100%;
    }
</style>