<template>
  <div
    style="
      color: #404040;
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    "
  >
    <div style="display: inline-block; position: relative">
      <div
        style="
          z-index: 2;
          position: absolute;
          margin-left: 6.5px;
          margin-right: 6.5px;
        "
      >
        {{ title }}
      </div>
      <div
        style="
          z-index: 0;
          position: absolute;
          bottom: 0px;
          width: 100%;
          height: 10px;
          background-color: #a1f5c3;
        "
      ></div>
      <div
        style="z-index: 1; margin-left: 6.5px; margin-right: 6.5px; opacity: 0"
      >
        {{ title }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "decoratedTitle",
  props: {
    title: String,
  },
};
</script>

<style></style>
