main
{
   max-width:                910px;
   width:                    90%;
   margin:                   0 auto;    

   > article
   { 
      img 
      {
         width:                   100%;
      }
      
      > header
      {
         margin-bottom:             30px;
         border-bottom:             4px Solid #424242;

         > h1 
         {
            font-family:             Merriweather;
            font-size:               clamp(27px, 2.85vw, 35px);
            line-height:             clamp(35px, 5vw, 58px);
            margin-bottom:           12px; 
         }

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

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

            }

            > author:before
            {
               content:              "By: ";
            }
         }
      }

      h1, h2, h3, h4, h5
      {
         font-family:              Merriweather;
         text-align:               left;
         letter-spacing:           1px;         
      }

      h2
      {
         font-size:                 clamp(23px, 2.65vw, 31px);
         margin:                    50px 0 15px 0;
      }

      h3
      {
         font-size:                 30px;
         margin-bottom:             18px;
         line-height:               1.85em;
      }

      h4
      {
         font-size:                 28px;
         margin-bottom:             15px;
         line-height:               1.85em;   
         margin-top:                0;
      }

      p
      {
         margin-top:                0;
         margin-bottom:             26px;   
      }

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

      ol, ul
      {
         margin-left:               18px;
         list-style-type:           none;

         > li
         {
            margin-bottom:            18px;
            position:                 relative;

            > h5
            {
               font-family:               "PT Sans", "Open Sans";
               margin-bottom:             12px; 
               font-size:                 27px;
            }

            &:before
            {
               color:                     #00ace6;
               text-align:                right;
               width:                     40px;
               position:                  absolute; 
               top:                       4px;
            }

            > p
            {
               margin-top:               12px;
            }
         }
      } 

      ol  
      {
         > li
         {
            counter-increment:         ListCounter;
         }

         > li:before 
         {
            content:                   counter(ListCounter) ".";
            left:                      -65px;
         }
      }

      ul 
      {
         > li:before 
         {
            content:                      "\2022";
            left:                         -60px;
         }
      }

      em
      {
         font-weight:                  bold;
         padding:                      0;
         font-style:                   normal;
      }

      blockquote
      {
         font-family:                  Palatino;
         font-size:                    32px;
         font-style:                   italic;
         line-height:                  42px;
         color:                        rgb(190,190,190);
         border-left:                  7px Solid rgb(65,65,65);
         border-image:                 linear-gradient( to bottom, 
                                                        #1F305E 20%, 
                                                        #224C98 55%, 
                                                        #702963 100%) 1;
         padding:                      25px 0 25px 30px;
         margin-left:                  30px;
      }

      figure
      {
         > figcaption 
         {
            margin-top:                30px;
            color:                     rgb(185,185,185);
            font-size:                 23px;
            line-height:               1.65em;
            width:                     90%;
            padding:                   20px 30px 20px 40px;
            margin-left:               30px;
            border-left:               6px Solid rgb(65,65,65);
            border-image:              linear-gradient( to 
                                                        bottom,            
                                                        #1F305E 20%, 
                                                        #224C98 55%, 
                                                        #702963 100%) 1;
            > em
            {
               margin-right:              5px;
            }
         }
      }

      pre
      {
         font-size:                    25px;
         font-family:                  "Courier New";
         font-weight:                  bold;
         line-break:                   normal;
         white-space:                  normal;
         -webkit-font-smoothing:       antialiased;
         font-smooth:                  auto;
      }
   }
} /*  End of Declarations Defined in the Main Section */


/*
      Introducing Negative Margin for the unordered list contaning 
      single line elements following an h4.
      
*/
p:has( > b:first-child:only-child ) + ul 
{
   margin-top:                   -15px;
}


li > h4
{
   line-height:               1.4em;
}