@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

* {
    padding:0;
    margin:0;
    box-sizing:border-box;
}
html {
    font-size: 62.5%; /* 1rem = 16px BUT -> 1rem = 10px (Because of 62.5%) */
}
html,
body {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  line-height: 1.4;
  scroll-behavior: smooth;
}
body {
    font-size: 1.4rem;
}

/* Header */
a {
    text-decoration: none;
    color: #000;
}  
header {
    width:100%;
    position: sticky;
    top: 0;
    background: #fff;
}
nav {
    max-width:1200px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    padding:1rem;
    align-items: center;
}
ul {
    list-style: none;
}
nav ul {
    display:flex;
    gap:2rem;
}
nav ul li {
    border-bottom: 2px solid transparent;
    transition: 0.2s ease-in;
    font-size:1.8rem;
}
nav ul li:hover {
    border-bottom: black 2px solid;
  }
li i {
    font-size:2.5rem;
}

/* Main */
main {
    max-width:1200px;
    margin: 0 auto;
    padding-left:1rem;
    padding-right:1rem;
    /* border:2px solid black; */
}
/* hero */
#hero {
    display:flex;
    justify-content: space-between;
    align-items: center;
    gap:1rem;
}
.hero-content h1 {
    font-size: 6rem;
    line-height: 1.2;
}
.hero-content h4 {
    font-size: 2.5rem;
    font-weight: 300;
}

.hero-image img {
    width: 100%;
    border-radius:5rem;
}

/* L-card*/
.L-card {
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin:2rem 1rem;
    border: 1px solid #e2e2e2;
    border-radius:0.5rem;
    box-shadow: 0px 5px 4px rgba(221, 221, 221, 0.25);
    overflow:hidden;
}
.L-card-content {
    display:flex;
    flex-direction:column;
    padding:2rem;
    gap:1rem;
}
.status {
    display:flex;
    justify-content: space-between;
}
.read-btn {
    all: unset; /* New property */
    font-weight:600;
    border-bottom: 1px solid transparent;
}
.read-btn:hover {
    border-bottom: 1px solid #ccc;
}
  

/* Cards */
.cards {
    max-width:100%;
    display:flex;
    gap:8rem;
    /* border:2px solid black; */
    margin:2rem 4rem;
}
.card {
    display:flex;
    flex-direction: column;
    gap:1rem;
    /* border:2px solid black; */
    box-shadow: 0px 5px 4px rgba(221, 221, 221, 0.25);
    border: 1px solid #e2e2e2;
    border-top-left-radius:0.5rem;
    border-top-right-radius:0.5rem;
}
.card img {
    width:100%;
    height:100%;
    border-top-left-radius:0.5rem;
    border-top-right-radius:0.5rem;
}
.card-content {
    display:flex;
    flex-direction:column;
    gap:1rem;
    padding: 1.5rem 2rem 1.5rem;
}

/* H-card */
.H-card {
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin:2rem 1rem;
    border: 1px solid #e2e2e2;
    border-radius:0.5rem;
    box-shadow: 0px 5px 4px rgba(221, 221, 221, 0.25);
    overflow:hidden;
}
.H-card-content {
    display:flex;
    flex-direction:column;
    padding:2rem;
    gap:1rem;
}

/* footer */
footer {
    border-top:2px solid #ccc;
}
.footer-content {
    max-width: 1200px;
    margin:0 auto;
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding:1.2rem 1rem;
}
.footer-content ul {
    display:flex;
    gap:2rem;
}
.footer-content ul li i {
    font-size:1.8rem;
}

/* Posts */
.banner img {
    width:100%;
} 
.post h1 {
    font-size: 3rem;
}
.post hr {
    margin: 3rem 0;
}
.about-author {
    display: flex;
    gap: 1rem;
    align-items: center;
}
article {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-bottom: 2rem;
}

/* Media Queries */
@media (max-width:700px) {
    .cards {
        flex-wrap:wrap;
    }
    #hero {
        flex-direction:column;
        align-items: center;
        margin-bottom:60px;
    }
    .hero-image {
        width:100%;
    }
    .hero-content {
        order:2;
        width:100%;
        text-align: center;
        margin-top:20px;
    }
    .L-card {
        flex-direction: column;
    }
    .L-card-content {
        order:2;
    }
    .L-card img {
        width:100%;
    }
    .H-card {
        flex-direction: column;
    }
    .H-card-content {
        order:2;
    }
    .H-card img {
        width:100%;
    }
}
@media (max-width:390px) {
    li i {
        display: none;
    }
}