html,
body {
    margin: 0;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 14px;
}

html {
    position: relative;
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #FAFAFA;
}

h1 {
    font-size: 1.6em;
    margin: 10px 0;
    text-align: center;
}

h1 > span {
    font-weight: normal;
}

h2 {
    font-size: 1.2em;
    display: flex;
    align-items: center;
    background: no-repeat;
    padding-left: 30px;
}

h2::after {
    content: "";
    border-bottom: 1px solid #AAA;
    flex: 1;
    margin-left: 10px;
}

h2.devtool {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='none' d='M0 0h30v30H0z'/%3E%3Cpath d='M9.4 21.3 1 15l8.3-6.3m11.3 0L29 15l-8.3 6.3M17.3 7.6l-4.6 14.8' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

h2.game {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E%3Cpath d='M13.5 7.5v-3h-6v3h-3v9h3v3h3v3h3v3h3v-3h3v-3h3v-3h3v-9h-3v-3h-6v3h-3Zm3 9v3h3v-3h3v-3h-3v3h-3Z'/%3E%3C/svg%3E");
}

h2.garbage {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.1 6.8H22v16.4c0 1.6-1.3 2.8-2.8 2.8H11a2.7 2.7 0 0 1-3-2.8V6.9ZM15 4c1.4 0 2.6 1.1 2.7 2.5v.2h-5.4C12.3 5.3 13.4 4 15 4ZM5.4 6.8h19.2m-12.3 4.1v11m5.5-11v11' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

h3 {
    font-weight: normal;
    font-size: 1.2em;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: underline;
    color: black;
}

p {
    padding: 0 0 5px 1.5em;
}

div.icon {
    margin-top: 10px;
    text-align: center;
}

svg.icon {
    width: 64px;
}

svg.icon > g {
    transform-origin: 77px 126px;
    transition: transform .16s;
}

svg.icon:hover > g {
    transform: rotate(-12deg);
}

div.content-wrapper {
    width: 90%;
    max-width: 800px;
    flex-direction: column;
    margin: 0 auto;
    flex: 1;
    box-sizing: border-box;
}

div.description {
    text-align: center;
}

div.content {
    margin-bottom: 30px;
}

div.items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(auto-fill, 1fr);
    gap: 12px;
}

div.items > a {
    background-color: white;
    margin: 0;
    padding: 12px;
    border: 1px solid #DDD;
    border-left-width: 4px;
    border-radius: 4px;
    text-align: left;
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
}

div.items > a > p {
    margin: 10px 0 0 0;
    color: #555;
}

div.sub {
    font-size: 0.8em;
    color: #666;
}

footer {
    flex-shrink: 0;
    text-align: center;
    padding: 20px 20px 20px 0;
    box-sizing: border-box;
}

a.keycode:hover {
    background-color: #F8F8F8;
    border-color: #888;
}

a.tri-peaks:hover {
    background-color: #ecffee;
    border-color: #00750b;
}

a.decor-pikmin:hover {
    background-color: #f7fff7;
    border-color: #6ba769;
}

a.synth:hover {
    background-color: #eedfd4;
    border-color: #422d18;
}

a.wh-weapon:hover {
    background-color: #f5ebe5;
    border-color: #f16d15;
}

a.pikkal:hover {
    background-color: #fffbd9;
    border-color: #de9400;
}

a.x:hover {
    background-color: #f1faff;
    border-color: #1d9bf0;
}

@media screen and (max-width: 559px) {
    div.items {
        grid-template-columns: 1fr;
    }
}