.container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.main_content {
   font-size: 1.6rem;
   background-color: var(--bg-white);
   display: grid;
   grid-template-columns: repeat(2, 40% 60%);
   border-radius: 1rem;
   margin: 4rem;
   box-shadow: 1rem 1rem 3rem rgba(0, 0, 0, 0.3);
}

.image_container {
   background-image: url("../images/drawers.jpg");
   background-position: top 0 left -1rem;
   background-size: cover;
   background-repeat: no-repeat;
   width: 100%;
   border-radius: 1rem 0 0 1rem;
}

/* ================= article priview start here ================= */
.article_title {
   padding: 4rem 8rem 0 8rem;
   font-size: 2.5rem;
   font-weight: var(--font-weight-700);
   color: var(--very-dark-grayish-blue);
}

.article_details {
   margin: 4rem 0;
   line-height: 2rem;
   padding: 0 6rem 0 8rem;
}

/* ================= author information start here ================= */
.author_profile_container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 6rem 2rem 8rem;
}

.author_photo {
   width: 6rem;
   height: 6rem;
   border-radius: 50%;
}

.photo_name_date_container {
   display: flex;
   gap: 1rem; /* between photo and name, date */
   align-items: center;
}

.name {
   margin-bottom: 0.3rem;
   font-weight: var(--font-weight-700);
   color: var(--very-dark-grayish-blue);
}

.share_arrow {
   border-radius: 50%;
   background-color: var(--light-grayish-blue);
   padding: 0.5rem;
   z-index: 999;
}

.share_arrow:hover {
   cursor: pointer;
   transform: scale(1.2);
   transition: all 500ms;
}

.arrow_icon {
   width: 2rem;
   height: 2rem;
}

/* ================= social media share start here ================= */
.share_container {
   display: none;
   justify-content: space-evenly;
   align-items: center;
   gap: 1.5rem; /* between share text and fb icon */
   background-color: var(--very-dark-grayish-blue);
   width: 25%;
}

.pointer {
   position: absolute;
   height: 3rem;
   width: 3rem;
   background-color: var(--very-dark-grayish-blue);
   transform: rotate(45deg);
   bottom: -1.3rem;
   right: 10rem;
}

.share_container p {
   text-transform: uppercase;
   letter-spacing: 0.5rem;
}

.icon_container {
   z-index: 1;
}

.icon_container ul {
   display: flex;
   align-items: center;
   gap: 1.5rem; /* between each social media icon */
}

.fb_icon,
.twitter_icon,
.pinterest_icon {
   width: 3rem;
   height: 3rem;
   transition: all 500ms;
}

.fb_icon:hover,
.twitter_icon:hover,
.pinterest_icon:hover {
   cursor: pointer;
   transform: scale(1.2);
   transition: all 500ms;
}

.icon_container ul > li {
   list-style-type: none;
}

/* apply this when javascript active */
.share_container.active {
   display: flex;
   position: absolute;
   padding: 1.75rem 3rem;
   border-radius: 1rem;
   top: 23rem;
   right: 0rem;
   animation: fadeIn 300ms linear;
}