zyllian.github.io/styles/index.css

@charset "UTF-8";body{--bg-color:rgb(255,196,252);--text-color:black;--accent-color:rgb(197,48,197);--link-color:var(--accent-color);--accent-text-color:white;--accent-color-neutral:var(--accent-color);--accent-text-color-neutral:var(--accent-text-color);}@media (prefers-color-scheme:dark){body{--bg-color:rgb(104,25,104);--text-color:white;--accent-color:var(--accent-color-neutral);--link-color:rgb(255,196,252);--accent-text-color:white;--accent-color-neutral:rgb(74,17,74);--accent-text-color-neutral:#bbb;}}body{font-family:sans-serif;margin:0;background-color:var(--bg-color);color:var(--text-color);height:100vh;}header.main-header{display:block;padding:4px;background-color:var(--accent-color);color:var(--accent-text-color);display:flex;gap:4px;}header.main-header a{color:inherit;}header.main-header .spacer{margin-left:auto;}a{text-decoration:none;color:var(--link-color);}a:hover,a:focus{text-decoration:underline;}main.page{margin:8px;}abbr{cursor:help;}.images-list{display:flex;flex-wrap:wrap;}.images-list .image{position:relative;padding:4px;height:auto;}.images-list .image .image-actual{display:block;width:300px;height:100%;object-fit:cover;}.images-list .image .title{position:absolute;bottom:0;left:0;padding:4px;margin:4px;background-color:rgba(0,0,0,0.7);color:white;}.image-full .title,.image-full .tags-title{margin-bottom:0;}.image-full .image-actual{width:100%;max-height:80vh;object-fit:contain;background-color:rgba(0,0,0,0.3);}.blog-post-list .post p{margin:0;}.blog-post-list .post .title{font-size:1.2rem;}.blog-post-list .post .short-desc{font-size:0.9rem;font-style:italic;}.blog-post-list .post .short-desc:before{content:"└ ";}.blog-post{margin-left:auto;margin-right:auto;max-width:max(1000px,40%);}.blog-post .title,.blog-post .tags-title{margin:0;}.blog-post .header-image-wrapper{color:var(--accent-text-color-neutral);background-color:var(--accent-color-neutral);font-style:italic;font-size:1.2rem;margin-bottom:8px;}.blog-post .header-image-wrapper .short-desc{margin:0;padding:8px;}.blog-post .header-image-wrapper .header-image{width:100%;max-height:60vh;object-fit:cover;object-position:50% 50%;}.blog-post .content{text-indent:1rem;}.blog-post .content h1,.blog-post .content h2,.blog-post .content h3,.blog-post .content h4,.blog-post .content h5,.blog-post .content h6{text-indent:0;}