:root {--bs-body-font-family: 'Josefin sans', sans-serif;}
html {background-color: #D9D9D9;}
body {background-image: url("pa027.gif") !important;}
em, i { font-style: italic !important; }

/* BODY */
.home p{line-height: 1.6em; font-family: 'Josefin sans'; font-size: 16px; color:  #b91660;}
.about p{line-height: 1.6em; font-family: 'Josefin sans'; font-size: 18px; color:  #b91660;}
.blogposts {background-image: url("pa027.gif");}
h2, h3, ul, li, a {color: #b91660;}
p {line-height: 1.6em; font-family: 'Spectral'; font-size: 18px;}
img {max-width: 100%; height: auto; margin-top: 0.5em; margin-bottom: 0.5em;}
.img-cntr { margin: auto; width: 800px;}


/* HANN LOGO */
.logo {width: 500px; margin-top: 1em; margin-bottom: -3em;}
.logo {transition: .3s;}
.logo:hover {transform: scale(1.1);}
.header2logo {width: 250px;}
.headerblog {width: 150px;}


/* NAVIGATION */

/* #art {color: #b91660; margin-top: 1em; background-color: rgba(244, 228, 228, 0.642) ; border: #b91660;border-width: 2px; border-style: dotted; padding: 10px; height: 150px; overflow-y: auto; font-weight: bold;} */

#misc {color: #b91660; margin-top: 1em; background-color: rgba(244, 228, 228, 0.642) ; border: #b91660;border-width: 2px; border-style: dotted; padding: 10px; height: 150px; overflow-y: auto; font-weight: bold;}


/* 
#navi {color: #b91660; margin-top: 1em; background-color: rgba(244, 228, 228, 0.642) ; border: #b91660;border-width: 2px; border-style: dotted; padding: 10px; height: 97px; overflow-y: auto; font-weight: bold;} */

.navigation a{ display: block;color: #ffffff; background-color: #d781a8; padding: 3%; border-bottom: #b91660; border-bottom: dotted; border-width: 1px; }

.art a{ display: block;color: #ffffff; background-color: #d781a8; padding: 3%; border-bottom: #b91660; border-bottom: dotted; border-width: 1px; margin: auto; }

/* 
.navigation li{ list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 4c-4-1-6 3-6 3s-2-4-6-3-4 6-2 8l8 8 8-8c2-2 2-7-2-8z" fill="%23808"></path></svg>'); margin-left:8% !important;} */

/* MISC HOVERS */
a:hover {color: #93124c; text-decoration: underline;}
/* .hoverr {transition: .7s;}
.hoverr:hover {transform: scale(1.1);} */

.hoverr {transition: .3s;}
.hoverr:hover {transform: scale(1.6); } 

.btn {font-size: 18px; color: #8c1048;font-weight: bold; transition: .2s;}
.btn:hover {transform: scale(1.1); color: #93124c;}
.recentposts a:hover {color: #93124c;}
.navigation a:hover {color: #93124c;}
.bloglink a:hover {color: #93124c;}
.blog-item a:hover {transform: scale(1.1);}

/* LISTS */
ul {padding: 0; margin: 0; text-decoration: 0;}
ul .blog-item {list-style-type: none;padding: 0; margin: 0;}
li a {text-decoration: none; color: #b91660;}
#postlistdiv ul {font-size: 1.2em; padding: 0; list-style-type: none;}
#recentpostlistdiv ul {font-size: 1.2em; padding: 3; list-style-type: none;}
.todo li{list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 4c-4-1-6 3-6 3s-2-4-6-3-4 6-2 8l8 8 8-8c2-2 2-7-2-8z" fill="%23808"></path></svg>'); margin-left: 8% !important;}
#changelog li {color: #b91660;}

/* HOME CONTENTS */
.content {background-color: rgba(244, 228, 228, 0.9) ; padding: 20px 5% 20px 5%;}
.content-intro{font-size: 16px;}
.container-sm {max-width: 700px;}
.about .container-sm {max-width: 800px;}
.sidebar-header {margin-bottom: 1%;}
#container {margin: 0em auto;; color: #151515;}
#archive-content {height: 620px; overflow-y: auto; background-color: rgba(244, 228, 228, 0.9 );padding: 10px 5% 20px 5%; }


#content {background-color: rgba(244, 228, 228, 0.9) ; padding: 10px 5% 20px 5%; margin-bottom: 2em;}

.neighbor {margin-top: .7em; background-color: rgba(244, 228, 228, 0.642) ; border: #b91660; border-width: 2px; border-style: dotted;  padding: 10px; height: 100px; overflow-y: auto;}
#todo {font-size: 1em; margin-top: 1em; background-color: rgba(244, 228, 228, 0.642) ; border: #b91660; border-width: 2px; border-style: dotted;  padding: 10px ;height: 150px; overflow-y: auto;}
#changelog {margin-top: .7em; background-color: rgba(244, 228, 228, 0.642) ; border: #b91660; border-width: 2px; border-style: dotted;  padding: 10px; height: 200px; overflow-y: auto;}
.sb-border {margin-bottom: 1em;}
#gif {background-color: rgba(244, 228, 228, 0.642) ; border: #b91660; border-style: dotted; border-width: 2px; border-radius: 10px; padding: 5px;}

/* BLOG CONTENTS */
.caption {margin-top: 0;font-size: 0.9em;font-style: italic;}
.title {color: #8c1048 !important; font-weight: bold; margin:30px 0px 1px 0px}
.subtitle {color: #a82761 !important; font-size: 1.5em; margin: 1px 0px 2px 0px}
.date {color: #924d6c !important; font-size: 1em; margin:10px 0px 30px 0px;}
.desc {color: #924d6c !important; font-size: 1em;}
.c-buttons {gap: 1em;}

.fieldnotes {height: 500px; overflow-y: auto; padding: 1%;}


.moreposts {font-size: 0.8em; margin-top: 0.2em;}

.footer {color: #6d1f42; font-size: 1em;; padding: 10px 5% 10px 5%; max-width: 1150px;}
.buttonss{ border: #b91660; border-style: dotted; border-radius: 10px; border-width: 2px;  background-color: rgba(244, 228, 228, 0.642) }
ul .footerbadge {gap: 10px;}

.button-item {transition: .3s;}
.buttons-item:hover {transform: scale(1.1);}



/* SIDEBARS */
#sidebar, #sidebar-2 {background-color: rgba(244, 228, 228, 0.9) ;margin-bottom: 2em; padding: 1.5em;}

iframe {height:550px;width:600px; border: #b91660; border-width: 2px; border-style: dotted;  padding: 10px;}

.badge {gap: 3em;}