*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 500;
    color: var(--light);
    user-select: none;
    line-break: anywhere;
}

:root{
    --darkdark: #33373f;
    --dark: #393E46;
    --darklight: #60646a; 
    --darklighter: #888b90;
    --light: #FFD369;
    --lightdark: #66542a;
    --white: #EEEEEE;
    --wrong: #ff744f;
}

::-webkit-scrollbar{
    width: 0px;
}

/* ::selection{
    color: var(--darkdark);
    background-color: var(--light);
} */

body{
    background-color: var(--dark);

    display: grid;
    grid-template-columns: [page-left] auto [main-left] 640px [main-right] auto [page-right];
    grid-template-rows: [page-top] 70px [nav-end] 40px [set-end] 175px [main-end] 45px [input-end] 40px [button-end] auto [page-down];
    justify-items: center;
    gap: 30px;

    /* display: flex;
    flex-direction: column;
    align-items: center; */
}

nav{
    /* width: 90vw;
    height: 100px; */
    width: 100%;
    grid-area: page-top / main-left / nav-end / main-right;
    /* background-color: var(--light); */
    /* margin-top: 30px; */
    /* border: 8px solid var(--light); */
    border-radius: 20px;
}

/* setting */
#setting{
    width: calc(100% - 140px);
    grid-area: nav-end / main-left / set-end / main-right;
    background-color: var(--darkdark);
    border-radius: 10px;
    /* border: 2px solid var(--light); */
    

    display: flex;
    justify-content: center;
    align-items: center;
}

#setting button, #setting select{
    font-size: 18px;
    line-height: 1;
    color: var(--darklight);
    background-color: transparent;
    border: none;

    display: flex;
    align-items: center;
}

#setting option{
    background-color: var(--darkdark);
    color: var(--darklighter);
}

#setting button, #setting select:hover{
    cursor: pointer;
}

#setting button, #setting select:focus{
    outline: none;
}

#setting-left{
    width: 300px;

    display: flex;
    justify-content: space-around;
}

#setting-left select{
    width: 150px;
    text-align: center;

    -webkit-appearance: none;
    -moz-appearance: none;
    /* display: flex;
    justify-content: center; */
}

#setting-right{
    width: 180px;
    display: flex;
    justify-content: space-around;
}

.button-selected{
    /* color: white;
    fill: white; */
    filter: invert(96%) sepia(4%) saturate(35%) hue-rotate(201deg) brightness(99%) contrast(91%);
}


/* main window */
#center{
    grid-area: set-end / main-left / main-end / main-right;
    width: 100%;
    height: 100%;
}

#main-window{
    padding: 12px 12px 12px 10px;
    border: 8px solid transparent;
    /* background-color: var(--darklight); */
    overflow: auto;
    border-radius: 20px;
}

#lines{
    width: 100%;
    height: 135px;
    overflow: hidden;
    padding-left: 2px;
    font-size: 30px;
}

#lines div{
    font-size: 30px;
    line-height: 1.5;
    line-break: anywhere;

    display: flex;
}

.onspot{
    border-left: 2px solid var(--light);
    margin-left: -2px;
    transition: ease;

    /* animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: typingspot; */
}

.finished{
    color: var(--lightdark);
    /* opacity: 0.3; */
}

.wrong{
    color: var(--wrong);
}

/* input */
#input-text{
    width: 100%;
    height: 45px;
    background-color: transparent;
    font-size: 30px;
    line-height: 1.5;
    outline: none;
    border: none;
    border-bottom: 4px solid;
    padding: 0 20px 0;
    margin-top: 30px;
    overflow: hidden;
    resize: none;
    /* caret-color: transparent; */
}

/* restart button */
#button-restart {
    grid-area: input-end / main-left / button-end / main-right;
    width: 200px;
    height: 100%;
    background-color: var(--darkdark);
    border: 0;
    border-radius: 10px;
    font-size: 18px;
    color: var(--darklighter);
    cursor: pointer;
    /* font-weight: 700; */
}

/* end screen */
#end-screen{
    grid-area: nav-end / main-left / input-end / main-right;
    width: 100%;
    background-color: var(--darkdark);
    outline: 10px solid var(--darkdark);
    border-radius: 20px;
    padding: 50px;
    z-index: 1000;

    display: flex;
    justify-content: space-around;
    align-items: center;
}


#end-screen div{
    color: var(--darklighter);
    font-size: 20px;

    display: flex;
    flex-direction: column;
}

#end-screen span{
    font-size: 50px;
}

.displaynone{
    display: none !important;
}

@media all and (max-width: 700px) {
    body{
        grid-template-columns: [page-left] auto [main-left] 550px [main-right] auto [page-right];
    }
    
    #setting{
        width: 100%;
    }
}


@media all and (max-width: 600px) {
    body{
        grid-template-columns: [page-left] auto [main-left] 430px [main-right] auto [page-right];
    }

    #end-screen span{
        font-size: 40px;
    }
}

@media all and (max-width: 500px) {
    body{
        grid-template-columns: [page-left] auto [main-left] 340px [main-right] auto [page-right];
    }

    #end-screen span{
        font-size: 30px;
    }
}

@media all and (max-width: 400px) {
    body{
        grid-template-columns: [page-left] auto [main-left] 310px [main-right] auto [page-right];
    }
}