<template>
<div class="index-container">
    <header>
        <img src="@/assets/img/snow.svg" alt="">
        <h1>Paska Joululeffa 2025</h1>
    </header>
    <main>
        <img src="@/assets/img/reindeerpoop.webp" alt="">
        <div class="warning">
            <div>
                <Icon name="mdi:warning" size="1.5rem"/>
                <h2>Varoitus!</h2>
                <Icon name="mdi:warning" size="1.5rem" />
            </div>
            <p>Täällä on vain tyhmää läppää. Herkkänahkaisille ei suositella.</p>
        </div>
        <NuxtLink class="btn btn-primary" to="/info">Sisään</NuxtLink>
    </main>
    <footer><sup>&copy;</sup> {{ new Date().getFullYear() }} Kessinen</footer>
</div>
</template>

<style scoped lang="scss">

* {
    font-family: DynaPuff, sans-serif;
}

.index-container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 100%;
    min-height: 100vh;
    

}

header {
    text-align: center;
    display: grid;
    grid-template-areas: "stack";
    
    > * {
        grid-area: stack;
        max-width: 100%;
    }

    img {
        width: 100%;
        object-fit: cover;
    }
    h1 {
        padding: 1rem;
        color: hsl(0 74% 5%);
    }
}

main {
    text-align: center;
    padding: 1rem;
    display: grid;
    justify-content: center;
    place-items: center;
    
    img {
        max-width: 80%;
    }

    .warning {
        .iconify {
            color: hsl(44, 100%, 65%);
        }
    }

    > div {
        font-size: 0.9rem;
        line-height: 2;
        padding: 1rem;
        max-width: 80%;
        margin: auto;
        background-color: hsl(212 74% 50% / 20%);
        color: hsl(212 74% 90%);
        border-radius: 1rem;
        > div {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
        }
    }
}

footer {
    text-align: center;
    padding: 1rem;
    background-image: linear-gradient(to bottom, hsl(212, 74%, 50%), hsl(212, 90%, 35%));
    font-size: 0.8rem;
}
</style>
