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


main
{
   display: flex;
   justify-content: center;
   align-items: center;

   #profile_section
   {
      width: 60%;
      margin-top: 50px;
   }
}


.profile
{
   width: 100%;
   transform: skewX(-20deg);
   box-shadow: 0 0 40px var(--accent-color);

   .profile_content
   {
      display: flex;
      background: transparent;
      transform: skewX(20deg);

      .profile_image
      {
         background: transparent;

         width: 150px;
         height: 200px;

         margin-top: -20px;
         margin-left: -20px;
      }

      .profile_info
      {
         display: flex;
         flex-flow: column nowrap;
         background: transparent;
         width: 100%;
         padding: 5px 40px 5px 20px;

         .name
         {
            background: transparent;
         }

         .job_title
         {
            background: transparent;
            font-style: italic;
            color: var(--accent-color);
         }

         .divider
         {
            background: transparent;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;

            .left
            {
               background: transparent;

               .blurb
               {
                  margin-top: 10px;
                  background: transparent;
               }
            }

            .right
            {
               background: transparent;

               .social
               {
                  background: transparent;
                  display: flex;
                  align-items: right;
                  gap: 15px;
                  margin: 15px 0;
                  font-family: cm_social;

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

.button
{
   background: transparent;
   display: flex;
   align-items: center;
   margin: 15px 0;

   button
   {
      font-size: 15px;
      font-weight: 600;
      padding: 12px 24px;
      border-radius: 25px;
      color: var(--accent-color);
      background: transparent;
      border: 2px solid var(--accent-color);
      outline: none;
      cursor: pointer;
      transition: 0.3s ease-in;

      &:hover
      {
         color: var(--secondary-color);
         background: var(--accent-color);
         transform: translateY(-7px);
      }
   }
}