/*          🇵🇰          */


html, body
{
   width:                        100%;
   background-color:             black; 
}


body
{
   max-width:                    1050px;
   width:                        90%;
   margin:                       0 auto;
   font-family:                  "PT Sans";
   font-size:                    clamp(21px, 2.25vw, 24px);
   line-height:                  clamp(32px, 3.65vw, 40px);
   text-align:                   justify;
   color:                        #B9B9B9;
   hyphens:                      auto;
   hyphenate-limit-chars:        auto 3 5;   

   > header
   {
      height:                    clamp(235px, 125px, 265px);
      width:                     100%;
      padding:                   0;
      margin-bottom:             10px;
      background:                linear-gradient(to right, #162144 15%,
                                                            #192e67 45%,
                                                            #000f1a 100%);

      h1
      {  
         font-family:             Bitter, "Droid Serif";
         font-size:               clamp(40px, 5.5vw, 50px);
         text-align:              center;
         color:                   #AFAFAF;
         padding:                 35px 0 25px;
         margin:                  0; 
      
         img
         {
            margin-top:             35px;
            width:                  775px;
            margin:                 35px 0 0 40px;;
         }

      }

      > nav
      {
         margin:                    0;
         padding:                   0;
         position:                  relative;
         display:                   flex;
         flex-flow:                 row nowrap;
         list-style:                none;
         height:                    65px;
         width:                     100%; 
         overflow:                  hidden;
         border-bottom:             6px Solid;
         border-image:              linear-gradient(to right, #651B53 30%,
                                                            #1c3e7d 100%) 1;

         > li 
         {
            height:                 100%;
            width:                  auto;
            border-right:           4px Solid Black;

            > a
            {
               display:                   inline-block;
               color:                     #80bfff;
               color:                     #99ccff;
               text-decoration:           none;
               padding:                   12px 22px 10px;
               height:                    100%;
               font-size:                 23px;
               font-weight:               bold;
               -webkit-font-smoothing:    none;
               background:                linear-gradient(to bottom, 
                                                         #0d4f64 15%,
                                                         #232C4E 70%); 
               
               &:hover, &:focus
               {
                  cursor:                 pointer;
                  outline:                none;
                  color:                  #ffff66;

                  background:             linear-gradient(to bottom,
                                                            #143a5c 25%,
                                                            #1c4b72 55%);
               }
            }
            
            &:nth-child(7)
            {
               width:                    125px;
               position:                 absolute;
               right:                    0;
               background:               linear-gradient(to bottom, 
                                                            #0d4f64 15%,
                                                            #232C4E 70%); 
               > a 
               {
                  padding:                0;
                  margin:                 0;
                  padding-top:            12px;
                  text-align:             center;
                  width:                  100%;
                  height:                 100%;              
               }

               &:hover
               {
                  background-color:          Navy;
                  stroke:                    Yellow;
               }
            }

            &:last-child
            {
               display:                none !important;
            }
         }
      }
   }

   
   > main 
   {
      width:                    85%;
      margin:                   20px auto 50px;

      a
      {
         text-decoration:       none;
         color:                 #539bf9;
      }

      > article
      {

         margin-top:            55px;
        
         > header
         {
            margin-bottom:             20px;
            border-bottom:             3px Solid #555555;

            > h1 
            {
               font-size:               clamp(27px, 2.85vw, 35px);
               line-height:             clamp(35px, 5vw, 58px);
               margin-bottom:           20px;
               word-spacing:            2px;
               font-family:             Bitter, "Droid Serif";
               text-align:              left;
               font-size:               34px;
               line-height:             45px;

               > a
               {
                  text-decoration:        none;
                  color:                  #B9B9B9;                  
               }
            }

            > byline
            {
               display:                 block;
               margin-bottom:           18px;

               > time:before
               {
                  content:              "On: ";
                  display:              inline-block;
                  margin-left:          20px;
               }

               > author:before
               {
                  content:              "By: ";
               }
            }
         }
     
      } /* End of artcile block. */

  } /* End Of Main */

  > main[id = "Blogroll"]
  {
     > article
     {
        margin-top:            70px;
        border-top-width:      7px;
        border-top-style:      Solid;
        border-image:          linear-gradient(to right,            
                                               #1F305E 20%, 
                                                #224C98 55%, 
                                                #702963 100%) 1;
        &:first-child
        {
           margin-top:              45px;
           border-top:              none;
        }

        > header
        {
           margin-bottom:           35px;
          
           + section
           {
              min-height:             265px;
              max-height:             290px;
              overflow:               hidden;
              margin-top:             0px;

             > p:first-child
             {
                margin-top:           0px;
             }
           }
        }
     } /* End of Blogroll Main block. */
  }
}