/*Style sheet*/

/*No preference or Light mode*/
:root {
   --max-width: 800px;

   --screen-color: #dcdcdc;
   --backgroud-color: #f5f5f5;
   --border-color: #808080;
   --highlight-color: #dcdcdc;
   --text-color: #1f1f1f;
   --link-color1: #1a0dab;
   --link-color2: #660099;
}
/*Dark mode*/
@media (prefers-color-scheme: dark) {
   :root {
       --screen-color: #111111;
       --backgroud-color: #202020;
       --border-color: #a9a9a9;
       --highlight-color: #333333;
       --text-color: #dcdcdc;
       --link-color1: #1b95e0;
       --link-color2: #9849bf;
   }
}

/*Font size*/
html {
   font-size: 16px;
}
@media (min-width: 400px) {
   html {
       font-size: 18px;
   }
}
@media (min-width: 600px) {
   html {
       font-size: 20px;
   }
}
@media (min-width: 800px) {
   html {
       font-size: 22px;
   }
}

/*Top_menu ON/OFF*/
#top_menu {
   display: none;
}

@media (min-width: 800px) {
   #top_menu {
       display: block
   }
}

body {
   background-color: var(--screen-color);
}

header,
main,
footer {
   margin: 0.2rem auto;
   padding: 0.2rem 1rem;
   max-width: var(--max-width);
   background-color: var(--backgroud-color);
   color: var(--text-color);
}

p {
   line-height: 1.8rem;
}

a {
   text-decoration: none;
   border-radius: 0.3rem;
}

a:link {
   color: var(--link-color1);
}

a:visited {
   color: var(--link-color2);
}

main a:hover {
   background-color: var(--highlight-color);
}

footer {
   margin-bottom: 3.7rem;
}

img {
   max-width: var(--max-width);
   width: 100%;
   height: auto;
}

.half-width {
   width: 50%;
   height: auto;
}

.quarter-width {
   width: 25%;
   height: auto;
}

.align-center {
   text-align: center;
}

/*Sections*/
h1 {
   font-size: 1.5rem;
   margin: 0.2rem 0rem;
}
h2 {
   padding: 0.5rem;
   font-size: 1.4rem;
   background-color: var(--highlight-color);
   border-left-style: solid;
   border-left-width: 0.3rem;
}
h3 {
   padding-left: 0.5rem;
   font-size: 1.3rem;
   border-left-style: solid;
   border-left-width: 0.2rem;
   border-bottom-style: solid;
   border-bottom-color: var(--highlight-color);
}
h4 {
   padding-left: 0.5rem;
   font-size: 1.2rem;
   border-bottom-style: dashed;
   border-color: var(--highlight-color);
}
h5 {
   padding-left: 0.5rem;
   font-size: 1.1rem;
   border-bottom-style: double;
   border-color: var(--highlight-color);
}
h6 {
   font-size: 1rem;
   padding-left: 0.5rem;
}

.time_stamp {
   text-align: right;
   margin-top: 0.2rem;
   padding: 0;
}

/*Navigation*/
.breadcrumb {
   list-style: none;
   margin: 0;
   padding: 0.5rem;
}
.breadcrumb li:after {
   content: '/';
   margin-top: 0.3rem;
}

.nav_link ul {
   text-align: center;
   margin: 0;
   padding: 0;
}

.nav_link li,
.breadcrumb li {
   display: inline-flex;
   margin: 0;
   padding: 0;
}

.nav_link a,
.breadcrumb a,
#nav-drawer,
.toc_open,
.toc_contents a,
#copy_url {
   margin: 0.2rem;
   padding: 0.3rem 0.3rem;
   background-color: var(--backgroud-color);
   border-radius: 0.3rem;
   font-weight: bold;
   color: var(--text-color);
   text-align: center;
   line-height: 1rem;
}

#copy_title_url {
   margin: 1rem auto;
   text-align: center;
   width: 19rem;
   border-style: solid;
   border-width: 0.1rem;
   border-color: var(--border-color);
   border-radius: 0.3rem;
   color: var(--text-color);
}

.nav_link a:hover,
.breadcrumb a:hover,
#nav-drawer:hover,
#nav-open:hover,
.blog_card:hover,
.toc_open:hover,
.toc_contents a:hover {
   background-color: var(--highlight-color);
   cursor: pointer;
}

#copy_title_url:hover,
#copy_url:hover {
   background-color: var(--highlight-color);
   cursor: copy;
}

a svg,
.nav_link svg,
.breadcrumb svg,
#copy_title_url svg {
   vertical-align: -0.15rem;
}

.nav_link small {
   font-weight: normal;
   font-size: 0.7rem;
}

/*Blog card*/
.blog_card {
   margin: 1rem 0rem;
   padding: 0.5rem;
   display: flex;
   border-style: solid;
   border-width: 0.1rem;
   border-radius: 0.5rem;
   border-color: var(--border-color);
   background-color: var(--backgroud-color);
}

.blog_card img {
   align-self: flex-start;
   width: 100px;
   margin-right: 1rem;
}

.blog_card div {
   color: var(--text-color);
}

.blog_card span {
   font-weight: bold;
}

/*Product card*/
.product_card {
   margin: 1rem 0rem;
   padding: 0.5rem;
   display: flex;
}

.product_card img {
   align-self: flex-start;
   width: 150px;
   max-width: 30%;
   margin-right: 1rem;
}

.product_card a {
   display: inline-block;
   margin: 0.1rem 0;
   padding: 0.3rem;
}

.product_card ul {
   display: flex;
   flex-direction: column;
   list-style: none;
   padding: 0;
   margin: 0;
}

.product_card li:last-child {
   margin-top: auto;
}

.product_card li:first-child {
   font-weight: bold;
}

.app_botton a {
   margin: 0.1rem 0.2rem;
   padding: 0.3rem;
}

#bottom_nav {
   width: 100%;
   height: 3.2rem;
   position: fixed;
   bottom: 0rem;
   border-top-style: solid;
   border-color: var(--border-color);
   background-color: var(--backgroud-color);
}

/*Sidebar*/
#nav-drawer {
   position: relative;
}

.nav-unshown {
   display: none;
}

#nav-open {
   display: inline-block;
   vertical-align: -1rem;
}

#nav-close {
   display: none;
   position: fixed;
   z-index: 99;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--screen-color);
   opacity: 0;
   transition: 0.3s ease-in-out;
}

#nav-content {
   overflow: auto;
   position: fixed;
   bottom: 0;
   left: 0;
   z-index: 9999;
   width: 14rem;
   height: 100%;
   background: var(--backgroud-color);
   transition: .3s ease-in-out;
   transform: translateX(-105%);
   cursor: default;
}

#nav-content ul {
   margin-left: 0.5rem;
   margin-top: 1rem;
   padding: 0;
   display: flex;
   flex-direction: column;
}

#nav-input:checked ~ #nav-close {
   display: block;
   opacity: 0.6;
}

#nav-input:checked ~ #nav-content {
   transform: translateX(0%);
}

/*Table of contents*/
.toc {
   border: solid;
   border-width: 0.1rem;
   border-color: var(--border-color);
}
.toc_contents {
   font-size: 0.9rem;
}
.toc_contents a {
   padding: 0 0.3rem;
   font-weight: normal;
}
.toc_contents ul {
   padding-left: 0.5rem;
   list-style: none;
   counter-reset: section;
}
.toc_contents li::before {
   counter-increment: section;
   content: counters(section, ".")".";
   font-style: italic;
}
.toc_contents li {
   padding-left: 0.5rem;
   margin: 0.2rem 0rem;
}
.toc_contents ul:first-child > li {
   padding-left: 0rem;
}

/*Table*/
.table_scroll {
   white-space: nowrap;
   overflow: auto;
}
table {
   margin: auto;
   border-collapse: collapse;
   text-align: center;
   line-height: 1rem;
}
tr:first-child {
   background: var(--highlight-color);
   border-top-style: solid;
   border-bottom-style: solid;
   border-color: var(--text-color);
}
tr:last-child {
   border-bottom-style: solid;
   border-color: var(--text-color);
}
th {
   padding: 0.5rem 0.5rem;
}
td {
   padding: 0.5rem 1rem;
}
tr:nth-child(n+2) td {
   text-align: left;
}
tr:nth-child(n+2) th {
   text-align: right;
}
tr:nth-child(2n+3) {
   background: var(--highlight-color);
}

/*Figure*/
figure {
   margin: 0 0 1rem 0;
   padding: 0;
   text-align: center;
}
figcaption {
   text-align: center;
}