@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');


:root {
  --white: rgb(216, 216, 216);
  --accent-color: rgb(254, 223, 225);
}


html {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  width  : 100dvw;
  height : auto;
  margin : 0;
  padding: 0;
  font-family: "Klee One", "Zen Maru Gothic", "Open Sans", "Helvetica Neue", Helvetica, Arial, Meiryo, sans-serif;
  font-style : normal;
  background : linear-gradient(180deg, rgb(114, 72, 64) 0%, rgb(115, 67, 56) 100%);
  color      : var(--white);
}


body {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  width     : 60dvw;
  max-width : 700px;
  height    : auto;
  min-height: 100dvh;
  margin  : 0;
  padding : 0;
  overflow-x: hidden;
}


h1, h2, h3, h4, h5 {
  color: var(--white);
}

h2 {
  padding-left: 8px;
  border-left : 4px solid var(--accent-color);
}

h3 {
  width : 100%;
  height: auto;
  margin-top    : 1.5rem;
  padding-bottom: 6px;
  border-bottom : 1px solid var(--accent-color);
}


p {
  margin: .5rem 0;
}


blockquote {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left : 2px solid var(--white);
}


pre {
  padding: 1rem;
}


img {
  max-width : 100%;
  max-height: 100%;
  margin : 1rem;
  padding: 0;
  object-fit: contain;
}


article {
  width : 100%;
  height: auto;
  margin : 1rem 0;
  padding: 0;
}


article a {
  border-bottom: 2px dotted var(--white);
}

article a:hover {
  color: rgb(215, 196, 187);
}

a, a:visited {
  text-decoration: none;
  color: var(--white);
}


img {
  max-width: 100%;
  pointer-events: none;
}


.container-row {
  display       : flex;
  flex-direction: row;
}

.container-column {
  display       : flex;
  flex-direction: column;
}


.hr {
  margin: 2rem auto;
  width : 30vw;
  border-width: 0 0 8px;
  border-style: solid;
  border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><circle fill="hsla(0, 0%, 84.7%, 1.0)" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat;
}


@media (max-width: 640px) {
  body {
    width: 90dvw;
  }
}

@media (min-width: 640px) and (max-width: 1024px) { 
  body {
    width: 80dvw;
  }
}