@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&family=Cinzel:wght@400..900&display=swap');

:root {
    --icrnm-bg: gray;
    --icrnm-pic: gray;
    --icrnm-posx: 75%;
    --icrnm-height: 500px;
}

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

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

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

#IcarusNewMoon {
    .newmoon-box {
        min-height: clamp(500px, 52vw, 680px);
        width: 800px;
        max-width: 100%;
        margin: auto;
        
        display: flex;
        
        font-family: 'Bai Jamjuree', sans-serif;
        font-size: clamp(13px, 1vw, 17px);
        color: #fff;

        .newmoon-role {
            position: relative;

            display: flex;
            flex-direction: column;
            row-gap: 2rem;

            flex: 3;
            background: black;
            border-radius: 2rem;

            padding: max(5vw, 5rem) max(4vw, 4rem);

            tpl, tpr, btl, btr {
                position: absolute;
                width: calc(50% - 32px);
                aspect-ratio: 1;
                background-image: var(--icrnm-bg);
                background-size: 200%;
                background-repeat: no-repeat;

                user-select: none;
                pointer-events: none;
            }

            tpl, btl {
                left: 32px;
                -webkit-mask: url(https://iili.io/KGtHn0F.png) center/contain no-repeat;
                        mask: url(https://iili.io/KGtHn0F.png) center/contain no-repeat;
            }

            tpr, btr {
                right: 32px;
                -webkit-mask: url(https://iili.io/KGtHoUg.png) center/contain no-repeat;
                        mask: url(https://iili.io/KGtHoUg.png) center/contain no-repeat;
            }

            tpl, tpr { top: 16px; }
            btl, btr { 
                bottom: 16px;
                transform: scaleY(-1);
            }

            tpl { background-position: top left; }
            tpr { background-position: top right; }
            btl { background-position: bottom left; }
            btr { background-position: bottom right; }

            mtl, mbl, mtr, mbr {
                position: absolute;
                width: 5.5%;
                aspect-ratio: 1;
                background: var(--icrnm-bg) center/200% no-repeat;
                border-radius: 50%;

                user-select: none;
                pointer-events: none;
            } 

            mtl, mbl {
                left: calc(32px - 1.75%);
                -webkit-mask: url(https://iili.io/KGbohBe.png) center/contain no-repeat;
                        mask: url(https://iili.io/KGbohBe.png) center/contain no-repeat;
            }
            
            mtr, mbr {
                right: calc(32px - 1.75%);
                -webkit-mask: url(https://iili.io/KGboWQ9.png) center/contain no-repeat;
                        mask: url(https://iili.io/KGboWQ9.png) center/contain no-repeat;
            }

            mtl, mtr { top: clamp(220px, 23vw, 300px); }
            mbl, mbr { bottom: clamp(220px, 23vw, 300px); }

            mbr + br { display: none; }

            &::before, &::after {
                content: "";
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                
                width: 6.625%;
                aspect-ratio: 1;
                background: var(--icrnm-bg) center/200% no-repeat;
                border-radius: 50%;

                user-select: none;
                pointer-events: none;
            }

            &::before {
                top: 5.5px;
                -webkit-mask: url(https://iili.io/KGyqE4s.png) center/contain no-repeat;
                        mask: url(https://iili.io/KGyqE4s.png) center/contain no-repeat;
            }

            &::after {
                bottom: 5.5px;
                -webkit-mask: url(https://iili.io/KM99XOF.png) center/contain no-repeat;
                        mask: url(https://iili.io/KM99XOF.png) center/contain no-repeat;
            }

            .newmoon-info {
                position: absolute;
                width: clamp(6px, 0.6vw, 10px);
                height: clamp(175px, 18vw, 250px);

                font-family: 'Cinzel', serif;
                font-style: italic;
                font-size: clamp(10px, 0.7vw, 13px);
                font-weight: bold;
                text-align: center;
                text-transform: uppercase;

                display: flex;
            }

            .newmoon-info.tl, .newmoon-info.tr {
                top: 36px;
                align-items: end;
            }

            .newmoon-info.bl, .newmoon-info.br {
                bottom: 36px;
                align-items: start;
            }

            .newmoon-info.tl, .newmoon-info.bl { left: 13px; }
            .newmoon-info.tr, .newmoon-info.br { right: 16px; }

            .newmoon-content { flex: 1; }

            hr {
                width: 40%;
                height: unset;
                aspect-ratio: 395/70;
                margin-inline: auto;
                margin-block: 0;
                background: var(--icrnm-bg) center/200% no-repeat;
                -webkit-mask: url(https://iili.io/KMHz9G2.png) center/contain no-repeat;
                        mask: url(https://iili.io/KMHz9G2.png) center/contain no-repeat;
            }
        }

        .newmoon-pic {
            width: calc(25% + 2rem);
            background: var(--icrnm-pic) var(--icrnm-posx) bottom/auto var(--icrnm-height) no-repeat;
            margin-inline-start: -2rem;
        }
    }
}