<script>
 import '../fic.scss'
 import "bootstrap-icons/font/bootstrap-icons.css";

 import { base } from '$app/paths';
 import {
     Container,
     //Styles,
 } from 'sveltestrap';

 import Header from '$lib/components/Header.svelte';

 import { challengeInfo } from '$lib/stores/challengeinfo';
 import { settings } from '$lib/stores/settings';
</script>

<svelte:head>
    {#if $challengeInfo}
        <title>{$challengeInfo.title}</title>
        <meta name="author" content="{$challengeInfo.authors}">
        {#if $challengeInfo.main_logo && $challengeInfo.main_logo.length}
            <link rel="icon" href="{$challengeInfo.main_logo[0].replace('$FILES$', '/files/')}">
        {/if}
    {/if}
</svelte:head>

<!--Styles /-->

{#if $settings.globaltopmessage}
    <div class={'position-fixed w-100 text-center fw-bolder p-0 alert alert-' + ($settings.globaltopmessagevariant?$settings.globaltopmessagevariant:'primary')} style="z-index:1024; border-radius:0">
        {$settings.globaltopmessage}
    </div>
{/if}
<Header />
<slot></slot>

<style>
 :global(body) {
     overflow-y: scroll;
 }
 :global(a.badge) {
     text-decoration: none;
 }
 :global(.text-justify) {
     text-align: justify;
 }
 :global(.niceborder) {
     border-bottom-style: solid;
     border-bottom-width: 5px !important;
     border-bottom-color: #4eaee6;
 }
</style>
