body { background:#000; color:#fff; font-size: 20px;margin: 0px}
b { font-weight: bold }

a[href^="http://"]:not([href*="kokorobot.ca"]):after,/*
a[href^="https://"]:not([href*="kokorobot.ca"]):after{content: "*" }*/
a.noglyph:after { content:"" !important; }

header { display: block;background: #eee;text-align: center;color:#111;padding:40px 0px 10px;}
header h1 { font-size: 40px; font-weight: bold; text-transform: uppercase; letter-spacing: 6px; font-weight: normal; margin-bottom:15px;}
header h2 { font-size:30px;position: absolute;top:10px;left:20px; }
header h2:hover { color:white; }
header a {color: black; text-decoration: none}
header a:hover { cursor: pointer; text-decoration: underline;}
header ul {padding: 15px;}
header ul li {display:inline-block; width: 140px; line-height: 30px}
header ul li img {width: 100%; height: auto;}

links-list {display: block;columns: auto 30ch;}
links-item {display: block;padding-bottom: 1rem;break-inside: avoid;}
links-item p {display: block;break-inside: avoid;margin: 0;border: 2px dotted;border-radius: 15px;padding: 0.6em 1em 0.8em;}

ul.gallery li {display:inline-block; width: 400px; line-height: 30px}
ul.gallery li img {width: 100%; }
ul.nobull li {list-style-type: none}

ul { margin:0px 0px 30px 0px; }
.col2 { columns: 2 }

main {padding: 30px;max-width: 700px;margin: 0 auto;}
main a {color: white;}
main p img {padding: 10px;}
main pre {border: 1px solid white; padding: 15px; overflow: scroll;}
main img {max-width: 100%; height: auto;}

.grid {list-style-type: none;width: 100%;display: grid;grid-template-columns: repeat(3, 1fr);}
.commission {box-sizing: border-box;padding: 10px;margin: 0;}
.featured {width: 100%;height: 150px;background-repeat: no-repeat;background-size: cover;background-position: center;}

main .button { background-color: #000;border: 2px solid white;color: white;padding: 5px 28px;text-align: center;text-decoration: none;display: inline-block;font-size: 18px;border-radius: 200px;font-weight: bold; margin-top: 10px; margin-right: 15px; margin-bottom: 10px;}
main .button:hover { background-color: #333 !important; color: white; cursor:pointer; }

main gallery { display: block; text-align: center; }
main gallery img { width: calc(30%); padding-bottom: 6px;border-radius: 3px;display: inline-block }
main gallery hr { margin-bottom:30px; display:none; }
main q {font-size: 20px;max-width: 500px; display: block; font-style: italic; margin-bottom: 30px; margin-top: 30px}
main cite {font-size: 17px;display: block;clear: both;margin-bottom: 30px;}
main cite:before {content: "— ";}
main table {display: inline-block;}
main img.medium { max-width: 300px; padding: 10px}

footer { background: #fff; color: #000; padding: 30px; font-size: 20px;}
footer a {color: black; text-decoration: none}
footer a:hover { cursor: pointer; text-decoration: underline;}

@media only screen and (max-width: 840px) {
main gallery {max-width: fit-content;}
header ul li {display:inline-block; width: 80px;}
header ul li img {width: 70%; }
}

@media screen and (min-width: 840px) {
.hide-on-desktop {display: none;}
}

@media (prefers-color-scheme: light){
header {background: white}
body {background:#eee; color:#000;}
main a {color: black;}
main .button {background-color: #eee;border: 2px solid black;color: black;}
main .button:hover { background-color: #000 !important; color: white; cursor:pointer; }
main pre {border: 1px solid black}
.monochrome {filter: invert(1);}
}