styles.css

/* GOOGLE FONT */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;500;700&display=swap');

/* ///////////////////////////////////////////////////////////////*/
/* BODY */
body {
     padding: 0;
     margin: 0;
     background-image: linear-gradient(45deg, #F5F5FE 50%, #FFFFFF 50%);
     font-size: 20px;
     font-family: 'Nunito', sans-serif;
 }
 
 /* ///////////////////////////////////////////////////////////////*/
 /* MAIN CONTAINER STRUCTURE */
 .main-container {
     padding: 25px;
     display: grid;
     margin: auto;
     align-content: center;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr 1fr;
     width: 900px;
     height: 750px;
     gap: 20px;
     color: #342F6F;
     border-radius: 1px;
 }
 
 /* ///////////////////////////////////////////////////////////////*/
 /* ARTICLE RESUME CONTAINER */
 .article-resume-container {
     grid-row: 1 / 4;
     grid-column: 1;
     box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
     display: grid;
     width: 90%;
     height: 90%;
     justify-self: end;
     align-self: end;
     background-color: white;
     border-top: 4px solid;
     border-radius: inherit;
     border-image: linear-gradient(to right, #6675F5, #CEA4F0) 1;
     position: relative;
     padding: 30px 25px 15px 30px;
 }
 /* BOOKMARK */
 .fa-bookmark{
     position: absolute;
     top: 40px;
     right: 30px;
     cursor: pointer;
 }
 /* ARTICLE TITLE */
 .article-title{
     width: 92%;
     font-size: 1.75rem;
     font-weight: 700;
 }
 /* ARTICLE AUTHOR */
 .article-author{
     font-size: 1rem;
     font-weight: bold;
     align-self: end;
 }
 /* ARTICLE DATE */
 .article-date{
     align-self: start;
     font-size: 0.75rem;
 }
 /* ARTICLE RESUME */
 .article-resume{
     font-size: 1.1rem;
 }
 /* READ MORE */
 .read-more{
     color: #7477E1;
     font-size: 1rem;
     cursor: pointer;
 }
 /* ///////////////////////////////////////////////////////////////*/
 /* ARTICLE HEADER */
 .article-header {
     box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
     border-radius: inherit;
     background-color: white;
     position: relative;
     display: grid;
     grid-template-columns: 0.4fr 1fr;
     grid-template-rows: 0.5fr 0.2fr 0.1fr;
     padding: 20px;
     width: 100%;
     height: 90%;
     align-self: end;
     justify-self: left;
 }
 .bm-header {
     position: absolute;
     top: 10px;
     right: 10px;
 }
 /* ARTICLE HEADER 1*/
 .title-1{
     grid-row: 1;
     grid-column: 2;
 }
 /* ARTICLE HEADER 2 */
 .title-2 {
     grid-row: 2;
     grid-column: 2;
 }
 /* ARTICLE HEADER 3 */
 .title-3 {
     grid-row: 3;
     grid-column: 2;
 }
 .article-header > img {
     width: 100px;
     height: 100px;
     grid-column: 1;
     grid-row: 1 / -1;
     justify-self: center;
     align-self: center;
 }
 .article-header > .article-title {
     width: 90%;
     grid-row: 1;
     grid-column: 2;
     font-size: 1.25rem;
     padding-left: 15px;
 }
 .article-header > .article-author {
     grid-row: 2;
     grid-column: 2;
     align-self: end;
     font-size: 0.85rem;
     padding-left: 15px;
 }
 .article-header > .article-date {
     grid-row: 3;
     grid-column: 2;
     padding-left: 15px;
 }
 
 /* ///////////////////////////////////////////////////////////////*/
 /* TOP BLOGGERS */
 .top-bloggers {
     grid-row: 4;
     grid-column: 1 / -1;
     box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
     border-radius: inherit;
     background-color: white;
     width: 85%;
     justify-self: start;
     align-items: center;
     padding: 10px 25px 20px 25px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr;
 }
 .top-bloggers > .article-title {
     grid-row: 1;
     grid-column: 1;
     justify-self: start;
 }
 .top-bloggers > .read-more {
     grid-row: 1;
     grid-column: 2;
     justify-self: end;
 }
 .top-bloggers > .profiles {
     grid-row: 2;
     grid-column: 1 / -1;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
 }
 /* TOP BLOGGERS */
 .profile-container{
     display: grid;
     grid-template-columns: 0.3fr 1fr;
     grid-template-rows: 1fr 1fr;
     position: relative;
 }
 .profile-container > .rank {
     position: absolute;
     font-size: .75rem;
     background-color: #FFFFFE;
     border-radius: 50%;
     font-weight: bold;
     height: 15px;
     width: 15px;
     top: 5px;
     left: 35px;
     text-align: center;
     padding-bottom: 10px;
     box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
 }
 .profile-container > img {
     border-radius: 50%;
     grid-row: 1 / -1;
     grid-column: 1;
 }
 .profile-container > .article-author {
     padding-left: 10px;
     grid-row: 1;
     grid-column: 2;
 }
 .profile-container > .article-date{ 
     padding-left: 10px;
     grid-row: 2;
     grid-column: 2;
 }