@import url("style2.css");

body {
    margin: 0;
    font-family: sans-serif;
    font-size: 16px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.main-title {
    font-size: 2rem;
    text-align: center;
}

.main {
    width: 1000px;
    margin: 0 auto;
}

.sample {
    margin: 5rem;
    text-align: center;
    font-size: 3rem;
    word-break: break-all;
    white-space: break-spaces;
}

.sample[data-font="1"] {
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.sample[data-font="2"] {
    font-family: 'Courier New', Courier, monospace;
}

.sample[data-font="3"] {
    font-family: "Bad Script", cursive;
}

.sample[data-font="4"] {
    font-family: "Pacifico", cursive;
}

.sample[data-font="5"] {
    font-family: "bad_script1regular", "Bad Script", cursive;
}

.sample[data-font="6"] {
    font-family: "Comforter Brush", cursive
}

.hint {
    display: inline-block;
    background-color: #eee;
    color: #999;
    font-size: 0.7em;
    width: 16px;
    height: 16px;
    text-align: center;
    border-radius: 8px;
    vertical-align: top;
}
.hint:hover {
    text-decoration: none;
    color: red;
}