@font-face {
        font-family: "Exo 2";
        font-style: normal;
        font-weight: normal;
        src: local("Exo 2"), url("/static/Exo2-Regular.ttf") format("truetype");
    }

    @font-face {
        font-family: "Exo 2";
        font-style: italic;
        font-weight: normal;
        src: local("Exo 2"), url("/static/Exo2-Italic.ttf") format("truetype");
    }

    @font-face {
        font-family: "Exo 2";
        font-style: normal;
        font-weight: bold;
        src: local("Exo 2"), url("/static/Exo2-Bold.ttf") format("truetype");
    }

    @font-face {
        font-family: "Exo 2";
        font-style: italic;
        font-weight: bold;
        src: local("Exo 2"), url("/static/Exo2-BoldItalic.ttf") format("truetype");
    }

    html {background-color: #e1e3ea; font-family: "Exo 2", monospace; font-size: 2vmin; font-size: max(12px, 2vmin);}
    body {background-color: #fff; color: #4a5066; border: 1px solid #a6acbf; padding: 15px; margin: 15px;}
    td {font-size: 2vmin; font-size: max(12px, 2vmin);}
    #logo {background-color: #4a5066; margin: -15px -15px 0px -15px;}
    #logo td {color: #fff; font-size: 1.6vmin; font-size: max(12px, 1.6vmin); line-height: 1.0;}
    #logo td b {font-size: 2.8vmin; font-size: max(21px, 2.8vmin);}
    a:link, a:visited {color: #4a5066; text-decoration: none;}
    a:hover, a:active {color: #4a5066; text-decoration: underline;}
    nav {background-color: #f69746; color: #fff; padding: 10px 10px; margin: 0px -15px 0px -15px; text-align: center; font-size: 2vmin; font-size: max(12px, 2vmin);}
    nav a:link, nav a:visited {color: #fff; text-decoration: none;}
    nav a:hover, nav a:active {color: #fff; text-decoration: underline;}
    pre {background-color: #e1e3ea; border: 1px solid #a6acbf; padding: 5px; min-height: 1em; white-space: normal; font-size: 2vmin; font-size: max(12px, 2vmin);}
    #grid {border-collapse: collapse; display: block; overflow-x: auto; margin: auto;}
    #grid tr:nth-child(even) {background-color: #e1e3ea;}
    #grid tr:nth-child(1) {background-color: #a6acbf; color: #fff;}
    #grid td {padding: 5px 10px; font-size: 2vmin; font-size: max(12px, 2vmin);}
    #grid .price-column {min-width: 12ch; white-space: nowrap;}
    .money {white-space: nowrap;}
    input {color: #4a5066; border: 1px solid #a6acbf; padding: 10px; font-family: "Exo 2", monospace; font-size: 2vmin; font-size: max(12px, 2vmin); width: 80vmin;}
    input[type=submit] {color: #fff; background-color: #4a5066; border: 1px solid #4a5066; position: fixed; bottom: 15px; left: calc((100vw - 80vmin)/2);}
    input[type=radio] {width: 2vmin; width: max(12px, 2vmin); height: 2vmin; height: max(12px, 2vmin); margin-right: 10px; font-size: 2vmin; font-size: max(12px, 2vmin);}
    #file {float: right; color: #fff; font-size: 2vmin; font-size: max(12px, 2vmin);}

@media (max-device-width: 480px) {
    html {font-size: 4vmin; font-size: max(12px, 4vmin);}
    td {font-size: 4vmin; font-size: max(12px, 4vmin);}
    #logo td {font-size: 1.8vmin; font-size: max(12px, 1.8vmin);}
    #logo td b {font-size: 3.2vmin; font-size: max(21px, 3.2vmin);}
    nav {font-size: 4vmin; font-size: max(12px, 4vmin);}
    #grid td {font-size: 4vmin; font-size: max(12px, 4vmin);}
    input {font-size: 4vmin; font-size: max(12px, 4vmin); }
    input[type=radio] {width: 4vmin; width: max(12px, 4vmin); height: 4vmin; height: max(12px, 4vmin); margin-right: 10px; font-size: 4vmin; font-size: max(12px, 4vmin);}
    sub {font-size: 1.5vmin; font-size: max(8px, 1.5vmin);}
}