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

:root {
    font-size: 10px; 
    --cool-blue: #2596be; 

    #dialog {
        background-color: white; 
        font-size: 3rem; 
        margin: 0 auto; 
        margin-top: 20rem; 
        width: 60%; 
        height: 40%; 
        /* display: grid;  */
        grid-template-rows: 1fr 1fr; 
        place-items: center;
        border-radius: 2rem;

        button {
                overflow: hidden;
                padding: 12px 24px;
                border-radius: 7px;
                background-color: white;
                color: black;
                position: relative;
                display: inline-block;
                cursor: pointer;
            }
            
            button span {
                position: relative;
                transition: color 0.6s cubic-bezier(0.53, 0.21, 0, 1);
            }
            
            button:before {
                content: "";
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: var(--cool-blue);
                transform: scaleX(0);
                transform-origin: 100% 100%;
                transition: transform 0.6s cubic-bezier(0.53, 0.21, 0, 1);
            }
            
            button:hover::before {
                transform-origin: 0 0;
                transform: scaleX(1);
            }
            
            button:hover {
                color: white;
            }
        
    }
}

.container {
    height: 100vh; 
    /* border: 1px solid red;  */
    background-color:lightcyan; 
    display: grid; 
    grid-template-rows: minmax(75px, .5fr) 4fr 1fr; 
    grid-template-columns: 3fr 2fr; 
    
    .title {
        grid-area: 1/1/2/3;
        /* border: 1px solid red; */
        padding: 1rem 0; 
        font-size: 5rem; 
        margin: 0 auto; 

    }
    
    .gameboard {
        grid-area: 2/1/3/2;
        display: grid; 
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr); 
        /* grid-template-columns: repeat(3, minmax(100px, 1fr));
        grid-template-rows: repeat(3, minmax(20%, 1fr));  */
        /* background-color: limegreen; */
        width: 60%; 
        height: calc(100%); 
        justify-self: center;

        .spot {
            border: 5px solid black; 
            /* border-radius: 2rem;  */
            display: grid; 
            grid-template-rows: 1fr;
            grid-template-columns: 1fr;
            justify-items: center;
            align-items: center;
            font-size: 10rem; 

        }

        .right {
            border-right: none; 
        }
        .left {
            border-left: none; 
        }
        .top {
            border-top: none; 
        }
        .bottom {
            border-bottom: none; 
        }
    }

    .options {
        display: grid; 
        grid-area: 2/2/3/3;
        margin: 0 auto; 
        font-size: 4rem; 
        background-color: var(--cool-blue); 
        width: 80%; 
        height: 100%; 
        /* margin-right: 10rem;  */
        border-radius: 2rem;
        padding: 2rem; 

        .inputs {
            display: grid; 
            align-items: center;
            justify-items: center;
            /* border: 1px solid red;  */
            /* margin-right: 2rem;  */
        }

        .display {
            margin: 0 auto; 
        }
    }

    .controls {
        grid-area: 3/1/4/1;
        display: grid;
        grid-template-rows: 1fr 1fr 1fr; 
        grid-template-columns: 1fr 1fr 1fr; 

        #restart {
            grid-area: 2/2/3/3;

        }
    }
}