/* IP Gatekeeper */

/*
********
Block tag
********
*/

html {
    font-size: 18px;
}

body {
    padding: 1em 1em;
    max-width: 60em;
    line-height: 175%;
    font-size: clamp(1rem, 5vmin, 2rem);

    font-family:
        "Helvetica Neue",
        "Arial",
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        "BIZ UDPGothic",
        "Meiryo",
        sans-serif;
    
    background: #f8f8f8;
}

section {
    margin: 2em 0;
}

h1 {
    font-size: 200%;
}

h2 {
    font-size: 110%;
}

h1, h2 {
    margin: 0.5em 0
}

p {
    font-size: 100%;
}



/*
********
Inline tag
********
*/

a {
    color: #0059ff;
}

code {
    font-family: 'Consolas', Courier, monospace;
}

strong {
    font-weight: bold;
    color: #aa0000;
}

input {
    margin: 0.2em;
    padding: 0 0.8em;
    border: solid 1px #aaaaaa;
    font-family: 'Consolas', Courier, monospace;
    font-weight: bold;
}

input::placeholder {
    color: #888888;
}

input[readonly] {
    background: #f0f0f0;
}

button, input[type="submit"] {
    margin: 0.2em;
    padding: 0 1em;
    font: inherit;
    font-weight: bold;
    color: white;
    background: #328a00;
    text-shadow: -1px -1px 1px #444444;
    border: solid 1px #225a02;
    border-radius: 0.2em;
    cursor: pointer;
}
button:hover, input[type="submit"]:hover { background: #225a02; }
button:active, input[type="submit"]:active { color: #ffef0f; }




/*
********
With class
********
*/

.hide {
    display: none;
}

.inline {
    display: inline-block;
    margin: 0;
}

div.item-line {
    margin: 0.5em 0;
}

span.result {
    display: inline-block;
    margin: 0 1em;
}

.result.ok    { color: #328a00; }
.result.error { color: #aa0000; }



/*
********
With ID
********
*/

input#email {
    width: clamp(10em, 90vw, 50em);
}



/*
********
Media query
********
*/

@media screen and (min-width: 1000px) {
    body {
        padding: 2em 4em;
        font-size: 18px;
    }
}