@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
    --icrpf-primary: #8ce1f4;
    --icrpf-secondary: #e1f3fb;
    --icrpf-bgclr: #00a5df;

    --icrpf-font: 'Bai Jamjuree';

    --icrpf-bg: gray;
    --icrpf-bgpos: center;
    --icrpf-bgsize: cover;

    --icrpf-pic: gray;
    --icrpf-pos: center;
    --icrpf-size: cover;
}

#IcarusProfile { position: relative; }
#IcarusProfile * { box-sizing: border-box; }

#IcarusProfile a[href="https://discord.com/users/625292873914515456/"] {
    height: 12px;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
}

#IcarusProfile a[href="https://discord.com/users/625292873914515456/"] ~ div:first-child { position: relative; }
  
#IcarusProfile::after {
    display: block;
    content: "z";
    font-family: 'Courier New', Courier, monospace;
    font-size: x-small;
    color: gray !important;
    width: 100%;
    text-align: center;
}
  
#IcarusProfile:hover::after { content: "zzzcode"; }

#IcarusProfile {
    .icrpf-box {
        width: 100%;
        font-family: 'Bai Jamjuree', serif;
        font-size: clamp(13px, 1vw, 17px);
        color: #fff;

        .icrpf-flex {
            width: 100%;
            display: flex;
            flex-direction: row;

            .icrpf-pic {
                flex: 2;
                padding-inline-start: 2.5%;
                padding-block-start: 5%;

                img {
                    width: 100%;
                    user-select: none;
                    pointer-events: none;
                    -webkit-mask: linear-gradient(black 65%, transparent 95%);
                            mask: linear-gradient(black 65%, transparent 95%);
                }
            }

            .icrpf-info {
                flex: 3;
                position: relative;
                padding: 5%;
                padding-block-end: 0;

                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    right: 0;

                    width: 100%;
                    aspect-ratio: 1;
                    background: var(--icrpf-bg) var(--icrpf-bgpos)/var(--icrpf-bgsize) no-repeat;
                    -webkit-mask: radial-gradient(circle at 60% 40%, black 50%, transparent 70%), linear-gradient(black 0 0) top right/50% 50% no-repeat;
                            mask: radial-gradient(circle at 60% 40%, black 50%, transparent 70%), linear-gradient(black 0 0) top right/50% 50% no-repeat;
                    opacity: 0.15;
                }

                .icrpf-img {
                    position: absolute;
                    top: min(1.5vw, 28px);
                    right: min(1.5vw, 28px);

                    width: 25%;
                    aspect-ratio: 3/4;
                    background: var(--icrpf-pic) var(--icrpf-pos)/var(--icrpf-size) no-repeat, var(--icrpf-bgclr);
                    border: 1px solid #333;
                }

                .icrpf-grid {
                    position: relative;
                    max-width: 70%;

                    display: grid;
                    grid-template-columns: fit-content(50%) fit-content(50%);
                    gap: clamp(13px, 1vw, 17px) 5%;

                    line-height: 1.2;

                    .icrpf-name {
                        grid-column: 1/3;
                        font-family: var(--icrpf-font), sans-serif;
                        font-size: clamp(26px, 2vw, 34px);
                    }

                    div:nth-child(even) {
                        align-self: end;

                        t {
                            display: block;
                            font-size: clamp(9px,0.8vw,13px);
                            color: var(--icrpf-secondary);
                        }

                        b { color: var(--icrpf-primary); }
                    }

                    div:nth-child(odd) {
                        align-self: end;
                        text-align: end;
                    }
                }
            }
        }

        .icrpf-flex.rev {
            flex-direction: row-reverse;

            .icrpf-pic {
                padding-inline-start: 0;
                padding-inline-end: 2.5%;
            }

            .icrpf-info::before {
                right: unset;
                left: 0;
                -webkit-mask: radial-gradient(circle at 40% 40%, black 50%, transparent 70%), linear-gradient(black 0 0) top left/50% 50% no-repeat;
                        mask: radial-gradient(circle at 40% 40%, black 50%, transparent 70%), linear-gradient(black 0 0) top left/50% 50% no-repeat;

            }
        }

        .icrpf-section {
            display: flex;
            flex-direction: column;

            position: relative;
            width: 100%;
            margin-block: clamp(39px, 3vw, 51px);

            .icrpf-topic {
                line-height: 1.2;
                margin-block-end: clamp(13px, 1vw, 17px);

                t {
                    display: block;
                    font-size: clamp(9px,0.8vw,13px);
                    color: var(--icrpf-secondary);
                }

                b { color: var(--icrpf-primary); }
            }

            ul, ol { margin-block: 0; }

            .icrpf-content {
                display: flex;
                flex-direction: column;

                p { margin-block-end: 0; }
                p:first-child { margin-block-start: 0; }
            }
        }

        .icrpf-rel {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: clamp(13px, 1vw, 17px);

            .icrpf-person {
                display: grid;
                grid-template-columns: 100px 1fr;
                column-gap: clamp(13px, 1vw, 17px);

                .icrpf-pic {
                    width: 100%;
                    aspect-ratio: 1;
                    background: var(--icrpf-pic) var(--icrpf-pos)/var(--icrpf-size) no-repeat;
                    border: 1px solid #333;
                }

                .icrpf-info {
                    display: flex;
                    flex-direction: column;
                    line-height: 1.2;

                    b { color: var(--icrpf-primary); }
                    hr {
                        width: 100%;
                        margin-block: clamp(6.5px, 0.5vw, 8.5px);
                        background: var(--icrpf-secondary);
                    }
                }
            }
        }

        .icrpf-pad {
            padding-inline: 5%;

            .icrpf-section:first-child { margin-block-start: 0; }
            .icrpf-section:last-child { margin-block-end: 0; }
        }
    }
}