/* font */
@font-face {
    font-family: "noto-sans-kr";
    src: url("./font/NotoSansKR-VariableFont_wght.ttf");
}

/* general */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* color: #F6F2EE; */
    font-size: 16px;
    font-family: noto-sans-kr;
}

.con-wrap-row {
    display: flex;
}

.con-wrap-row-gap-3 {
    display: flex;
    gap: 12px;
}

.con-wrap-row-gap-6 {
    display: flex;
    gap: 24px;
}

div#full-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    position: relative;
}

main#main {
    flex-shrink: 0;
    flex-basis: 550px;
    height: 400px;
    border-radius: 24px;
    border: 1px solid black;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 24px;
    padding: 24px;
}

main div#ball-row {
    /* margin: 0 24px; */
    width: 100%;
    height: 72px;
    display: flex;
    justify-content: center;
    gap: 24px;
    align-items: center;

    background-color: black;
    border-radius: 24px;
    padding: 0 24px;
}

main div#ball-row div.ball {
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 50%;

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

/* main div:last-child #roll, main div:last-child #reset {
    padding: 12px, 24px;
    background-color: bisque;
    border: none;

} */

main div#button-row {
    width: 100%;
    display: flex;
    gap: 24px;
}

main div#button-row button {
    padding: 12px 0;
    width: 100%;
    background-color: black;
    border: none;
    display: block;
    border-radius: 12px;
    color: white;
}