---
import Sidebar from '../components/Sidebar.astro';
import Page1 from '../components/pages/1.md';
import Page2 from '../components/pages/2.astro';
import Page3 from '../components/pages/3.astro';
import Page4 from '../components/pages/4.astro';
import Settings from '../components/pages/Settings.md';
import '../styles/index.scss';
---

<script src="./navigation.js" crossoarigin="anonymous"></script>
<script defer src="./font-awesome-6.2.1/js/all.js"></script>

<div class="content">
    <Sidebar />
    <div class="pages">
        <div id="1" class="page active">
            <Page1 />
        </div>
        <div id="2" class="page">
            <Page2 />
        </div>
        <div id="3" class="page">
            <Page3 />
        </div>
        <div id="4" class="page">
            <Page4 />
        </div>
        <div id="5" class="page">
            <Settings />
        </div>
    </div>
</div>

<!-- This is for page 1 and Settings, which is written in Markdown. You're free to remove this -->
<style is:inline>
div#\31, div#\35 {
    padding: 0px 64px 32px 64px;
}
a {
    color: white;
}
hr {
    height: 1px;
    background: white;
}
blockquote {
    margin: 0px;
    padding-left: 24px;
    border-left: 2px white solid;
}
img {
    width: 100%;
}
</style>