:root {
    /* Images */
    
    /*Put your entire header background image CSS here */
    --header-background: #000073; 
    
    /*Fonts*/
    --body-font: Tahoma, sans-serif; /* Body text font */
    --header-font: Meridies Antiqua; /* Font for headers */
    
    /* Colors */
    /* If you want a transparent background for any element, set the value to none */
    
    /*--background: url(https://grackleclaw.neocities.org/fishybg.jpg); /*Main background color*/   
    --background: url(https://grackleclaw.neocities.org/grsquiggles.png);
    --sidebarimage: url(https://grackleclaw.neocities.org/grunkle%20web.png);
    --textcolor: #171717; /*Body text color*/
    
    --mainbg: #FAFAFA; /*Content background color*/
    --mainlink: #607c00; /*Content link color*/
    --mainlinkhover: #5d1d5f; /*Content link hover color*/
    
    /*Header text colors*/
    --h1color: #000073;
    --h2color: #000073;
    --h3color: #000073;
    --h4color: #607c00;
    
    --navbg: #FAFAFA; /*Sidebar background color*/
    --navheader: #000073; /*Sidebar header color*/
    --navborder: #607c00; /*If you don't want a border under the headers in the menu, change this to none*/
    
    --navlink: #000073; /*Sidebar link color*/
    --navlinkbg: #FFB300; /*Sidebar link background*/
    --navlinkhover: #FFB300; /*Sidebar link hover color*/
    --navlinkbghover: #000073; /*Sidebar link hover background*/
    
    --formbg: #ebebeb; /*Form element background*/
    --formtext:#666; /*Form element text color*/
}

* { margin: 0; padding: 0; }

body { 
    background: var(--background); 
    background-position: center;
    background-size: cover;
    color: var(--textcolor);
    font: 1rem var(--body-font); 
}

#container { 
    max-width: 1100px;
    padding: 10px;
    margin: 10px auto;
    display: flex;
    gap:10px;
    flex-wrap:wrap;
}

#main-header {
    height: 150px; 
    flex:1 0 100%;
    background: var(--header-background);
}

main { 
    padding:15px;
    background:var(--mainbg);
    flex:1 1 calc(80% - 45px);
}

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

main a:hover, main a:focus { 
    color: var(--mainlinkhover); 
}

main p {
    margin:.5em 0px .5em 0px;
    line-height:1.5;
}

main h1 {
    font: 2em var(--header-font); 
    color: var(--h1color);
    border-bottom: 1px solid;
}

main h2 { 
    font: 1.7em var(--header-font);
    color: var(--h2color);
}

main h3 { 
    font: 1.4em var(--header-font); 
    color: var(--h3color);
}

main h4 {
    font:0.9em var(--header-font);
    font-style:italic;
}

main img { 
    margin: 5px; 
    max-width:90%;
}

main ul { 
    list-style: inside; 
}

main ul li ul {
    margin-left:15px;
}

main input, textarea, select, button { 
    background: var(--formbg); 
    color: var(--formtext); 
    border: 1px solid; 
    font: 1em var(--body-font);
    padding: 5px; 
    margin: 5px;
}

#sidebar {
    flex:1 1 20%;
}

.item {
    padding:15px;
    background:var(--navbg);
    margin-bottom:15px;
}

.menu h2 { 
    font: 1.2rem var(--header-font); 
    border-bottom: 1px solid var(--navborder);
    color:var(--navheader);
}

.menu ul {
    list-style:none;
    display:inline;
    margin:0;
}

.menu ul li {
    display:block;
}

.menu a { 
    display: block; 
    text-decoration: none; 
    padding:5px;
    margin-top: 10px;
    color: var(--navlink);
    background:var(--navlinkbg);
    border: 1px solid;
}

.menu a:hover, .menu a:focus { 
    color: var(--navlinkhover);
    background: var(--navlinkbghover);
}

footer {
    background:var(--mainbg);
    padding:15px;
    text-align:center;
    flex: 1 0 calc(100% - 30px);
}

/* Skip to content button */
#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--mainbg);
    color:var(--mainlink);
    z-index:1001;
    padding:5px;
}
 
#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}

@font-face {
  font-family: Meridies Antiqua;
  src: url(https://grackleclaw.neocities.org/Meridies%20Antiqua.otf);
}


@media screen and (max-width:1100px) {
    #sidebar {
        flex-basis: 30%;
    }
    
    main {
        flex-basis: calc(70% - 45px);
    }
}