/*── src/assets/styles/home.css ── Home page styles ──*
 │
 │ Copyright (c) 2024-2025 Deimonn (a.k.a. Nahuel S. Cisterna)
 │
 │ This file is licensed under the MIT License.
 │
 │ See https://deimonn.dev/license.txt for license information.
 │
 */

/* SPDX-License-Identifier: MIT */

/* Background animation. */
@keyframes background-animation {
    0%   { background-position: 0%   100%; }
    50%  { background-position: 100% 0%;   }
    100% { background-position: 0%   100%; }
}

body {
    animation: background-animation 120s linear infinite;
}

/* Light theme colors. */
body {
    background-size: 600% 600%;
    background-image: linear-gradient(
        220deg, #FFFF80, #80FFFF, #FF80FF, #FFFF80, #80FFFF, #FF80FF
    );
}

footer {
    margin-top: 5em;
    background-color: #FFFFFF80;
}

/* Dark theme colors. */
.sl-theme-dark > body {
    background-image: linear-gradient(
        220deg, #A0A000, #00A0A0, #A000A0, #A0A000, #00A0A0, #A000A0
    );
}

.sl-theme-dark > body > footer {
    background-color: #00000080;
}

/* Layout. */
main {
    text-align: center;
}

/* Headers. */
h1 {
    font-size: 3em;
    font-family: Victor Mono, monospace;
    font-style: italic;
}

h2 {
    font-family: Victor Mono, monospace;
    font-style: italic;
}

/* Description stuff. */
h1, h2 {
    color: white;
    text-shadow:
        1px 1px 2px black,
        -1px 1px 2px black,
        1px -1px 2px black,
        -1px -1px 2px black;
}

.dei-desctext {
    margin-left: 25%;
    margin-right: 25%;

    /* Fancy text. */
    color: white;
    text-shadow:
        1px 1px 1px black,
        -1px 1px 1px black,
        1px -1px 1px black,
        -1px -1px 1px black;

    /* Adjust width on smaller screens. */
    @media (max-width: 1366px) {
        margin-left: 15%;
        margin-right: 15%;
    }

    @media (max-width: 1024px) {
        margin-left: 16px;
        margin-right: 16px;
    }
}

.dei-desctext > sl-icon {
    position: relative;
    top: 0.15em;
    filter:
        drop-shadow(0.3px 0.3px 0.3px black)
        drop-shadow(-0.3px 0.3px 0.3px black)
        drop-shadow(0.3px -0.3px 0.3px black)
        drop-shadow(-0.3px -0.3px 0.3px black);
}

.dei-desclink, .dei-desclink:visited, .dei-desclink:hover {
    color: var(--sl-color-primary-300);
}

.sl-theme-dark {
    .dei-desclink, .dei-desclink:visited, .dei-desclink:hover {
        color: var(--sl-color-primary-700);
    }
}

/* Cards. */
sl-card {
    width: 256px;
    margin: 8px;
    box-shadow: 0px 0px 8px black;
}

sl-card > b {
    font-family: Victor Mono, monospace;
}

sl-card > p {
    height: 64px;
}