.blog_style
{
   display: flex;
   width: 100%;
   height: 100%;
   background: var(--bg-color);
   padding: 50px 0px;
   justify-content: center;
   container-name: site;
   container-type: inline-size;

   .page_content
   {
      display: flex;
      width: 67%;
      container-name: page;
      container-type: inline-size;
   }
}



.blog_nav
{
   width: 15%;
   padding: 0px 20px;

   h3
   {
      margin-bottom: 10px;
   }

   ul
   {
      list-style: none;

      li
      {
      }
   }

   @container site (max-width: 1230px)
   {
      display: none;
   }

   .social
   {
      /* Hide .social until the font is loaded */
      display: flex;
      align-items: center;
      gap: 15px;
      margin: 25px 0;
      font-family: cm_social;

      a
      {
         color: var(--text-color);
         font-size: 46px;
         text-decoration: none;
         background: transparent;
         width: 65px;
         height: 65px;
         border-radius: 50%;
         display: flex;
         align-items: flex-end;
         justify-content: center;
         transition: 0.4s ease;
         border: 4px solid var(--text-color);

         &:hover
         {
            color: var(--accent-color);
            border: 4px solid var(--accent-color);
            transform: translateY(-7px);
         }
      }
   }
}
}



.blog_item_area
{
   .blog_list
   {
      list-style: none;

      .blog_item
      {
         margin-bottom: 50px;

         h1
         {
            color: var(--accent-color);
         }

         h4
         {
            margin: 10px 0px;
         }

         p
         {
            display: block;
         }
      }
   }
}



.blog_article
{
   h1
   {
      color: var(--accent-color);
   }

   h4
   {
      margin-top: 10px;
      margin-bottom: 30px;
   }

   p
   {
      margin-bottom: 20px;
   }

   .embeded_video
   {
      margin-top: 50px;
      display: flex;
      align-content: center;
      justify-content: center;

      iframe
      {
         box-shadow: 0 0 80px var(--accent-color);
      }
   }
}



.tag_style
{
   display: block;

   .tag_list
   {
      list-style: none;

      .tag_item
      {
         display: inline-block;
         margin: 5px 5px 0px 0px;

         a
         {
            display: block;
            padding: 0px 4px;
            text-decoration: none;
            border: 2px solid var(--text-color);
            border-radius: 5px;

            color: var(--text-color);
            transition: 0.1s ease-in;

            &:hover
            {
               color: var(--accent-color);
               border: 2px solid var(--accent-color);
               transform: translateY(-2px);
            }
         }
      }
   }
}



.easy
{
   background-color: #248721;
}

.medium
{
   background-color: #d6a318;
}

.hard
{
   background-color: #d92121;
}



.social
{
   background: transparent;
   font-family: cm_social;
   margin: 15px 0px;

   a
   {
      color: var(--text-color);
      font-size: 30px;
      text-decoration: none;
      background: transparent;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      transition: 0.4s ease;
      border: 4px solid var(--text-color);

      &:hover
      {
         color: var(--accent-color);
         border: 4px solid var(--accent-color);
         transform: translateY(-7px);
      }
   }
}