@font-face
{
   font-family: cm_social;
   src: url(../fonts/cm_social.woff2);
}


main
{
   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;
   }
}



.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);
      }
   }
}



h5
{
   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);
      }
   }
}