<script setup lang="ts"></script>

<template>
  <div>
    <div class="shadow shadow-top"></div>
    <div class="shadow shadow-bottom"></div>
    <div class="belt-block">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.belt-block {
  height: 100%;
  background-color: rgb(0, 0, 0);
  background-image: url("@/assets/images/belt.png");
  background-size: cover;
  position: relative;
}

.shadow {
  height: 10px;
  width: 100%;
  position: absolute;
  background-color: black;
}

.shadow-top {
  top: 0px;
  box-shadow: 0px -5px 10px black;
}

.shadow-bottom {
  bottom: 0px;
  box-shadow: 0px 5px 10px black;
}
</style>
