/************************/
/* MARK: Color Scheme
/************************/


:root {
    color-scheme: light dark party;
    /* replace with transparent */
    --text-color-regular: black; 
    --text-color-transparent: transparent;
	--background: #C8C3BD;
    --font-heading: 'Gravitas One', impact, monospace;
    --font-body: Courier, monospace, Arial;

    --border: 1.5px solid black;

    /* still replace in other modes */
    --speech-bubble: white;
    --speech-bubble-text: black;
    --hair-color: #F4A112;
    --skin-color: #F6CBAE;
    --tshirt-color: black;
    --tshirt-text: rgb(0, 255, 217);
    --necklace-color: black;
    --button-color: rgb(28, 246, 254);

    --pet-box: #ffd096;
    --pet-shadow1: black;
    --pet-shadow2: brown;
    --pet-color: deeppink;
}

/* how can I combine both media prefers color scheme and the :has selector.. */
/* @media (prefers-color-scheme: dark) {
	html {
        --text-color-regular: white;
        --background: black;
        --border: 1.5px solid black;
        --speech-bubble: #7a4300;
        --speech-bubble-text: white;
        --hair-color: rgb(0, 0, 164);
        --skin-color: #f8b88d;
        --eye-color: brown;
        --tshirt-color: black;
        --tshirt-text: rgb(0, 255, 217);
        --necklace-color: black;
        --button-color: rgb(0, 0, 164);

        --pet-box: #ffab43;
        --pet-shadow1: white;
        --pet-shadow2: rgb(255, 65, 65);
	}
} */

    :has(#darkMode:checked) {
    --text-color-regular: white;
	--background: black;
    --border: 1.5px solid black;

    /* still replace in other modes */
    --speech-bubble: #7a4300;
    --speech-bubble-text: white;
    --hair-color: rgb(0, 0, 164);
    --skin-color: #f8b88d;
    --eye-color: brown;
    --tshirt-color: black;
    --tshirt-text: rgb(0, 255, 217);
    --necklace-color: black;
    --button-color: rgb(0, 0, 164);

    --pet-box: #ffab43;
    --pet-shadow1: white;
    --pet-shadow2: rgb(255, 65, 65);
    

    
}

/* only text mode, idk how to do this yet */
/* :has(#textMode:checked) {
    --text-color-regular: yellow;
	--background: blue;
} */

/************************/
/* MARK: General
/************************/


body {
    /* change this for transparent text color */
    color: var(--text-color-transparent);
    button, select {
        color: var(--text-color-transparent);
    }

    /* general styling */
    background: var(--background);
    font-family: var(--font-body);
    display: grid;
    grid-template-rows: max-content max-content 10rem 15rem;
    justify-items: center;
    word-break: break-all;

    /* for design only, enable again for text style */
    user-select: none;

    button, input, details {
        cursor: pointer;
    }

    > header {
        color: var(--text-color-regular);
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}


/************************/
/* MARK: Header
/************************/

header {
    display: grid;
    text-align: center;
    justify-items: center;
    grid-template-rows: max-content max-content 2fr  2fr 2fr 2fr 1fr;
    grid-template-columns: 1fr;
    margin-bottom: 1em;

    fieldset {
        border: none;
        display: flex;
        justify-content: center;
        gap: 1em;
        

        input {
            margin: 0;;
        }

        legend {
            margin-left: auto;
            margin-right: auto;
        }
    }

    /* speech bubble */
    #quote {
        background: var(--speech-bubble);
        padding: 3em;
        border-radius: 50%;
        grid-row: 3/7;
        grid-column: 1/2;
        max-width: 15em;
        margin-top: 1em;
        word-break: normal;

        color: var(--speech-bubble-text);
    }

    /* speech bubble triangle */
    #quotetriangle {
        width: 0; 
        height: 0; 
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 30px solid var(--speech-bubble);
        grid-row: 5/8;
        grid-column: 1/2;
        align-self: end;

    }
}



/************************/
/* MARK: Head
/************************/

/* head */
#head {
    background-color: var(--hair-color);
    position: relative;
    /* grid */
    display: grid;
    justify-items: center;
    grid-template-rows: 1rem 1rem 1rem max-content max-content;

    /* own grid alignment */
    grid-column: 3/10;
    grid-row: 1/2;
    
    /* layout */
    width: 12rem;
    border-radius: 6rem 6rem 0 0;
    height: max-content;
    margin-bottom: 0;

    h2 {
        visibility: hidden;
        width: 0;
        height: 0;
    }

    /* bangs */
    details {
        background-color: var(--hair-color);
        width: 45%;
        height: fit-content;
        font-size: 0.8em;

        position: relative;
        z-index: 200;

        grid-row: 2/4;
        grid-column: 1/2;


        /* doesn't work in Safari */
        summary::marker {
            content: '🦋';
            color: black;
        }

        p {
            position: absolute;
            font-size: 0.5em;
            background-color: var(--hair-color);
            margin: 0;
            width: 100%;
        }
    }

    /* face */
    form {
        background-color: var(--skin-color);
        aspect-ratio: 1 / 1;
        width: 80%;
        height: auto;
        border-radius: 6rem;

        position: relative;
        z-index: 100;

        grid-row: 3/5;
        grid-column: 1/2;

        fieldset {
            border: none;

            legend {
                font-size: 80%;
            }

            &:first-of-type{
                padding-bottom: 0;
            }


            /************************/
            /* MARK: Eyes & Glasses
            /************************/
            &:first-of-type div {
                display: grid;

                grid-template-columns: 2.5fr 0.3fr 2.5fr;
                grid-template-rows: 1fr;

                justify-items: center;
                align-items: center;

                /* eyes */
                input {
                    position: relative;
                    z-index: 400;
                    margin: 0;
                    width: 20%;

                    appearance: none;
                    aspect-ratio: 1/1;
                    background: black;
                    border-radius: 50%;
                    

                    &:first-of-type {
                            grid-column: 1/2;
                            grid-row: 1/2;
                        }

                    &:nth-of-type(2) {
                        grid-column: 3/4;
                        grid-row: 1/2;
                    }

                    /* winky eyes */
                    &:checked {
                        background: none;
                        height: 15%;
                        width: 25%;
                        margin-top: 10%;
                        border: var(--border);
                        border-bottom-right-radius: 4rem;
                        border-bottom-left-radius: 4rem;
                        border-top: none;
                    }
                }

                /* glasses */
                label {
                    border: var(--border);
                    border-radius: 6rem;
                    font-size: 0.41rem;
                    aspect-ratio: 1 / 1;
                    position: relative;
                    z-index: 300;

                    &:first-of-type {
                        grid-column: 1/2;
                        grid-row: 1/2;

                        &::before {
                            position: absolute;
                            content: " ";
                            background: black;
                            width: 2.1em;
                            height: 1.5px;
                            top: 1.7rem;
                            left: -0.9rem;
                        }

                        &::after {
                            position: absolute;
                            content: " ";
                            background: black;
                            width: 1.4em;
                            height: 1.5px;
                            top: 1.7rem;
                            right: -0.6rem;
                        }

                        
                    }

                    &:nth-of-type(2) {
                        grid-column: 3/4;
                        grid-row: 1/2;

                        &::after {
                            position: absolute;
                            content: " ";
                            background: black;
                            width: 2.1em;
                            height: 1.5px;
                            top: 1.7rem;
                            right: -0.9rem;
                        }
                    }
                }
            }


            /************************/
            /* MARK: Mouth & Nose
            /************************/
            &:nth-of-type(2) {
                height: 40%;
                margin: 0;
                padding: 0;

                legend {
                    height: 0px;
                }

                div {
                    display: grid;
                    grid-template-rows: 1fr 1.5fr;
                    height: 100%;
                    justify-items: center;

                    label {
                        height: 0;
                    }

                    /* mouth & nose */
                    input {
                        position: relative;
                        margin: 0;

                        appearance: none;
                        
                        border: var(--border);
                        border-bottom-right-radius: 4rem;
                        border-bottom-left-radius: 4rem;
                        border-top: none;

                        /* nose */
                        &:first-of-type {
                            grid-row: 1/2;
                            width: 10%;
                            height: 30%;
                            

                            &::after {
                                position: absolute;
                                content: "";
                                border: var(--border);
                                border-top: none;
                                width: 0.5em;
                                height: 0.2em;
                                border-color: var(--hair-color);
                                border-bottom-right-radius: 4rem;
                                border-bottom-left-radius: 4rem;
                                bottom: -0.3rem;
                                left: 15%;
                                
                                
                            }
                        }
                        /* mouth */
                        &:nth-of-type(2) {
                            grid-row: 2/3;
                            height: 40%;
                            width: 40%;
                        }

                        &:checked {
                            transform: rotate(180deg)
                        }
                    }


                }
            }
        }

    }

    /* neck */
    > p {
        background: var(--skin-color);
        width: 20%;
        height: 3rem;
        margin: -1rem 0 0 0;
        border-right: var(--border);
        font-size: 0.1rem;
    }

}


/************************/
/* MARK: Upper Body
/************************/

main {
    display: grid;
    grid-template-rows: 1fr 20rem;
    grid-template-columns: repeat(11, 1fr);
    justify-items: center;
    width: 20rem;

    h1, h2, h3, h4, h5, h6 {
        margin: 0;
    }

    /* necklace/h2 */
    #body {
        background: var(--necklace-color);
        width: 3rem;
        height: 0.3rem;
        margin: 0;
    
        grid-column: 6/7;
        grid-row: 2/3;

        position: relative;
        z-index: 300;
        font-size: 0.1rem;
    }
    
    /* torso */
    > section {
        /* grid */
        grid-column: 3/10;
        grid-row: 2/3;
        display: grid;
        align-items: start;
        align-content: start;

        /* styling */
        background: var(--skin-color);
        width: 100%;
        
        
        /* shirt straps & pendant */
        > div:first-of-type {
            width: 102%;
            height: max-content;
            position: relative;
            z-index: 200;
            background: var(--skin-color);
            justify-self: center;

            display: grid;
            grid-template-columns: 1fr 1fr 4fr 1fr 1fr;
            grid-template-rows: 1fr;

            /* pendant */
            h3 {
                grid-column: 3/4;
                font-size: 0.1rem;
                background: var(--hair-color);
                aspect-ratio: 1/1;
                width: 0.5rem;
                height: 0.5rem;
                align-self: start;
                justify-self: center;
                margin-top: 0.3rem;
                border-radius: 50%;
            }

            /* straps */
            button {
                grid-row: 1/2;
                font-size: 0.1rem;
                height: 4rem;
                border: none;
                background: var(--tshirt-color);

                &:first-of-type {
                    grid-column: 2/3;
                }

                &:nth-of-type(2) {
                    grid-column: 4/5
                }
            }
        }

        /* t-shirt */
        div:nth-of-type(2) {
            background: var(--tshirt-color);
            height: clamp(10rem, 11rem, 12rem);
            
            label {
                font-size: 0.2rem;
            }

            blockquote {
                word-break: normal;
                font-family: var(--font-heading);
                font-size: 0.8rem;
                color: var(--tshirt-text);
                margin: 0;
                padding: 2rem 2rem 2rem 3rem;
                transform: skew(15deg);
            }
        }
    }
    
    
    /********************************/
    /* MARK: Arms
    /********************************/
    
    /* arms */
    aside {
        font-size: 0.5rem;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 12rem 12rem 3rem;
        
        

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        /* upper arm */
        .upperarm {
            background: var(--skin-color);
            border-right: var(--border);
            position: relative;
            z-index: 100;

            .movearmbutton{
                border: none;
                background: none;
                height: 100%;
            }
        }


        /* Lower arm */
        .lowerarm {
            background: var(--skin-color);
            display: grid;
            grid-template-rows: 12rem 2.5rem;
            border-right: var(--border);
            position: relative;
            z-index: 0;

            .hand {
                background: var(--skin-color);
                border-right: var(--border);
                position: relative;
                height: 2.5rem;

                ul {
                    max-height: 2.5rem;
                    display: grid;
                    grid-template-rows: 2.5rem 3rem;
                }
            }

            
            

            /* fingers */

            .fingercontainer {
                
                .fingers {
                    font-size: 0.2rem;
                    display: flex;
                    height: 3rem;
                    gap: 0.2rem;
                    
                    
    
                    .finger {
                        background: var(--skin-color);
                        flex: 1 1 0.2rem;
                        border-radius: 0 0 1rem 1rem;
    
                        &:last-of-type {
                            border-right: var(--border);
                        }
                    }
                }
            }
        }

        /* left arm */
        &#leftarm {

            /* grid */
            grid-column: 1/3;
            grid-row: 2/3;

            .upperarm {
                border-top-left-radius: 3rem;
                
            }

            .lowerarm {
                .thumb::after { 
                    background: var(--skin-color);
                    content: "";
                    position: absolute;
                    width: 0.7rem;
                    height: 2.5rem;
                    top: 1rem;
                    left: -0.7rem;
                    border-radius: 1rem 0 1rem 1rem;
                    
                
                    }
            }

        }

        /* right arm */
        &#rightarm {
            /* grid */
            grid-column: 10/12;
            grid-row: 2/3;

            .upperarm {
                border-top-right-radius: 3rem;
            }

            .lowerarm {
                .thumb::after {
                    background: var(--skin-color);
                    content: "";
                    position: absolute;
                    width: 0.7rem;
                    height: 2.5rem;
                    top: 1rem;
                    right: -0.7rem;
                    border-radius: 0 1rem 1rem 1rem;
                    border-right: var(--border);
                }
            }
        }

    }
}

/************************/
/* MARK: Footer
/************************/

footer {
    color: var(--text-color-regular);
    grid-row: -2/-1;
    word-break: normal;
    display: grid;
    justify-items: center;
    
    h2 {
        max-width: 40rem;
        text-align: center;
    }

    button {
        border: none;
        border-radius: 1em;
        background: var(--button-color);
        color: var(--text-color-regular);
        padding: 0 1em;
        box-shadow: var(--text-color-regular) 0.5em 0.5em;
        height: 4em;
        margin-bottom: 1em;

        &:active {
            transition: 0.2s;
            transform: translate(0.5em, 0.5em);
            box-shadow: none;
        }
    }

    /************************/
    /* MARK: Petcontainter
    /************************/

    .petcontainer {
        margin-top: 3em;
        width: 80%;
        height: 20em;

        list-style: none;
        padding: 0;

        position: relative;
        background: var(--pet-box);
        box-shadow: -30px -30px var(--pet-shadow2) inset, -30px -30px var(--pet-shadow1);

        .classmate {
            position: absolute;
            font-size: small;
            font-weight: bold;
            aspect-ratio: 1/1;
            border-radius: 50%;
            padding: 1rem;
            width: min-content;


            display: flex;
            align-items: center;      
            justify-content: center;
            gap: 0.5rem;

            /* view transition */
            view-transition-name: match-element;
			view-transition-class: randomClassmate;

            span {
                background: black;
                border: 3px white solid;
                border-radius: 1rem;
                aspect-ratio: 1/1;
                width: 0.5rem;
            }

            &::before {
                background: inherit;
                content: "";
                position: absolute;
                height: 10%;
                width: 15%;
                top: 10%;
                left: 0;
                border-radius: 1rem 1rem 0 0;
            }

            &::after {
                background: inherit;
                content: "";
                position: absolute;
                height: 10%;
                width: 15%;
                top: 10%;
                right: 0;
                border-radius: 1rem 1rem 0 0;
            }
            
            
        }
    }


}


/************************/
/* MARK: Viewtransitions
/************************/

/* more view transition */
::view-transition-group(*) {
	animation-fill-mode: both;
}

::view-transition-new(.randomClassmate):only-child {
	animation-name: scale-in;
	animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
	animation-duration: 0.4s;
}

@keyframes scale-in {
	from {
		scale: 0;
	}
	to {
		scale: 1;
	}
}


                
/* Arm View Transition */

/* view transition */
#leftarm, #leftarm .lowerarm, #rightarm, #rightarm .lowerarm {

    view-transition-name: match-element;

}


.moveLeftArm {
    transform: rotate(90deg);
    transform-origin: 100% 10%;
    position: relative;
    z-index: 100;

    @media (max-width: 639px) {
        transform: rotate(-20deg);
        transform-origin: 100% 0%;
    }
}

.moveLowerLeftArm {
    transform: rotate(-90deg);
    transform-origin: 46% 13%;
    border-top-left-radius: 3rem;
    
}

.moveRightArm {
    transform: rotate(-90deg);
    transform-origin: 10% 10%;
    position: relative;
    z-index: 100;

    @media (max-width: 639px) {
        transform: rotate(20deg);
        transform-origin: 0% 0%;
    }
}

.moveLowerRightArm {
    transform: rotate(-90deg);
    transform-origin: 46% 13%;
    border-top-left-radius: 3rem; 

    @media (max-width: 639px) {
        transform: rotate(90deg);
        transform-origin: 46% 13%;
        border-top-left-radius: 0rem; 
        border-top-right-radius: 3rem; 
    }
}