html,body{margin:0;padding:0;color:#222;font-family:sans-serif;line-height:1.5;background-color:#f5f5f5}header,footer{margin:0;padding:1rem;background-image:linear-gradient(90deg,#24376f 10%,#3890aa 77%);color:#ddd}header a,footer a{color:#eee;text-decoration:none}header a:hover,footer a:hover{text-decoration:underline}header h1{margin:0;padding:0;font-size:2rem}header p{margin:1rem 0;padding:0;font-size:1rem}header nav,header nav ul{display:block;margin:0;padding:0}header nav ul li{display:inline;margin:0}header nav ul li::before{content:"【"}header nav ul li::after{content:"】"}main{max-width:768px;margin:0 auto;padding:1rem;background-color:#f5f5f5}main h2{padding:1rem;background-color:#ddebef;border-bottom:#3890aa 2px solid;border-radius:9px;word-break:auto-phrase;text-wrap:pretty}main a{color:#24376f;text-decoration:none}main a:hover{color:#3890aa;text-decoration:underline}.article-info{text-align:right}.article-info p{font-size:smaller}.article-info ul{display:block}.article-info ul li{display:inline}.article-info ul li a{background-color:#24376f;padding:.25rem .5rem;border-radius:.5rem;text-decoration:none;color:#fafafa}.article-info ul li a:hover{background-color:#3890aa;text-decoration:none;color:#fafafa}.article-info .author{background-color:#fff;border:#3890aa 1px solid;padding:1rem;border-radius:2rem;text-align:left;vertical-align:middle}.article-info .author img{margin:1rem;width:4rem;float:left}.article-info .author br{clear:both}