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

:root
{
    color-scheme: light dark;
    --dark-color-bg: hsl(222, 52%, 22%);
    --dark-color-left-panel-bg: hsla(196, 100%, 50%, 0.1);
    --dark-color-profile-bg: hsla(222, 85%, 40%, 0.2);
    --dark-color-right-panel-card-bg: hsla(196, 100%, 77%, 0.4);
    --dark-color-link: hsl(205, 100%, 70%);
    --dark-color-link-visited: hsl(205, 100%, 40%);
    --dark-color-text-important-less: hsl(222, 55%, 87%);
    --dark-color-text-important-less-less: hsl(222, 12%, 50%);
    --dark-color-scrollbar: hsl(222, 100%, 6%);

    --light-color-bg: hsl(90, 52%, 32%);
    --light-color-left-panel-bg: hsla(87, 100%, 57%, 0.1);
    --light-color-profile-bg: hsla(89, 100%, 50%, 0.2);
    --light-color-right-panel-card-bg: hsla(74, 100%, 76%, 0.4);
    --light-color-link: hsl(73, 100%, 80%);
    --light-color-link-visited: hsl(73, 100%, 50%);
    --light-color-text-important-less: hsl(90, 55%, 97%);
    --light-color-text-important-less-less: hsl(90, 12%, 60%);
    --light-color-scrollbar: hsla(90, 100%, 16%);

    --theme-color-bg: light-dark(var(--light-color-bg), var(--dark-color-bg));
    --theme-color-left-panel-bg: light-dark(var(--light-color-left-panel-bg), var(--dark-color-left-panel-bg));
    --theme-color-profile-bg: light-dark(var(--light-color-profile-bg), var(--dark-color-profile-bg));
    --theme-color-right-panel-card-bg: light-dark(var(--light-color-right-panel-card-bg), var(--dark-color-right-panel-card-bg));
    --theme-color-link: light-dark(var(--light-color-link), var(--dark-color-link));
    --theme-color-link-visited: light-dark(var(--light-color-link-visited), var(--dark-color-link-visited));
    --theme-color-text-important-less: light-dark(var(--light-color-text-important-less), var(--dark-color-text-important-less));
    --theme-color-text-important-less-less: light-dark(var(--light-color-text-important-less-less), var(--dark-color-text-important-less-less));
    --theme-color-scrollbar: light-dark(var(--light-color-scrollbar), var(--dark-color-scrollbar));

    --color-shadow: rgba(0, 0, 0, 0.35);
    --color-text-shadow: rgba(0, 0, 0, 0.7);
    --text-shadow: var(--color-text-shadow) 0 2px 3px;
    --box-shadow: 0 0 50px var(--color-shadow);
}

*
{
    transition: color 5s ease, background-color 5s ease, background 5s ease;
}

body
{
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    background-color: var(--theme-color-bg);
    color: white;
    font-family: JetBrains Mono, monospace;
    font-weight: 400;
    text-shadow: var(--text-shadow);

    background-size: cover;
    backdrop-filter: blur(20px) brightness(50%);

    &.dark-mode
    {
        background-image: url("./img/background_dark.webp");
    }

    &.light-mode
    {
        background-image: url("./img/background_light.webp");
    }
}

h1
{
    margin: unset;
}

a
{
    &:link
    {
        color: var(--theme-color-link);
    }

    &:visited
    {
        color: var(--theme-color-link-visited);
    }
}

.root
{
    display: grid;
    grid-template-columns: 630px auto;
    width: 100%;
    height: 100%;
}

.left-panel
{
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: larger;
    background: var(--theme-color-left-panel-bg);
    backdrop-filter: blur(50px);
    box-shadow: var(--box-shadow);

    .left-panel-contents
    {
        width: 430px;

        .profile
        {
            display: grid;
            grid-template-columns: auto auto;
            padding: 25px;

            background-color: var(--theme-color-profile-bg);
            border-radius: 70px;
            corner-shape: squircle;

            .profile-pfp
            {
                width: 160px;
                height: 160px;

                background-color: var(--color-shadow);
                box-shadow: 0 0 20px var(--color-shadow);
                border-radius: 99999px;
            }

            .profile-info
            {
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                margin-left: 20px;

                .profile-name
                {
                    font-size: 45px;
                    font-weight: 800;
                }

                .profile-handle
                {
                    margin: unset;
                    padding: unset;

                    color: var(--theme-color-text-important-less);
                }

                .profile-previously
                {
                    margin: unset;
                    padding: unset;

                    color: var(--theme-color-text-important-less-less);
                }
            }
        }

        .list
        {
            padding-left: 30px;
            padding-right: 30px;
            text-align: center;

            hr
            {
                margin-top: 30px;
                margin-bottom: 30px;
            }

            .list-element
            {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                text-align: right;

                .list-icon
                {
                    height: 50px;
                }

                p
                {
                    line-height: normal;
                }
            }

            .socials
            {
                display: flex;
                justify-content: center;
                gap: 10px;
                cursor: pointer;

                .socials-icon
                {
                    height: 35px;
                }
            }

            .bottom-text
            {
                margin-top: 20px;
                margin-bottom: 20px;

                font-size: 15px;
                color: var(--theme-color-text-important-less-less);
            }
        }
    }
}

.right-panel
{
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: x-large;

    .right-panel-card
    {
        width: 800px;
        height: 600px;
        padding: 40px;
        overflow: scroll;
        overflow-x: hidden;

        border-radius: 100px;
        corner-shape: squircle;
        background: var(--theme-color-right-panel-card-bg);
        backdrop-filter: blur(50px);
        box-shadow: var(--box-shadow);
        scrollbar-color: var(--theme-color-scrollbar) transparent;
    }
}