<template>
    <main class="instructions layout-block">
        <router-link class="back-link" to="/"><- Go Back</router-link>

        <div class="content" v-html="renderedContent" />
    </main>
</template>

<script setup>
import content from '@/content/instructions.md?raw'
import MarkdownIt from 'markdown-it'

const md = new MarkdownIt()
const renderedContent = md.render(content)
</script>

<style lang="scss">
main.instructions {
    .back-link {
        opacity: 0.25;
        display: block;
        margin-top: 9px;
        margin-bottom: 14px;
    }

    .content {
        display: flex;
        flex-direction: column;
        gap: 20px;

        hr {
            border-bottom: 1px dashed currentColor;
        }
    }
}
</style>
