@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");
:root {
   font-size: 16px;
   line-height: 1.5;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol";

   -webkit-text-size-adjust: 100%;
   color: #24292e;
   --border-gray: rgb(153, 153, 153);
   --border-dark-gray: rgb(73, 73, 73);
   --card-gray: #f6f6f6;
   scroll-behavior: smooth;
}
* {
   box-sizing: border-box;
}
html {
   scroll-behavior: smooth;

}
body{
   position: relative;
}
h1, h2,h3,h4, h5, h6 {
               /* font-family: "Roboto", sans-serif; */
}
h2 div {
   font-size: 1.4rem;;   
}
h3 {
   padding: 0px 28px 8px 8px;
   margin: 10px 0px 0px;
   border-top: 4px solid var( --border-dark-gray);
   /* border-left: 4px solid var( --border-dark-gray); */
   display: inline-block;

}
main {
   font-size: 1.2rem;
   line-height: 1.5;
  }
svg {
   vertical-align: middle;
}
li > * {
   vertical-align: top;
}
ul {
   margin-top: 0px;
}
/* ul ul li {
   list-style-type:disc;
} */
ul a {
   padding-left: 4px;
   word-break: break-all;
}
ul * {
   vertical-align: text-bottom;

}
time {
   position: relative;
   top:-4px;
}
.repo-container ul  {
   margin: 0px 30px 0px;
   padding: 5px 0px;
   font-size: 1rem;
   flex: 1 1 calc(40% - 70px);
}
.repo-container {
   display: flex;
   align-items: flex-start;
   margin: 0px 0px 20px;
   flex-wrap: wrap;
}
.repo-container * {
   transition: all 0.2s;

}

.repo-container .img-container {
   flex: 0 1 100px;
   height: 100%;
   order: 1;
}
.img-container:hover{
   flex: 0 1 150px;

}
.repo-container .detail-container {
   /* 25px -> border + body margin */
   flex: 1 0 calc(100% - 100px);
   flex-wrap: wrap;
   margin:0px 0px;
   padding: 0px 20px;
   display: flex;
   order: 1;
   align-items: flex-start;
}
blockquote {
   margin: 0px 10px 0px 0px;
   background: var(--card-gray);
     padding: 5px 10px;
     border-left: 5px solid var(--border-gray);
     border-left: 5px solid var(--border-dark-gray);
     /* border-left: 5px solid rgb(73, 73, 73); */
     /* box-shadow: 0px 0px 10px 0px inset rgb(199, 199, 199); */
     font-size: 1.2rem;
     flex: 0 0 60%;
     min-width: 600px;
}

.img-container:hover ~ .detail-container{
   flex: 1 0 calc(100% - 150px);

}
.img-container:hover ~ .detail-container > blockquote{
   flex: 0 0 calc(60% - 20px);

}
.margin-top-0 {
   margin-top: 0px !important;
} 
.margin-bottom-2 {
   margin-bottom: 20px !important;
}
.margin-sides-1 {
   margin-left: 10px !important;
   margin-right: 10px !important;
}
.display-inline {
   display: inline-block;
}
.social * {
   font-size: 12px;
   text-decoration: none!important;
}
.social span {
   vertical-align: bottom;
}
.up {
   position:fixed;
   right: 10px;
   bottom: -5px;
   display: inline-block;
   font-size: 3rem;
   text-decoration: none;
   vertical-align: middle;
   opacity: 0.6;
}

.popup-animation {
   animation: bounce .8s;
}
kbd {
   background-color: #eee;
   border-radius: 3px;
   border: 1px solid #b4b4b4;
   box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
   color: #333;
   display: inline-block;
   position: relative;
   top:-2px;
   margin: 0px 3px;
   font-size: .85em;
   font-weight: 700;
   line-height: 1;
   padding: 2px 4px;
   white-space: nowrap;
   }
/* .repo-container > ul {
   display: inline-block;
   margin:0px;
   order:1;
   padding: 0px 30px;
} */


img {
   width: 100%;
   /* border-top: 10px solid  rgb(153, 153, 153);
   border-left: 10px solid  rgb(34, 34, 34);
   border-right: 10px solid  rgb(194, 194, 194);
   border-bottom: 10px solid  rgb(87, 87, 87);;
   */ 
   /* padding:2px;  */
   /* background-color: #000000;  */
   /* border-left: 5px solid var(--border-gray); */
   border: 2px solid black;
   /* vertical-align: top;
   margin: 10px -10px 0px 0px;
   margin: 43px -10px 0px 0px; */ 
}
.github-link {
   cursor: pointer;
   left: -5px;
   top: -2px;
   position: relative;
}
/* .gradient {
   pointer-events: all;
   fill: url("#gradient-layer-initial");
} */

/* social svg */
.social:hover a:hover .gradient-initial {
   opacity: 0;
}
.gradient-initial {
   transition: 0.4s;
}
.gradient ~ defs stop:first-child {
   stop-color: #e1a728;
}

.gradient ~ defs stop:nth-child(2) {
   stop-color: #e1a728;
}

.gradient ~ defs stop:last-child {
   stop-color: #24bed2;
}
/* github svg */
.gradient {
   pointer-events: all;
   fill: url("#gradient-layer");
}
.gradient-initial {
   transition: 0.4s;
}
.gradient ~ defs stop:first-child {
   stop-color: #e1a728;
}

.gradient ~ defs stop:nth-child(2) {
   stop-color: #e1a728;
}

.gradient ~ defs stop:last-child {
   stop-color: #24bed2;
}
/* .gradient[data-hover=false] ~ defs stop:first-child {
   stop-color: #240f3c;
}

.gradient[data-hover=false] ~ defs stop:nth-child(2) {
   stop-color: #3f2f0c;
}

.gradient[data-hover=false] ~ defs stop:last-child {
   stop-color: #1c2021;
} */
/* .gradient ~ defs stop:first-child {
   stop-color: #099b68;
}

.gradient ~ defs stop:nth-child(2) {
   stop-color: #6f28e1;
}

.gradient ~ defs stop:last-child {
   stop-color: #ac333b;
} */

time {
   font-size: 0.7rem;
   vertical-align: middle;
}
h1 {
   padding-bottom: 0.3em;
   margin-top: 0px;
   margin-bottom: 0px;
   font-size: 2rem;
   border-bottom: 1px solid #eaecef;
   font-weight: 600;
   line-height: 1.25;
}

#TOC {
   font-size: 1rem;
}
#TOC ul{
   padding-left:1rem;
}
#TOC ul li {
   text-indent: -8px;
}

.title {
   flex: 1 0 100%;
   /* left: -15px; */
   order: 1;
}

.npm {
   border: none;
   width:35px;
   margin:10px 8px 0px 0px;
}
@-webkit-keyframes bounce {
   0% {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
   }
   40% {
       -webkit-transform: translate3d(0, 100px, 0);
       transform: translate3d(0, -100px, 0);
   }
   100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
  }  }
@media screen and (max-width: 768px) {
   html {
      scroll-snap-align: start;
      scroll-snap-type:y mandatory;

   }
   
   .detail-container {
      padding: 0px!important;

   }
   .section-title {
      scroll-snap-align: start;
   }
   .repo-container .img-container{
      order: 0;
   }
   .img-container {
      flex: 1 1 100%!important;
   }
   blockquote{
      flex: 1 1 100%;
      min-width: initial;
   }

   blockquote, .repo-container ul {
      font-size: 1rem;
   }
   img {
      width: 100%;
      border: 1px solid black;
   }
   .repo-container ul {
      margin: 0px 0px 0px 20px;
   }

   .repo-container {
      margin:10px 0px 30px 0px;
      padding-top: 7px;
      scroll-snap-align: start;

   }
   /* hover */
   .img-container{
      flex: 0 1 100px;
   }
   .img-container:hover ~ .detail-container{
      flex: 1 0 calc(100% - 100px);
   
   }
   .img-container:hover ~ .detail-container > blockquote{
      flex: 1 1 100%;
   }
.up {
font-size: 2rem;

}