/* START CSS */

/* =============== BASE =============== */

/* TOP LEVEL */


html { 
    font-size: 4px;
    margin: 0;  
    padding: 0; 
    display: block; 
}

body { 
    background: #fff;  
    color: #333;
    font-family: serif, sans-serif;
    font-size: 4rem;  
    font-weight: 400; 
    line-height: 5rem;

    margin:  0 auto;  
    padding: 0 5rem;
    max-width: 600px; 
    min-width: 240px;

    word-wrap: break-word;  
    overflow-wrap: break-word;  
    hyphens: auto; 
}


p {
    display: block; 
    margin: 0 0rem; 
    padding: 2rem 0;
}


header {
    /*background-color: #bbb;*/
    display: block; 
    margin: 5rem 0 2rem 0;
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
}

section, div {
    display: block; 
    margin: 1rem 0;
    padding: 1rem 0;
}

footer {
    /*background-color: #bbb;*/
    display: block; 
    font-size: 4rem;  
    text-align: left;
    margin:  2rem 0;  
    padding: 1rem 0;
    border-top: 1px solid #eee;
}


h1 {font-size: 9rem; line-height: 9rem; font-weight: 600; color:#333; margin: 2rem 0rem;  padding: 2rem 0 1rem;}
h2 {font-size: 8rem; line-height: 8rem; font-weight: 400; color:#111; margin: 2rem 0rem;  padding: 2rem 0 1rem;}
h3 {font-size: 6rem; line-height: 6rem; font-weight: 400; color:#111; margin: 2rem 0rem;  padding: 2rem 0 1rem;}
h4 {font-size: 5rem; line-height: 5rem; font-weight: 400; color:#111; margin: 2rem 0rem;  padding: 2rem 0 1rem;}
h5 {font-size: 4rem; line-height: 4rem; font-weight: 400; color:#111; margin: 2rem 0rem;  padding: 2rem 0 1rem;}

hr {border-width: 0; border-top: 1px solid #555; padding: 0; margin: 3rem 0;}

pre {
    font-family: monospace; font-size: 3rem;
    padding: 2rem; 
    margin: 2rem 0;
    display: block;  white-space: pre-wrap;   font-weight: 100;  
    color: #333;  background-color: #eee;  border-radius: 1rem;
    line-height: 4rem;
}

code { 
    font-family: monospace; font-size: 3rem; color: #333;  
    padding: 0rem 2rem;      
    background-color: #eee;  
    border-radius: 1rem;
    line-height: 4rem;
}

kbd { 
    font-family: monospace; font-size: 3rem; color: #333;
    padding: 0rem 1rem;
    border: 1px solid #555;
    background-color: #ddd;  
    border-radius: .5rem;
    line-height: 4rem;
}

b  { font-weight: 800; }
i  { font-style: italic; }
small { font-size: 3rem; }

a { font-size: 4rem; color:#17f;  text-decoration:none; outline:none; }
a:active {color:#f51;} 
a:hover, a:focus {color:#f60;}


.indent {
    padding-left: 4rem; 
    border-left: 1rem solid #eee;
}

pre.trim { white-space: pre-line; }



/* =============== PRINT =============== */

@media print {
    @page {
        size: 8.5in 11in;
        margin: .75in;
    }
    
    body {
        margin:  5rem;
    }

    header {
        margin-bottom: 7rem;
    }

    footer::after{
        word-wrap: normal;
        overflow-wrap: normal;
        white-space: nowrap;
        border: none;
        position: fixed;
        transform: rotate(-45deg);
        font-family: sans-serif, serif;
        font-size: .5in;
        line-height: 1in;
        font-weight: 800;
        color: rgba(0, 0, 0, 0.07);
        top: 3in; left: 1in;
        white-space: pre;
    }

    footer::after {content: "GONN.ORG (C) GON YI";}

    
    .must-print {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust:exact !important;
        color-adjust: exact !important;
    }

    a, a:link, a:visited, a:hover {
        text-decoration: none;
        color: black;
    }
    a[href]::after {
        content: " <" attr(href) "> ";
        font-style: italic;
    }
    pre, code {
        border: 1px solid black;
    }
}



/* =============== FORM =============== */

label {font-size: 2.5rem; color: #ddd;}
.block {display: block; margin: 2rem 0;}
.btn, button, input, textarea {
    margin:.5rem 0;
    border-radius: 1rem; border: .5rem solid #bbb;
    font-size: 3.5rem; 
    line-height: 3.5rem;
    padding: 0 2rem; outline: none;
    font-family:"Times","Times New Roman",serif,sans-serif;
}
.btn, button {background-color: #ddd; border-color: #ddd; color: #222; display: inline-block;}
.btn:hover, .btn:focus, .btn:active, button:hover, button:focus, button:active {
    border-color: #17f; background-color: #17f;color: #fff;}
textarea { resize: vertical; }
input, textarea {padding:  2rem; font-size:4rem; background-color: #fff; color: #555; box-sizing: border-box;}
input:focus, textarea:focus, input:active, textarea:active {
    border-color: #17f; background-color: #fff; color: #333; caret-color: #000;}
:-ms-input-placeholder  {color: #bbb; font-size: 4rem;}
::-ms-input-placeholder {color: #bbb; font-size: 4rem;}
::placeholder {color: #bbb; opacity: 1; font-size: 4rem;}