<script lang="ts">
    import Login from "./buttons/Login.svelte";
</script>

<div id="content-container">
<img id="large-logo" src="/logo/logo-colour.svg" width=125 height=125 alt="Logo">

<div id="bounding-box">
    <header>You are not signed in</header>
    <Login />

    <p>When you login for the first time, you will have to verify your email address and register a passkey to enable your account, <a href="passkey">click here</a> for help.</p>
    <p><a href="https://sso.fjla.uk/realms/FJLA.net/login-actions/reset-credentials" target="_blank">Forgot your password?</a></p>
</div>
</div>
<style>
    #content-container {
        width: 100%;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        text-align: center;
        margin: 10 auto;
        padding: 25px;
        box-sizing: border-box;
    }
    #large-logo {
        margin: 0 auto;
    }
    #bounding-box {
        margin: auto;
        text-align: center;
        background-color: lightgrey;
        width: 75%;
        min-width: 200px;
        max-width: 800px;
        border-radius: 25px;
        margin-top: 25px;
    }

    header {
        font-size: large;
        padding: 15px;
    }

    p {
        padding: 15px;
    }
</style>