html{
   background: rgba(17,0,0,1);
}
body{
   font: normal normal 300 1rem/1.4 "Inconsolata", sans-serif;
   background: rgb(64,62,53);
   background: radial-gradient(circle, rgba(64,62,53,1) 0%, rgba(17,0,0,1) 100%);
   color: #fff;
   min-height: 1024px;
   height: auto;
   border: 8px solid #7f80b4;
}
ul{
   display: table;
}
ul>li{
   margin-top: 0.29em;
}
a{
   color: #DADE8E;
   text-decoration: none;
   border-bottom: 1px solid #DADE8E;
}
h1{
   font-size: 40px;
   color: #fff;
   padding: 5rem 0 5rem;
   width: 70%;
   margin-top: 1.25rem;
   font-family: "Roboto Mono";
   font-weight: 300;
}
h1::first-letter{
   color: #f7cb6e;
   font-weight: 700;
}
h2{
   font-size: 21px;
   font-weight: 200;
   margin-top: 5rem;
}
h2:nth-of-type(1){
   margin-top: 2.5rem;
}

:lang(ja){
   font-family: "Noto Serif JP";
   font-size: 0.875em;
   letter-spacing: 0.02em;
}
ul, h2{
   margin-left: 1.7rem;
}

.container{
   padding-left: 6.25rem;
}

div.logo{
   position: absolute;
   display: table;
   top: 6.5rem;
   right: 3.5rem;
}
span.logo-bg{
   display: block;
   position: absolute;
   left: 50%;
   top: 24px;
   background: #fff;
   border-radius: 50%;
   width: 38px;
   height: 38px;
   transform: translate(-50%, -50%);
   z-index: 0;
}
a.img{
   position: relative;
   color: #c1f7f7;
   font-size: 0.75rem;
   z-index: 1;
   display: block;
}
img.logo-github{
   display: table;
   width: 39px;
   height: auto;
   margin: 0.25rem auto;
}

@media (max-width: 414px){
   html{
      font-size: 18px;
   }
   body{/*
   border: 11px solid red;*/
      padding: 0;
      padding-bottom: 3rem;
   }
   ul, h2{
      margin-left: 0;
   }
   .container{
      padding: 1rem;
   }
   span.logo-bg{
   
   }
}