:root {
  --base: 1.06rem; }
  @media (max-width: 45rem) {
    :root {
      --base: 0.88rem; } }

body {
  max-width: 50rem;
  margin: auto;
  padding: 1.5em;
  font-family: Lato, Arial, sans-serif;
  line-height: 2;
  font-size: 17px;
  font-size: var(--base); }

img {
  display: block;
  margin: auto;
  max-width: 100%;
  height: auto;
  border: none; }

ul {
  padding-left: 2em; }

@supports (-webkit-background-clip: text) {
  h1 {
    background: linear-gradient(90deg, #ff5d85, #ff865d, #ff92ad);
    -webkit-background-clip: text;
    color: #0000; } }

@supports (background-clip: text) {
  h1 {
    background: linear-gradient(90deg, #ff5d85, #ff865d, #ff92ad);
    background-clip: text;
    color: #0000; } }

h2 {
  font-size: 1.8em; }

h3 {
  font-size: 1.5em; }

h4 {
  font-size: 1.25em; }

h2, h3, h4, h5, h6 {
  margin-top: 3.5em;
  line-height: 1.5; }

p {
  margin: 1.5em 0; }

table {
  margin: 1em 0;
  border: 1px solid #444;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%; }

th, td {
  border: 1px solid #444;
  padding: 2px 4px; }

th {
  background-color: #eee;
  vertical-align: top;
  text-align: left; }

td ul {
  margin: 0; }

dt {
  color: #666; }

dd {
  margin-left: 1em; }

pre {
  margin: 4.5em 0;
  background-color: #444;
  color: #eee;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 2em #444, 0 0 0 2em #ff92ad;
  white-space: pre-wrap;
  font-size: 1.2em; }

dt, em, dfn, cite {
  font-weight: 700;
  font-style: normal; }

cite {
  display: block;
  margin-bottom: 2em;
  text-align: right; }

blockquote {
  border-left: 4px solid #ddd;
  padding-left: 1em;
  color: #666; }
  blockquote h2, blockquote h3, blockquote h4 {
    margin-top: 0; }

a {
  color: #f58; }
  a:hover {
    color: #d50040; }

.header {
  margin: 1em 0 4em;
  text-align: center; }
  .header a {
    text-decoration: none; }
    .header a:hover {
      color: #f58; }

.logo {
  font-size: 1.2em;
  font-weight: normal;
  letter-spacing: 0.2em; }

.logo-a {
  display: inline-flex;
  align-items: center;
  color: #555;
  fill: #ff92ad; }

.nav {
  margin: 1.5em 0;
  padding: 0;
  text-transform: uppercase; }
  .nav li {
    display: inline-block;
    margin: 0 .5em;
    font-size: 0.9em; }
  .nav a {
    color: #777; }

.archive {
  padding-left: 0;
  list-style: none;
  line-height: 1.7;
  color: #444; }
  .archive li {
    margin-bottom: 1.5em; }

.float-button {
  position: relative;
  padding: 1em;
  transition: box-shadow 0.3s ease-out 0.1s; }
  .float-button:hover {
    box-shadow: 0 0.5em 1.2em rgba(0, 0, 0, 0.1); }
  .float-button a {
    text-decoration: none; }
    .float-button a:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0; }

.a {
  display: inline-block;
  letter-spacing: 0.05em;
  color: #666;
  text-decoration: none; }
  .a:hover {
    color: #f58; }

.date {
  margin-top: 0.5em;
  font-size: 0.76em; }

.title {
  line-height: 1.42; }

.sns {
  display: flex;
  align-items: center;
  margin-top: 3em;
  line-height: 1; }
  .sns > * {
    margin-right: 0.5em; }

.ad {
  margin: 1em 0; }

.paginate {
  margin-top: 2em; }

.copyright {
  margin: 4em 0 2em;
  text-align: right; }