@charset "UTF-8";

:root {
    --main-text-color: #222222;
    --main-focus-color: #000000;
    --main-border-color: #888888;
    --main-clip-color: #6ba392;
    --main-gray-color: #666666;
    --main-hover-color: #047555;
    --main-avatar-filter: brightness(1);
    --main-polygon-url: url("../icons/main/polygon-light.svg");
    --main-bg-gradient-1: radial-gradient(circle,
            #e9fce9 0%, #fefffe 90%, #e2ffe2 100%);
    --main-bg-gradient-2: linear-gradient(to bottom,
            #e0ffe0 20%, #fefffe 100%);
}

:root.scheme-dark {
    --main-text-color: #dddedd;
    --main-focus-color: #00853c;
    --main-border-color: #575e59;
    --main-clip-color: #565956;
    --main-gray-color: #a1a1aa;
    --main-hover-color: #00a94c;
    --main-avatar-filter: brightness(0.72) contrast(1.44);
    --main-polygon-url: url("../icons/main/polygon-dark.svg");
    --main-bg-gradient-1: radial-gradient(circle,
            #585e59 0%, #464746 90%, #585e59 100%);
    --main-bg-gradient-2: linear-gradient(to bottom,
            #272927 20%, #252725 100%);
}

@media (prefers-color-scheme: dark) {
    :root.scheme-default {
        --main-text-color: #dddedd;
        --main-focus-color: #00853c;
        --main-border-color: #575e59;
        --main-clip-color: #565956;
        --main-gray-color: #a1a1aa;
        --main-hover-color: #00a94c;
        --main-avatar-filter: brightness(0.72) contrast(1.44);
        --main-polygon-url: url("../icons/main/polygon-dark.svg");
        --main-bg-gradient-1: radial-gradient(circle,
                #585e59 0%, #464746 90%, #585e59 100%);
        --main-bg-gradient-2: linear-gradient(to bottom,
                #272927 20%, #252725 100%);
    }
}

main .container {
    width: 100%;
    height: max(calc(100vh - 102px), 128px);
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    align-items: safe center;
    text-align: center;
    overflow: hidden auto;
    scroll-behavior: smooth;
    color: var(--main-text-color);
    background-blend-mode: soft-light;
    background-image: var(--main-bg-gradient-1),
        var(--main-bg-gradient-2)
}

main .container img {
    width: min(35vh, clamp(128px, min(20vw), 200px));
    min-width: 102px;
    height: auto;
    aspect-ratio: 1;
    filter: var(--main-avatar-filter);
}

main .container h1 {
    font-size: clamp(26px, 4vw, 39px);
    font-weight: 600;
    margin: 10px 10px;
    padding: 0;
    letter-spacing: 0;
}

main .container p {
    margin: 4px 4px;
    padding: 0;
    font-size: clamp(15px, 2.3vw, 22px);
    letter-spacing: 2px;

}

main .container .links {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 36px;
}

main .container .links a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    min-width: clamp(20px, 16vw, 30px);
}

main .container .links a,
main .container button {
    width: clamp(55px, 8.2vw, 80px);
    font-size: clamp(15px, 1.8vw, 18px);
    height: auto;
    aspect-ratio: 2 / 1;
    margin: 2px;
    padding: 0;
    cursor: pointer;
    color: inherit;
    background-color: inherit;
    border: 1px solid var(--main-border-color);
    transition: font-weight 0.25s ease;
}

main .container .links a:hover,
main .container a.login:hover,
main .container button:hover {
    color: var(--main-hover-color);
    font-weight: bold;
}

main .container a:focus-visible,
main .container button:focus-visible {
    outline: 2px solid var(--main-focus-color);
    color: var(--main-hover-color);
    outline-offset: -2px;
    border-radius: 2px;
}

main .container a.login,
main .container button.login {
    margin-top: 20px;
    width: min(80vw, clamp(172px, 25.5vw, 248px));
    aspect-ratio: 6 / 1;
    letter-spacing: 2px;
    transition: color 0.25s ease;
}

main .container a.login {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: clamp(15px, 1.8vw, 18px);
    border: 1px solid var(--main-border-color);
    color: inherit;
}

main .container a.login:hover {
    font-weight: normal;
}

main .container a.login:focus-visible {
    color: var(--main-hover-color);
}

main .container .more {
    display: flex;
    justify-content: center;
    align-items: center;
}

main .container a.about {
    margin-top: 12px;
    font-size: clamp(14px, 1.8vw, 18px);
    color: var(--main-gray-color);
    text-decoration: none;
}

main .container a.about:hover {
    text-decoration: underline;
}

main .container a.about:focus-visible {
    outline-offset: 2px;
}

main .container .content {
    position: relative;
    max-width: 100vw;
    padding: 60px min(120px, 12vw);
    background: transparent;
    z-index: 1;
}

main .container .content::before {
    position: absolute;
    content: "";
    inset: 0;
    background-position: 50% 58%;
    background-image: var(--main-polygon-url);
    background-repeat: no-repeat;
    animation: an-polygon 0.75s ease-in-out;
    transition: background-image 0.25s ease;
    opacity: 0.7;
    z-index: -1;
}

main .container .content:hover::before {
    opacity: 0.8;
}

@keyframes an-polygon {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 0.7;
    }
}

@media (max-width: 500px) {
    main .container .content::before {
        background-image: none;
        border-left: 1px solid var(--main-clip-color);
        border-right: 1px solid var(--main-clip-color)
    }
}