/* Reset */
html {
    box-sizing: border-box;
    font-size: 100%;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
}
ol,
ul {
    list-style: none;
}
img {
    max-width: 100%;
    height: auto;
}

/* Variables */
:root {
    color-scheme: light dark;
    --primary-dark-color: rgba(34, 34, 34, 0.5);
    --secondary-dark-color: rgba(51, 51, 51, 0.75);
    --hover-dark-color: rgba(51, 51, 51, 1);
    --text-dark-color: rgb(255, 255, 255, 1);
    --primary-light-color: rgba(255, 255, 255, 0.3);
    --secondary-light-color: rgba(255, 255, 255, 0.6);
    --hover-light-color: rgba(255, 255, 255, 1);
    --text-light-color: rgb(34, 34, 34, 1);
    --element-padding-gap: 0.8em;
    --outer-corner-radius: 2em;
    --inner-corner-radius: calc(var(--outer-corner-radius) - var(--element-padding-gap));
    --element-corner-radius: calc(var(--inner-corner-radius) / 2);
    --blur-strength: 1.4em;
}

/* Import */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");

/* Font Settings */
body {
    font-family: "JetBrains Mono", monospace;
}

/* Main Styling */
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.8em;
    background: url("assets/bg.jpg") center/cover no-repeat;
    background-attachment: fixed;
    overflow: auto;
    padding: 0.8em;
    min-height: 100svh;
}

.container {
    display: flex;
    flex-direction: column;
    gap: var(--element-padding-gap);
    background: light-dark(var(--primary-light-color), var(--primary-dark-color));
    color: light-dark(var(--text-light-color), var(--text-dark-color));
    backdrop-filter: blur(var(--blur-strength));
    -webkit-backdrop-filter: blur(var(--blur-strength));
    border-radius: var(--outer-corner-radius);
    padding: var(--element-padding-gap);
    @media (min-width: 768px) {
        width: 40em;
    }
    @media (max-width: 767px) {
        width: calc(100vw - 1.2em);
    }
}

.title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4em;
    > svg path {
        fill: transparent;
        stroke: light-dark(var(--text-light-color), var(--text-dark-color));
        stroke-width: 3;
        stroke-dasharray: 570;
        stroke-dashoffset: 570;
        animation: textAnimation 3s ease-in-out 1 forwards;
        transition: all 3s ease-in-out;
    }
    /* font-size: 2.5em; */
    /* font-weight: 700; */
}
@keyframes textAnimation {
    0% {
        stroke-dashoffset: 570;
        transform: translateZ(0);
    }
    80% {
        /* stroke-dashoffset: 0; */
        fill: transparent;
        transform: translateZ(0);
    }
    100% {
        stroke-dashoffset: 0;
        fill: light-dark(var(--text-light-color), var(--text-dark-color));
        transform: translateZ(0);
    }
}

.link-list {
    display: flex;
    flex-direction: column;
    border-radius: var(--inner-corner-radius);
    overflow: hidden;
    > ul {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: 0.2em;
        justify-content: center;
        > a {
            color: light-dark(var(--text-light-color), var(--text-dark-color));
            text-decoration: none;
            > li {
                display: flex;
                align-items: center;
                padding: 0.8em;
                gap: 1em;
                background: light-dark(var(--secondary-light-color), var(--secondary-dark-color));
                border-radius: var(--element-corner-radius);
                transition: all 0.4s ease-in-out;
                @media (min-width: 768px) {
                    &:hover {
                        background: light-dark(var(--hover-light-color), var(--hover-dark-color));
                    }
                }
                > svg {
                    aspect-ratio: 1/1;
                    width: 2em;
                    padding: 0.12em;
                }
                > img {
                    aspect-ratio: 1/1;
                    width: 2em;
                    padding: 0.08em;
                }
            }
        }
    }
}

.made-by {
    text-align: center;
    font-weight: 100;
}