/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


/* The following CSS applies on all screen sizes */

/* Colors and fonts */
:root{
    /* Fonts */
    --bodyfont: coming-soon;
    --headerfont: coming-soon;
  
    
    /* Main colors */
    /*-- background:#2dc95e; /* Page background */
    --color:#4d0010;
    --block:#def7e1; /* Background color for the grid blocks in the content */
    --lines:#b0d0b4; /* Color for the background lines */
    --shadow:#0e1f08; /* Color for the drop shadow */

    --link:#7a411c;
    --linkhover:#1a460b;
    --linkbackground:#def7e1;

    --h1:#4d0010;
    --h2:#4d0010;
    --h3:#4d0010;
    --h4:#4d0010;

    /* Sidebar colors */
    --sidebar:#def7e1;
    --sidebarcolor:#4d0010;
    --title: #4d0010;
    --sidebarlink:#7a411c;
    --sidebarlinkhover:#7a411c;

    /* Menu colors */
    --menucolor:#7cb082;
    --menucolorhover:#11ff2e;

    /* Tape colors */
    --tape: #ffee93;
    --tape-edge: #b4a86b;
} 
{ margin:0; padding:0; }

/* Main body styling */
body {
    background:url('/DRYLEAVE.JPG');
    /* background-color:var(--background); */
    background-attachment:fixed;
    font-family:'coming-soon';
    color:var(--color);
    cursor: url('/cursor/mushroomcursor.png'), auto;
}

/* Rounded corners - feel free to get rid of this or change it */

.article-content, #sidebar-content, #main-footer {
    border-radius:5px;
}

/* Sidebar styling */

#sidebar-content {
    background: var(--sidebar);
    color: var(--sidebarcolor);
    padding:10px;
    border:3px solid var(--linkhover);
    box-shadow:5px 5px 0 var(--shadow);
    margin-bottom:10px;
}

.sidebar-columns {
    display:flex;
    gap:20px;
}

#sidebar-content header {
    color:var(--title);
    font:1.5em var(--headerfont);
    margin:8px 0 8px 0;
}

#sidebar-content p a {
    color:var(--sidebarlink);
    transition:0.5s ease;
}

#sidebar-content p a:hover {
    color:var(--sidebarlinkhover);
    transition:0.5s ease;
}

.icon {
    margin:auto;
}

.icon img {
    border-radius:10px;
    width:90px; /* This can be changed to make the icon smaller; you might have to mess with the border radius too */
    height:auto; /* Preserves aspect ratio */
}

/* Styling for the menu */

#main-menu {
    font:1.1em var(--headerfont);
    width:100%;
    margin-top:20px;
}

#main-menu ul {
    list-style:none;
}

#main-menu li {
    display:inline-block;
}

#main-menu li a {
    padding:3px;
    color:var(--menucolor);
    text-decoration:none;
    transition:0.5s ease;
    border-bottom:1px solid;

}

#main-menu li a:hover, #main-menu li a:focus {
    color:var(--menucolorhover);
    transition:0.5s ease;
}

/* Content styling */

main {
    margin-top:20px;
}

/* Styling for blocks */

main .post {
    margin-bottom:30px;
    width:100%;
}

.article-content, #main-footer {
    padding:22px;
    width:calc(100% - 44px);
    border:3px solid var(--linkhover);
    box-shadow:5px 5px 0 var(--shadow);
    background:linear-gradient(var(--block) 0px, var(--block) 30px, var(--lines) 31px);
    background-size:100% 32px;
}

main img.postimage {
    border-radius:5px;
    border:3px solid var(--linkhover);
    margin:0 auto 10px auto;
}

main h1 {
    font:1.8em var(--headerfont);
    color:var(--h1);
}

main h2 {
    font:1.5em var(--headerfont);
    color:var(--h2);
}

main h3 {
    font:1.3em var(--headerfont);
    color:var(--h3);
}

main h4 {
    font:1em var(--headerfont);
    font-style:italic;
    color:var(--h4);
}

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

main a {
    color:var(--link);
    transition:0.5s ease;
}

main a:hover, main a:focus {
    color:var(--linkhover);
    transition:0.5s ease;
}

main ul {
    list-style-position: outside;
    margin-left: 25px;
}

main ul li {
    line-height:1.5;
}

main img {
    max-width:100%;
}

main pre {
    background:var(--lines);
    padding:10px;
    margin:5px;
    border-radius:5px;
    max-width:600px;
    max-height:300px;
    overflow:auto;
}

main input, textarea, select, button { 
    background: var(--block);  
    color: var(--color);
    font: 1rem var(--bodyfont); 
    border: 1px solid; 
    padding: 8px; 
    margin: 2px;
}

main details {
    background: var(--lines);
    padding:10px;
    margin:5px;
    border-radius:5px;
}

main details summary {
    cursor: pointer;
}

.article-footer {
    margin-top:15px;
}

.tag, .date {
    display:inline-block;
    background: var(--block);
    padding:5px;
    border-radius:3px;
    box-shadow:2px 2px 0 var(--shadow);
    border:1px solid var(--linkhover);
    margin:0.25em 0 0.25em 0;
}

#main-footer {
    text-align:center;
}

.tape::before {
    content:"";
    display:block;
    height: 30px;
    margin:-28px auto 5px auto;
    width: 50%;
    max-width:150px;
    background-color: var(--tape);
    border-right: 1px dotted var(--tape-edge);
    border-left: 1px dotted var(--tape-edge);
    opacity: 0.5;
    box-shadow:0.5px 0.5px 1px rgb(0,0,0,0.2);
}


/* The following CSS ONLY applies to mobile/small screens */

/* Container styling */
#container {
    width: calc(100% - 40px);
    padding:15px;
    margin-top:8px;
}

#sidebar-content {
    width: calc(100% - 20px);
}

#main-menu li {
    margin-bottom:15px;
    display:inline-block;
}

/* Skip to content button */

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

/* The following CSS ONLY applies to desktop/big screens */

@media screen and (min-width: 800px) {
    #container {
        max-width:1100px;
        width:90%;
        display:flex;
        gap:20px;
        margin:25px auto;
    }

    main {
        margin-top:10px;
    }

    #sidebar {
        flex: 1 1 calc(30% - 20px);
        margin-top:10px;
    }


    .icon {
        margin-top:-35px;
        margin-left:-40px;
    }
    
    /* Remove or comment out this block if you don't want a sticky sidebar */
    #sidebar-content {
        position:sticky;
        top:40px;
    }

    .sidebar-columns {
        display:block;
    }

    main {
        flex: 1 1 calc(70% - 30px);
    }
    
    .article-footer {
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .tag, .notes {
        margin:0;
    }
}