body {
   margin:           0;
   padding:          0;
   background-color: #000;
   font-size:        1rem;
   font-family:      "verdana", sans-serif;
   line-height:      1.6;
}

a {
   text-decoration: none;
   color:           #00A7FF;
}
a:focus, a:hover {
   text-decoration: underline;
   color:           #FFDC00;
}

a:focus {
   outline:         1px solid #00A7FF;
   text-decoration: none;
}

div#site_container {
   max-width: 799px;
   padding:   10px;
   margin:    0 auto 0 auto;
   color:     #F5F4CB;
}

/* ----------------------------------------------------------------------------
 * Header
*/
header#header {
   display:       flex;
   border-bottom: 2px dotted gray;
}

a#site_link {
   color: #FFF;
}

img#header_logo_image {
   width:  150px;
   height: 150px;
}

div#header_abouts {
   padding: 0 20px;
}

p#header_title {
   font-size: 2rem;
   padding:   22px 0 0 20px;
   margin:    0;
}
p#header_about {
   padding:      0;
   margin:       0;
   padding-left: 20px;
   font-size:    1.5rem;
}


/* ----------------------------------------------------------------------------
 * Menu (navbar)
*/
nav#menu {
   margin:     0;
   border:     2px dotted gray;
   border-top: 0;
}
menu#menu_items {
   margin:     0;
   padding:    5px;
   text-align: right;
}
li.menu_item {
   list-style-type: none;
   margin:          0 5px;
   text-transform:  capitalize;
   font-size:       1.2rem;
   display:         inline;
}

li.menu_item a {
   color: #FFDC00;
}
li.menu_item a:hover {
   color: #00A7FF;
}


/* ----------------------------------------------------------------------------
 * Article
*/
article#article {
   font-size: 1.2rem;
}

img#article_logo {
   width:       160px;
   height:      90px;
   border-top:  0;
   float:       inline-end;
   margin-left: 10px;
}

/* Page 404 structure */
div.pic_err {
   display:       flex;
   margin-bottom: 20px;
}

figure.pic_err {
   width: 400px;
}
img.pic_err {
   width: 400px;
}

figcaption.pic_err {
   text-align: center;
   color:      gray;
}

/* Article structure*/
h1#article_title {
   font-size:   1.8rem;
   padding-top: 10px;
   margin:      0;
}

div#article_refs {
   text-align: right;
   font-size:  1.1rem;
}

h2.tyto, h3.tyto, h4.tyto, h5.tyto, h6.tyto {
   margin:      5px 0;
   color:       #FFF;
   font-weight: bold;
}

h2.tyto {
   font-size: 1.7rem;
}

h2.tyto {
   font-size: 1.6rem;
}

h3.tyto {
   font-size: 1.5rem;
}

h4.tyto {
   font-size: 1.4rem;
}

h5.tyto {
   font-size: 1.3rem;
}

h6.tyto {
   font-size: 1.2rem;
}

p.alert {
   color:       #FFFDA5;
   font-weight: bold;
}
p.alert::before {
   content:      "!";
   color:        red;
   font-size:    4rem;
   float:        inline-start;
   margin-right: 10px;
}

code.tyto {
   background-color: #4C4C4C;
   padding: 0 5px;
   color:   #FFF;
}

/* bcodes and codes */
pre.bcode_pre {
   font-size: .8rem;
}
ol.bcode_items {
   border-left: 2px dotted #4C4C4C;
}
ol.bcode_items li.bcode_item::marker {
   color: #4C4C4C;;
}
li.bcode_item {
   line-height: 4px;
}
code.bcode_code {
   margin-left: 10px;
   color:       #B2B2B2;
   font-weight: bolder;
}

/* Blockquotes */
blockquote.tyto {
   color:  white;
   margin: 0 30px;
   width:  60%
}

blockquote.tyto p {
   margin:      0;
   padding:     0;
   line-height: 26px;
}
blockquote.tyto p::before, blockquote.tyto p::after {
   position:  relative;
   color:     yellow;
   font-size: 2rem;
}

blockquote.tyto p::before {
   top:     10px;
   content: "“";
}
blockquote.tyto p::after {
   top:     25px;
   content: "”";
}

footer.tyto {
   margin:     0;
   padding:    0;
   text-align: right;
}
footer.tyto a {
   color: yellow;
}

/* Lists */
ul.tyto, ol.tyto {
   margin: 0 0 0 20px;
}

ul.tyto :is(ol, ul) {
   border-left: 1px dashed gray;
}

/* ----------------------------------------------------------------------------
 * Footer
*/
footer#footer {
   border-top: 2px dotted gray;
   color:      #FFF;
}

div#footer_title {
   color:     #FFF;
   font-size: 1.8rem;
}

div#footer_about_menu {
   display: flex;
}
div#footer_about {
   width: 75%
}

nav#footer_menu {
   width: 25%
}

p.footer_about_p {
   text-align: justify;
   font-size:  .8rem;
}

div#footer_credit {
   text-align:  center;
   font-size:   1rem;
   line-height: 8px
}


/*---------------------------------------------------------------------
 * For small screens
 * under 500px
*/

@media all and (max-width: 500px) {   
   div#site_container {
      max-width: 100%;
   }
   /*
    * Header
   */
   header#header {
      display:       block;
      margin-bottom: 20px;
      border:        0;
   }
   img#header_logo_image {
      display: block;
      margin:  5px auto;
   }
   p#header_title {
      font-size:  2rem;
      padding:    5px;
      text-align: center;
   }
   p#header_about {
      font-size:  1.4rem;
      padding:    0;
      text-align: center;
   }
   
   /*
    * Menu (navbar)
   */
   nav#menu {
      margin: 5px 0;
      border: 0;
      border: 2px dotted gray; 
   }
   li.menu_item {
      font-size: 1.1rem;
   }
   
   /*
    * Article
   */
   article#article {
      font-size: 1.2rem;
   }
   h1#article_title {
      font-size:  1.3rem;
      text-align: center;
   }
   div#article_refs {
      text-align: center;
      font-size:  .9rem;
   }
   img#article_logo {
      float:   none;
      display: block;
      margin:  10px auto;
   }
   h2.tyto {
      font-size: 1.4rem;
   }
   h3.tyto {
      font-size: 1.3rem;
   }
   h4.tyto {
      font-size: 1.2rem;
   }
   h5.tyto {
      font-size: 1.1rem;
   }
   h6.tyto {
      font-size: 1rem;
   }
   article#article ul {
      padding:     0;
      margin:      0;
      margin-left: 20px;
   }
   pre.bcode_pre {
      width: 60%;
      font-size: .8rem;
   }
   ol.bcode_items {
      margin:  0;
      padding: 0 25px;
   }
   code.bcode_code {
      margin: 0;
   }
   /* Page 404 structure */
   div.pic_err {
      display: grid;
   }
   p.pic_err {
      order: 2;
   }
   figure.pic_err {
      width:  300px;
      margin: 15px auto;
   }
   img.pic_err {
      width: 300px;
   }
   figcaption.pic_err {
      font-size: 1rem;
   }
   
   /*
    * Footer
   */
   div#footer_title {
      font-size: 1.2rem;
   }
   div#footer_about_menu {
      display: block;
   }
   div#footer_about {
      width:     100%;
      font-size: .8rem;
   }
   nav#footer_menu {
      width: 100%
   }
   div#footer_credit {
      font-size: .7rem;
   }
}