/* bagel-fat-one-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bagel Fat One';
  font-style: normal;
  src: url('bagel-fat-one-v1-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    --color:#1d2102;
    --background:#4d4f21;
    
    --link:#2d5004;
    --linkhover:#795f11;
    
    --content:#e0e8b9;
    
    --navlink:#FFF;
    --linkbg:#3d6d05;
    --linkbghover:#294b02;
    
    --formbg:#e0e8b9;
    --formcolor:#2d5004;
    --formborder:#2d5004;
    
    --accentbg:#c3d687;
    --hr: #6aa427;
    
    --headerfont: 'Bagel Fat One', sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color:#ced7b0;
        --background:#393b15;
        
        --link:#89c257;
        --linkhover:#ab966a;
        
        --content:#2c2d04;
        
        --navlink:#FFF;
        --linkbg:#3d6d05;
        --linkbghover:#294b02;
        
        --formbg:#393b15;
        --formcolor:#89c257;
        --formborder:#89c257;
        
        --accentbg:#443b17;
        --hr: #74693b;
    }
}

* { margin: 0; padding: 0; transition: color 0.5s ease, background 0.5s ease, border 0.5s ease;}
img { margin:5px; max-width:100%; }

body { 
    color:var(--color);
    background:var(--background) url(https://kalechips.net/assets/backgrounds/otis-redding.png) fixed;
    font: 1em sans-serif; 
    letter-spacing:.35px;
}

#container {
    width:700px;
    margin:10px auto;
    border-radius:5px;
    background:var(--content);
}

.title {
    color:#FFF;
    font:3em var(--headerfont);
    position:relative;
    top:70%;
    text-align:center;
    text-shadow:2px 2px 0 rgb(0,0,0,0.8);
}

nav {
    font-size:1.3em;
    text-align:center;
    padding:5px;
}

nav li {
    display:inline-block;
    padding:3px;
    margin:.4em 0 .4em 0;
}

nav a {
    color:var(--navlink);
    text-decoration:none;
    padding:7px;
    background:var(--linkbg);
    border-radius:5px;
    border-bottom:5px solid var(--linkbghover);
}

nav a:hover, nav a:focus {
    background:var(--linkbghover);
    border-color:var(--linkbg);
}

header {
    height:300px;
    background:url(banner.jpg) no-repeat center;
    background-size:cover;
}

main {
    padding:15px;
}

main a {
    color:var(--link);
}

main a:hover {
    color: var(--linkhover);
}

main li a {
    text-decoration:none;
}

p {
    margin:10px 0px 10px 0px;
    line-height:1.5;
}

main h1 {
    font:2.2em var(--headerfont);
    margin:5px 0 5px 0;
}

main h2 {
    margin:10px 0 10px 0;
    font:1.8em var(--headerfont);
}

main h3 {
    margin:5px 0 5px 0;
    font: 1.5em var(--headerfont);
}

main input, textarea, select, button { 
    background: var(--formbg);  
    color: var(--formcolor);
    font: 12pt sans-serif; 
    border: 1px solid var(--formborder); 
    padding: 5px; 
    margin: 5px;
    border-radius:2px;
}

main textarea {
    width:90%;
}

input[type="submit"], input[type="reset"] {
    font-size:14pt;
    background:var(--accentbg);
    padding:10px;
}

input[type="submit"]:hover, input[type="reset"]:hover {
    cursor:pointer;
}

.membertitle {
    font-size:1.3em;
}

.name {
    font:1.5em var(--headerfont);
    color:var(--link);
}

main table {
    margin:10px auto 10px auto;
    padding:5px;
    width:100%;
    border-collapse:collapse;
}

main th {
    border-bottom:1px solid var(--hr);
    padding:5px;
    text-align:left;
}

main td {
    padding:3px;
}

main tr:nth-child(2n) {
    background:var(--accentbg);
}

main ul, ol { 
    list-style-position: outside;
}

main li {
    margin:5px 0 5px 20px;
    line-height:1.5;
}

main blockquote, .box {
    padding:10px;
    background:var(--accentbg);
    border-radius:5px;
    border-bottom:5px solid var(--hr);
    margin:5px 0 5px 0;
}

main hr {
    border:0.5px solid var(--hr);
    margin:20px auto 20px auto;
}

main footer {
    text-align:center;
    border-top: 0.5px solid var(--hr);
    margin-top:10px;
    padding:10px;
}

#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--content);
    color:var(--link);
    z-index:1000;
    padding:5px;
}
 
#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}

@media screen and (max-width:749px) {
    #container {
        width:100%;
        margin-top:0;
    }
}

@media (prefers-color-scheme: dark) {

    main img {
        opacity:0.6;
    }
    
    main img:hover {
        opacity:1;
    }

    main a img:hover {
        opacity:1;
    }
}