body{
        margin:0px;
        padding:0px;
        background-color: rgb(0, 0, 0);
        font-family: Arial, Helvetica, sans-serif;
        font-size:14px; 
        padding:4px;
        }

/* basic styling */


    a{
    text-decoration: none;
    color:#6ad0ff;
    }

    a:hover{
    color:yellow;
    }

    p{
    padding:5px;
    }
    
    details {
    padding:5px;}

    summary{
    background-color: #000000;
    color:white;
    padding:3px;
    }

    li{
        padding:6px;
        list-style:none;
    }

    details li{
    list-style-image: url("https://helianthus-fields.neocities.org/graphics/bullets/bullet_pmd_paper_bullet.png");
    }


    h1, h2, h3, h4{
    padding:4px;
    margin:0px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    color:rgb(0, 0, 0);
    }

    h1{
    color:white;
    font-family: 'pixelony',monospace;
    }

    pre{
    overflow-x:auto;
    max-width: 100%;
    }


/* container grid */

.container{
display:grid;
max-width:800px;
grid-template-columns: auto;
grid-template-areas:
    'title'
    'body'
    'footer'
    ;
    margin:0 auto;
}

.container > div{
margin:5px;
}


.title{
grid-area:title;
font-size:30px;
}

.body{
grid-area:body;
padding:4px;
}

.header{
color:white;
font-size:30px;
}
.comic{
text-align:center;
padding:4px;
width:100%;
margin:5px;
margin:0 auto;

}

.comic img{
max-width:60%;
}

.notes{
background-color:white;
margin:5px;
width:100%;


}

.comments{
height:fit-content;
}

.footer{
grid-area:footer;
padding:4px;
}

h3{
background-color: rgb(0, 0, 0);
padding:3px;
margin:0px;
font-size:25px;
letter-spacing: normal;
}

.block{
background-color: white;
padding:8px;
margin-bottom:6px;
}

.button{
border:1px solid black;
border-radius:5px;
margin:3px;
padding:10px;
color:white;
font-size:20px;
background-size:cover;
height:20px;
width:120px;
display:inline-block;
}

.nav1{
float:right;
}


pre{
text-wrap:wrap;
max-width: 500px;
}