:root {
   --background-color: #232830;
   --primary-color: #ffffff;
   --cat-listing-color: #909090;
   --article-background: #FFFFFF;
   --article-text-color: #0F1217;
   --pagination-color: #909090;
   --pagination-span: #FF7575;
   --footer-border: #4D4D4D;
   --footer-twitter-background: #4699E0;

}

* {
   padding: 0;
   margin: 0;
}

body {
   background-color: var(--background-color);
   color: var(--primary-color)
}

header {
   width: 1236px;
   margin: 0 auto;
   padding: 1rem 0;
}

/*********** NAVIGATION ***********/
nav {
   display: flex;
   justify-content: space-between;
}

nav p {
   font-weight: 400;
   font-size: 30px;
   line-height: 45px;
   font-family: 'Poppins';
}

nav ul {
   list-style-type: none;
   display: flex;
}

nav li {
   font-size: 24px;
   font-family: 'Poppins';
   font-weight: 400;
   padding-right: 2rem;
}

/*********** HERO SECTION ***********/
#hero {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 5rem 0;
}

#hero img {
   width: 194.45px;
   height: 204.08px;
}

#hero h1 {
   font-family: 'Recursive';
   font-weight: 400;
   font-style: italic;
   font-size: 71px;
   line-height: 85.2px;
   color: #FF7575;
}

#hero p {
   font-family: 'Poppins';
   font-weight: 400;
   font-size: 29px;
   line-height: 43.5px;
}

/*********** CATEGORY LISTING ***********/
#category-listing {
   /*width: 1680px;*/
   /*height: 65px;*/
   width: 1236px;
   margin: 0 auto;
}

hr {
   border: 3px solid #4D4D4D;
   opacity: 20%;
}

#list-container {
   display: flex;
   padding: 0.8rem 0;
}

#category-listing #icons {
   display: flex;
}

#category-listing #listings {
   display: flex;
}

#category-listing ul {
   list-style-type: none;
}

#category-listing li {
   color: var(--cat-listing-color);
   font-family: 'Recursive';
   font-size: 27px;
   font-weight: 400;
   font-style: italic;
   line-height: 32.4px;
   padding: 0 1rem;
}

/*********** ARTICLE LISTING ***********/
#articles-listing {
   width: 1244px;
   margin: 4rem auto 0;
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
}

.article-group {
   width: 390px;
   height: 439px;
   border-radius: 22px;
   background-color: var(--article-background);
   color: var(--article-text-color);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin-bottom: 1.5rem;
}

.article-group-image {
   width: 337.08px;
   height: 160px;
   border-radius: 22px;
   display: flex;
   padding-top: 0.5rem;
   object-fit: cover;
}

.article-group-heading,
.article-group-desc,
.article-group-footer {
   width: 337.08px;
   font-family: 'Poppins';
}

.article-group-heading {
   font-weight: 600;
   font-size: 19px;
   line-height: 28.5px;
   padding: 2rem 0 0.8rem 0;
}

.article-group-desc {
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
}

.article-group-footer {
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
   display: flex;
   padding: 1rem 0 0 0;
}

.article-ellipse {
   padding: 0 1rem;
}

/*********** PAGINATION ***********/
#pagination {
   margin: 5rem auto;
   width: 478px;
   height: 47px;
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--pagination-color);
   font-family: 'Recursive';
   font-weight: 400;
   font-style: italic;
   font-size: 25px;
   line-height: 30px;

}

#pag-prev {
   width: 108px;
   height: 30px;
   margin-right: 2rem;
}

#pag-next {
   width: 59px;
   height: 30px;
   margin-left: 2rem;
}

#pag-numbers {
   width: 225px;
   height: 30px;
   display: flex;
   justify-content: center;
}

.page-number {
   color: var(--pagination-color);
   margin: 0 20px;
}

.page-number a {
   text-decoration: none;
   color: var(--pagination-color);
}

.current-page {
   position: relative;
   display: inline-block;
}

.current-page a {
   color: var(--pagination-span);
}

.current-page::before {
   content: '';
   position: absolute;
   top: -15px;
   left: 75%;
   transform: translateX(-50%);
   width: 54px;
   height: 3px;
   background-color: var(--pagination-span);
}

/*********** FOOTER ***********/
footer {
   width: 100%;
   height: 68px;
   border-top: 3px solid var(--footer-border);
}

#foot-container {
   width: 1244px;
   margin: 25px auto 0;
   padding-bottom: 70px;
   display: flex;
   justify-content: space-between;
}

#foot-left {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 1rem;
}

#foot-heading {
   width: 161px;
   height: 38px;
   font-family: 'Source Sans Pro';
   font-weight: 600;
   font-size: 30px;
   line-height: 37.71px;
}

#foot-kamran {
   width: 178px;
   height: 24px;
   font-family: 'Source Sans Pro';
   font-weight: 600;
   font-size: 19px;
   line-height: 23.88px;
   background-color: var(--footer-twitter-background);
   border-radius: 5px;
   padding: 0.25rem 0.7rem;
}

#foot-right {
   width: 221px;
   height: 34px;
   border-radius: 5px;
   background-color: var(--footer-twitter-background);
   display: flex;
   justify-content: center;
   align-items: center;
}

#foot-follow {
   height: 24px;
   font-family: 'Source Sans Pro';
   font-weight: 600;
   font-size: 19px;
   line-height: 23.88px;
}

#foot-follow box-icon {
   fill: var(--primary-color);
   width: 20px;
   height: 16px;
}