@font-face {
    font-family: 'BerlingLTStd-Italic';
    src: url('../fonts/BerlingLTStd-Italic.ttf') format('truetype');
    font-weight: italic;
    font-style: normal;
}

@font-face {
    font-family: 'FrutigerLTPro-Light';
    src: url('../fonts/FrutigerLTPro-Light.ttf') format('truetype');
    font-weight: Light;
    font-style: normal;
}

@font-face {
    font-family: 'FrutigerLTPro-BoldCn';
    src: url('../fonts/FrutigerLTPro-BoldCn.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    main {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        width: 100dvw;
        font-family: 'FrutigerLTPro-BoldCn', 'Courier New', Courier, monospace;

        /* Global */
        h1,
        h2 {
            font-family: 'BerlingLTStd-Italic', 'Courier New', Courier, monospace;
            color: #0053A2;

        }


        /* Container Stylings */
        .container {
            max-width: 1800px;
            width: 100%;
            position: relative;
            margin: 15px;

            #grid_container {
                aspect-ratio: 32 / 47;
                max-height: 95dvh;
                margin-left: 15px;

                #grid {
                    position: relative;
                    display: grid;
                    width: 100%;
                    height: 100%;
                    gap: var(--metric-rowGap);
                    grid-auto-flow: dense;

                    grid-template-columns: repeat(var(--metric-cols), calc((100% - ((var(--metric-cols) - 1) * var(--metric-rowGap))) / var(--metric-cols)));
                    grid-template-rows: repeat(var(--metric-rows), calc((100% - ((var(--metric-rows) - 1) * var(--metric-rowGap))) / var(--metric-rows)));

                
                    .gridElement {
                        width: 100%;
                        height: 100%;
                        background-color: #009fe3;
                    }
                }

                #hitDetectionGrid,
                #dragGrid {
                    display: grid;
                    position: absolute;
                    gap: var(--metric-rowGap);

                    aspect-ratio: 32 / 47;
                    height: 100%;
                    max-height: 95dvh;
                    pointer-events: none;
                }

                #hitDetectionGrid {
                    grid-template-columns: repeat(var(--metric-cols), calc((100% - ((var(--metric-cols) - 1) * var(--metric-rowGap))) / var(--metric-cols)));
                    grid-template-rows:repeat(calc(var(--metric-rows) - (var(--metric-biggerRows) * 2)), calc((100% - ((var(--metric-rows) - 1) * var(--metric-rowGap))) / var(--metric-rows))) repeat(var(--metric-biggerRows), calc(((100% - ((var(--metric-rows) - 1) * var(--metric-rowGap))) / var(--metric-rows)) * 2 + var(--metric-rowGap)));

                    .grid-detector {
                        pointer-events: all;
                        z-index: 1000;
                        border: 1px dashed  #0053A2;
                    }
                }

                #dragGrid {
                    gap: calc(var(--metric-rowGap) / 2);
                    grid-template-columns: repeat(calc(var(--metric-cols) * 2), calc(((100% - ((var(--metric-cols) - 1) * var(--metric-rowGap))) / var(--metric-cols))/ 2));
                    grid-template-rows: repeat(
                        calc((var(--metric-rows) - (var(--metric-biggerRows) * 2)) * 2),
                        calc((100% - ((var(--metric-rows) - 1) * var(--metric-rowGap))) / var(--metric-rows) / 2)
                    )
                    repeat(
                        calc(var(--metric-biggerRows) * 2),
                        calc((((100% - ((var(--metric-rows) - 1) * var(--metric-rowGap))) / var(--metric-rows)) * 2 + var(--metric-rowGap)) / 2)
                    );

                    .dragstart {
                        z-index: 999;
                        border: 2px solid #000;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        position: relative;
                        font-size: 40px;
                        width: calc( 100% - 4px) ;
                        height: calc( 100% - 4px) ;
                        
                        

                        #label {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            font-size: 14px;
                            background: rgba(255, 255, 255, 0.8);
                            padding: 2px 4px;
                            border-radius: 4px;
                            pointer-events: none;
                        }

                        .drag-handle {
                            position: absolute;
                            right: 0;
                            bottom: 0;
                            transform: translate(50%, 50%);
                            width: 20px;
                            height: 20px;
                            background: skyblue;
                            border-radius: 50%;
                            cursor: nwse-resize;
                        }
                    }
                }
            }


            #data_container {
                width: 300px;
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                background-color: #fff;
                z-index: 1000;
                padding: 0 0 0 10px;

                section {
                    /* border-bottom: 1px solid  #8C8C8C; */

                    #fixFormate {
                        list-style-type: none;
                        margin-top: 10px;

                        li {
                            button {
                                all: unset;
                                border: 1px solid  #8C8C8C;
                                padding: 5px 10px;
                                margin: 5px 0;
                                width: 250px;
                                border-radius: 4px;
                                color: #000;
                                transition: ease-out .3s;

                                &:hover {
                                    background-color:  #009fe3;
                                    border: 1px solid  #009fe3;
                                    color: #fff;
                                    cursor: pointer;
                                }
                            }

                        }
                    }

                    hr {
                        width: 275px;
                        margin: 10px 0;
                    }
                }


            }

        }
    }
}