@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@font-face {
  font-family: "HackGen";
  src: url("/assets/fonts/HackGen-Regular.ttf")
}


html {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  width  : 100dvw;
  height : auto;
  margin : 0;
  padding: 0;
  font-family: HackGen, "Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial, Meiryo, sans-serif;
  font-style : normal;
  background : #181818;
  color      : #d8d8d8;
}


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: #d8d8d8;
}

h2 {
  padding-left: 8px;
  border-left : 4px solid #90a959;
}

h3 {
  width : 100%;
  height: auto;
  margin-top    : 1.5rem;
  padding-bottom: 6px;
  border-bottom : 1px solid #90a959;
}


p {
  margin: .5rem 0;
}


blockquote {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left : 2px solid #d8d8d8;
}


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 #d8d8d8;
}

article a:hover {
  color: #90a959;
}

a, a:visited {
  text-decoration: none;
  color: #d8d8d8;
}


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


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

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


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

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