:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #e7e7e7;
    --dark: #343a40;
}

/* pc */
@media only screen and (min-width: 1080px) {
    body {
        background-size: cover;
        margin: 0;
    }

    .menu-text {
        background: url("/img/bos.png") no-repeat center fixed;
        background-size: 100vw 100vh;
        font-family: 'Cabin Sketch', sans-serif;
        background-position: center bottom;
        font-size: 10vh;
        text-wrap: wrap;
        color: var(--white);
        padding: 0.5em;
    }

    /* Menu */

    .menu-table {
        display: flex;
        justify-content: center;
        font-family: "Roboto Slab", serif;
        text-wrap: wrap;
        text-align: center;
        color: var(--gray);
        padding-top: 1em;
        padding-bottom: 1em;
        font-size: 1.5vh;
    }

    .menu-h1 {
        color: var(--blue);
        font-size: 5vh;
        padding-top: 0.5em;
        padding-left: 3.8em;
        padding-right: 3.8em;
    }

    .menu-h2 {
        color: var(--blue);
        font-size: 4vh;
        padding-top: 0.5em;
        display: flex;
        justify-content: center;
    }

    .menu-divider {
        width: 50%;
        border: 1px solid var(--yellow)
    }

    .menu-table tr:hover {
        background-color: var(--light);
        color: var(--gray);
        transition: all 0.3s ease-in-out;
    }
}

/* phone */
@media only screen and (max-width: 640px) {
    body {
        background-size: cover;
        margin: 0;
    }

    .menu-text {
        background: url("/img/bos.png") no-repeat center fixed;
        background-size: 300vw 100vh;
        font-family: 'Cabin Sketch', sans-serif;
        background-position: -120vw bottom;
        font-size: 5.6vh;
        height: 40vh;
        text-wrap: wrap;
        color: var(--white);
        padding-left: 3vw;
        padding-top: 30%;
    }

    /* Menu */
    .menu-table {
        display: flex;
        justify-content: center;
        font-family: "Roboto Slab", serif;
        text-wrap: wrap;
        text-align: center;
        color: var(--gray);
        padding-top: 1em;
        padding-bottom: 1em;
        font-size: 1.5vh;
    }

    .menu-h1 {
        color: var(--blue);
        font-size: 6vw;
        padding-top: 0.5em;
        display: flex;
        justify-content: center;
    }

    .menu-h2 {
        color: var(--blue);
        font-size: 6vw;
        padding-top: 0.5em;
        display: flex;
        justify-content: center;
    }

    .menu-divider {
        width: 20vw;
        border: 1px solid var(--yellow)
    }

    .menu-table tr:hover {
        background-color: var(--light);
        color: var(--gray);
        transition: all 0.3s ease-in-out;
    }
}