:root{

    --size-0: 0.25rem;
    --size-1: 0.5rem;
    --size-2: 0.75rem;
    --size-3: 1rem;
    --size-4: 1.5rem;
    --size-5: 2rem;
    --size-6: 3rem;

    --black: #171613;
    --white: #FFFFFF;

    --m-red: #FF0707;
    --m-blue: #0081C3;
    --m-yellow: #FFE501;
    --m-dark-grey: #1d1d1d;

    --m-border-stroke: var(--m-dark-grey) solid var(--size-1);

    --k-blue-0: #63849F;
    --k-blue-1: #16285A;
    --k-blue-2: #80BFE7;
    --k-yellow-0: #D1C07E;
    --k-yellow-1: #CAB139;
    --k-yellow-2: #C47405;
    --k-pink-0: #8C879D;
    --k-pink-1: #AB6E71;
    --k-red: #8F271D;
    --k-black: #272727;
}
body{
    width: 100vw;
    height: 100vh;
    background-color: var(--k-black);
    text-wrap: pretty;
    text-align: center;
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

main{

    #container{
        position: absolute;
        width: 80%;
        height: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        @media (width > 700px) {
            width: 60%;
        }
        @media (width > 1000px) {
            width: 40%;
        }

        @media (width > 1600px) {
            width: 30%;
        }


        display: flex;
        flex-direction: column;
        gap: var(--size-5);

        #art{
            aspect-ratio: 1;
            #kandinsky, #mondrian {
                position: absolute;
                width: 100%;
                height: auto;
                aspect-ratio: 1;
            }
        }
        #instruction{
            color: var(--white);
            &.remove-instruction{
                display:none;
            }

            animation-name: instruction;
            animation-timing-function: b=cubic-bezier(0.165, 0.84, 0.44, 1);
            animation-iteration-count: infinite;
            animation-duration: 3000ms;
        }
        #reset{
            display: none;
            position: relative;
            margin: auto;
            width: max-content;
            color: var(--black);
            background-color: var(--white);
            &.show-reset{
                display: block;
            }
        }
    }

    button, #instruction{
        cursor: pointer;
        padding-block: var(--size-2);
        padding-inline: var(--size-3);
        color: var(--white);
        font-size: var(--size-4);
    }
    a:hover, button:hover{
            opacity: 0.7;
            transition: opacity 300ms ease;
    }

    #about{
        position: absolute;
        inset-inline-end: var(--size-5);
        inset-block-start: var(--size-5);
            svg {
                    width: var(--size-4);
                    height: var(--size-4);
                    fill: var(--white);
                }
        }

    dialog{
        height: auto;
        width: 90%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        aspect-ratio: 1;
        padding: var(--size-5);
        border: var(--m-border-stroke);

        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--size-6);

        background-color: var(--white);
        color: var(--black);

        @media (width > 500px) {
            width: 65%;
        }

        @media (width > 800px) {
            width: 40%;
        }

        @media (width > 1600px) {
            width: 30%;
        }

        h1{
            font-size: var(--size-5);
        }

        a{
            font-style: italic;
            opacity: 0.7;
        }
        a:hover{
            opacity: 1;
        }

        
        #main-info{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--size-5);

            a{
                font-style: italic;
                color: var(--m-red);
            }
            a:hover{
                color: var(--black);
            }
            p:nth-child(1){
                font-size: var(--size-4);
            }
        }

        #close{
            position: absolute;
            inset-inline-end: var(--size-5);
            inset-block-start: var(--size-5);
            padding-block: var(--size-1);
            svg {
                    width: var(--size-4);
                    height: var(--size-4);
                    fill: var(--black);
                }
        }

        &[open] { display: flex}

        &::backdrop {
            background-color: rgb(0 0 0 / 66%); /* A dark overlay. */
            backdrop-filter: blur(var(--size-4));
            pointer-events: none; /* Let clicks pass through to our `document` listener. */
            
	    }
    }

    #kandinsky {
        z-index: -1;
        
        pointer-events: none;
        div{
            position: absolute;
            width: var(--size-4);
            height: var(--size-4);
            border-radius: 100%;
            background-color: #71af06;
            aspect-ratio: 1;
        }
        .burn{
            mix-blend-mode: exclusion;

        }
        .large{
            width: 15%;
            height: auto;
            background-color: var(--k-blue-2);
        }
        .medium{
            z-index: 1;
            width: 10%;
            height: auto;
            background-color: var(--k-yellow-0);
        }
        .small{
            width: 5%;
            height: auto;
            background-color: var(--k-pink-0);
        }

        .xsmall{
            width: 2.5%;
            height: auto;
            background-color: var(--black);
            filter: drop-shadow(0.01rem 0.01rem 0.1rem var(--k-blue-0))        
                    drop-shadow(0.01rem -0.01rem 0.1rem var(--k-blue-0))
                    drop-shadow(-0.01rem 0.01rem 0.1rem var(--k-blue-0)) drop-shadow(-0.01rem -0.01rem 0.1rem var(--k-blue-0));
        }
        

        #xlg-1{
            z-index: 0;
            top: 20%;
            left: 10%;
            width: 40%;
            height: auto;
            background-color: var(--k-blue-1);
            filter: drop-shadow(0.25rem 0.25rem 0.2rem var(--white)) drop-shadow(0.25rem -0.25rem 0.2rem var(--white))
                    drop-shadow(-0.25rem 0.25rem 0.5rem var(--white)) drop-shadow(-0.25rem -0.25rem 0.2rem var(--white));
            
        }
        #xlg-2{
            z-index: 1;
            top: 23%;
            left: 12%;
            width: 25%;
            height: auto;
            background-color: var(--black);
            filter: drop-shadow(0.1rem 0.1rem 0.2rem var(--k-blue-0));
        }

        #xlg-3{
            top: 70%;
            left: 45%;
            width: 20%;
            height: auto;
            background-color: var(--k-pink-1);
            filter: drop-shadow(0.1rem 0.1rem 0.2rem var(--k-yellow-1));
        }

        #lg-1{
            top: 50%;
            left: 20%;
        }
        #lg-2{
            top: 60%;
            left: 50%;
            background-color: var(--k-pink-1);  
        }
        #lg-3{
            top: 80%;
            left: 80%;
            background-color: var(--k-red);  
        }
        #lg-4{
            top: 80%;
            left: 20%;
            background-color: var(--k-yellow-1);  
        }
        #lg-5{
            top: 20%;
            left: 80%;
            background-color: var(--k-blue-0);  
        }
        #lg-6{
            top: 20%;
            left: 20%;
            background-color: var(--k-yellow-2);  
        }
        #md-1{
            top: 30%;
            left: 50%;
            background-color: var(--k-yellow-1);  
        }
        #md-2{
                top: 70%;
                left: 80%;
                background-color: var(--k-yellow-2);  
        }
        #md-3{
                top: 90%;
                left: 20%;
                background-color: var(--k-yellow-2);  
        }
        #md-4{
                top: 10%;
                left: 10%;
                background-color: var(--k-blue-0);  
        }
        #sm-1{
                top: 80%;
                left: 20%;
                background-color: var(--k-pink-0);  
        }
        #sm-2{
                top: 10%;
                left: 80%;
                background-color: var(--k-red);  
        }
        #sm-3{
                top: 80%;
                left: 80%;
                background-color: var(--k-blue-0);  
        }
        #sm-4{
                top: 10%;
                left: 20%;
                background-color: var(--k-yellow-0);  
        }
        #sm-5{
                top: 50%;
                left: 80%;
                background-color: var(--k-pink-1);  
        }
        #sm-6{
                top: 50%;
                left: 10%;
                background-color: var(--k-blue-0);  
        }

        #xsm-1{
                top: 90%;
                left: 10%;
        }
        #xsm-2{
                top: 90%;
                left: 80%;      
            }


    }

    #mondrian {
        background-color: transparent;
        cursor: pointer;
        border: var(--white) solid var(--size-2);

        display: grid;
        grid-template-areas: "upper right-strip"
                           "lower right-strip";
        grid-template-columns: 20fr 1fr;
        grid-template-rows: 5fr 2fr;

        #right-strip{
            grid-area:right-strip;
            display: grid;
            grid-template-rows: 5fr 2fr;
            #right-white{
                width: 100%;
                height: 100%;
                background-color: var(--white);
                border-block-end: var(--m-border-stroke);
            }
            #right-red{
                width: 100%;
                height: 100%;
                background-color: var(--m-red);
            }
        }
        #upper-half{
            grid-area: upper;
            border-block-end: var(--m-border-stroke);

            display: grid;
            grid-template-rows: 1fr 4fr;
            grid-template-areas: "a a a a a a a"
                               "b c c c c c c";

            #area-a{
                grid-area: a;
                display: grid;
                grid-template-areas: "a b c";
                grid-template-columns: 2fr 3fr 3fr;
                border-block-end: var(--m-border-stroke);
                #a-1, #a-2, #a-3{
                    border-inline-end: var(--m-border-stroke);
                    background-color: var(--white);
                }
                #a-1{
                    grid-area: a;
                }
                #a-2{
                    grid-area: b;
                }
                #a-3{
                    background-color: var(--m-yellow);
                }
                
            }

            #area-b{
                grid-area: b;
                border-inline-end: var(--m-border-stroke);
                display: grid;
                grid-template-rows: 2fr 3fr;
                grid-template-areas: "a"
                                   "b";

                #b-1, #b-2{
                    background-color: var(--white);
                }
                #b-1{
                    grid-area: a;
                    border-block-end: var(--m-border-stroke);
                }
                #b-2{
                    grid-area: b;
                }
            }

            #area-c{
                grid-area: c;
                display: grid;
                grid-template-areas: "a b";
                grid-template-columns: 3fr 2fr;
                #c-1{
                    grid-area: a;
                    display: grid;
                    grid-template-areas: "a a"
                                        "b b";
                    grid-template-rows: 6fr 2fr;
                    border-inline-end: var(--m-border-stroke);
                    #c-1-red{
                        grid-area: a;
                        background-color: var(--m-red);
                        border-block-end: var(--m-border-stroke);
                    }
                    #c-1-2{
                        grid-area: b;
                        display: flex;
                        flex-direction: row;

                        #c-1-2-black{
                            width: 50%;
                            height: 100%;
                            background-color: var(--black);
                        }
                        #c-1-2-white{
                            width: 50%;
                            height: 100%;
                            background-color: var(--white);
                        }
                }
            }
                #c-2{
                    grid-area: b;
                    display: grid;
                    grid-template-areas: "a a"
                                        "b c"
                                        "d d";
                    grid-template-rows: 3fr 3fr 2fr;
                    border-inline-end: var(--m-border-stroke);
                    #c-2-yellow{
                        grid-area: a;
                        background-color: var(--m-yellow);
                        border-block-end: var(--m-border-stroke);
                    }
                    #c-2-white, #c-2-white-l, #c-2-white-r{
                        background-color: var(--white);
                    }
                    #c-2-white-l{
                        grid-area: b;
                        border-inline-end: var(--m-border-stroke);
                    }
                    #c-2-white-r{
                        grid-area: c;
                    }
                    #c-2-white{
                        grid-area: d;
                        border-block-start: var(--m-border-stroke);
                    }

            }
            }
            }
        #lower-half{
                grid-area: lower;
                display: grid;
                grid-template-areas: "d e e f f f f"
                                   "d e e f f f f";
                                   
    
                #area-d{
                    grid-area: d;
                    background-color: var(--m-yellow);
                    border-inline-end: var(--m-border-stroke);
                }
    
                #area-e{
                    grid-area: e;
                    display: flex;
                    flex-direction: column;
                    border-inline-end: var(--m-border-stroke);
                    #e-black, #e-white{
                        width: 100%;
                        height: 50%;
                    }
                    #e-black{
                        background-color: var(--black);
                    }
                    #e-white{
                        background-color: var(--white);
                    }
    
                }
    
                #area-f{
                    grid-area: f;
                    width: 100%;
                    height: 100%;
                    border-inline-end: var(--m-border-stroke);
                    display: grid;
                    grid-template-rows: repeat(3, 1fr);
                    grid-template-columns: 1fr 2fr 4fr;
                    grid-template-areas: " a a b b b"
                                    "c c b b b"
                                     "d d d d d";
                    #f-white-sm, #f-black, #f-blue, #f-white-lg{
                        width: 100%;
                        height: 100%;
                    }
                    #f-white-sm, #f-white-lg{
                        background-color: var(--white);
                    }
    
                    #f-white-sm{
                        grid-area: a;
                        border-inline-end: var(--m-border-stroke);
                    }
                    #f-black{
                        grid-area:c;
                        background-color: var(--black);
                     }
                    #f-white-lg{
                        grid-area: d;
                        border-block-start: var(--m-border-stroke);
                    }
                    #f-blue{
                        background-color: var(--m-blue);
                        grid-area: b;
                    }
                }
        }
        div{
            &.show{
                opacity: 0;
            }
        }
        
        div:hover{
            opacity: 0.3;
            transition: opacity 300ms ease;
        }
        
    }

   
    }

 @keyframes instruction {

        0%{
            opacity: 0;
        }
        30%{
            opacity: 1;
        } 
        70%{
            opacity: 1;
        }
        100%{
            opacity: 0;
        }
        
    }