<script lang="ts">
    import { fade } from "svelte/transition";

    export let variables = { title: "" };
</script>

<div in:fade={{ duration: 250 }}>
    <span>{variables.title}</span>
    <slot />
</div>

<style>
    span {
        font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
        font-weight: 600;
        font-size: 20px;
        color: var(--island-header-color);
    }
    div {
        width: 85%;
        max-width: 400px;
        margin: auto;
        margin-top: 25px;
        padding: 10px;
        background-color: var(--island-bg-color);
        border-radius: 10px;
        box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.29);
    }
</style>
