body { margin: 0; padding: 0 }
body > * { max-width: 700px; margin:0px auto; padding:10px; }
body a { color: black }
b { font-weight: bold }
i { font-style: italic; }
h { display: inline-block;vertical-align: top; width:calc(50% - 5px)}

header .background { background-image: url('../media/content/background3.png');height: 85vh;background-position: center; background-repeat: no-repeat;background-size: cover;position: relative;}
header .maintext { text-align: center;position: absolute;top: 70%;left: 50%;transform: translate(-50%, -50%);color: black; font-size: 30px;}
header {max-width: 1280px; padding-bottom: 0px; padding-top: 0px; margin: none;}

main > * { margin-bottom: 10px; }
main > img { max-width: 30%; margin: 0px auto; display: block; margin-bottom: 20px; image-rendering: auto;}
main a { text-decoration: underline; }
main h1 { color: black;text-align: center; font-size: 40px;text-transform: capitalize; padding: 0px 30px }
main h2 { text-align: center; color: black;text-align: center; font-size: 20px;text-transform: capitalize; margin-bottom:30px; display:block; }
main hr { clear:both; display: block;background:#fff;width:8px;height:8px;margin:0px auto 30px;border-radius: 30px; border:1.5px solid #666; margin-top:60px; margin-bottom:60px; }

main p {color:#505050;font-size: 20px;margin-left: 40px; margin: 0px auto 30px auto;line-height: 32px; }
main ul { display: block;margin-left:30px; margin-bottom:30px;line-height: 32px }
main ul li { font-size:20px; list-style-type:none; color: #505050}
main p > img {max-width: 40%;}
footer { background: #fff; color: #000; line-height: 30px; font-size: 15px; color: grey; }
footer .social_twitter { background: url("../media/interface/icon.twitter.png"); }
footer .social_patreon { background: url("../media/interface/icon.patreon.png"); }
footer .social_webring { background: url("../media/interface/icon.webring.png"); }
footer .social_100r { background: url("../media/interface/icon.100r.png"); }
footer .social_github { background: url("../media/interface/icon.github.png"); }
footer .social_mastodon { background: url("../media/interface/icon.mastodon.png"); }
footer .icon { display: inline-block; width: 30px; height: 30px; float:right; filter: invert(50%);background-size: 20px; background-position: center; background-repeat: no-repeat; }

.col2 { columns: 2 }

@media only screen and (max-width: 840px) {
  header .maintext { font-size: 22px; }
  header .background {image-rendering: auto;}
  footer .icon { width: 10px; padding-left: 15px;}
  main > img {max-width: 50%;}
  main h1 {font-size: 25px;}
  main h2 {font-size: 18px;}
  img {max-width: 50%;}
 }

@media (prefers-color-scheme: dark){
  header h1 a {color: #111}
  main {background: #111; color: white}
  main > img {border-radius: 200px;}
  body {background: #111}
  body a {color: white}
  main h1 { color:white}
  main h2 { color:white}
  main hr {border: grey}
  main a {color: white}
  main p {color:white}
  main ul li {color: white}
  footer { background: #111; color: #000; color: grey}

}