@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   scrollbar-width: none;
}

/* resets */
:root {
   --page-color: #F0ECE5;

   --primary-text-color: #2F2519;
   --secondary-text-color: #4A3F35;
   --tertiary-text-color: #484541;

   --accent-color: #5C5470;
   --accent-color-dark: #352F44;

   --hover-link-active-bg: #5C5470;
   --hover-link-hover-bg: #5c54701d;
}

body {
   font-family: "Inter", serif;
   font-weight: 300;

   color: var(--primary-text-color);

   background-color: var(--page-color);
}

/* utility classes */
h1 {
   font-family: "Inter", serif;
   font-weight: 600;

   font-size: 25px;
   letter-spacing: .3px;
}

h2 {
   font-family: "Inter", serif;
   font-weight: 400;

   font-size: 14px;

}

p {
   font-family: "Inter", serif;
   font-weight: 400;

   font-size: 18px;
}

ul {
   list-style: none;
}

a {
   text-decoration: none;
}

.flex {
   display: flex;
   align-items: center;
}

.container {
   max-width: calc(100vw - 5%);
   margin-inline: auto;
   overflow: hidden;
}

/* --------------- nav bar --------------- */
nav {
   z-index: 99;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;

   background-color: rgba(241, 236, 229, 0.8);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-bottom: 1px solid var(--primary-text-color);

   font-family: "Inter", serif;
   font-weight: 500;
   font-size: 15px;
}

.main-nav {
   justify-content: space-between;
   padding-block: 10px;
}

.app-logo img {
   width: 150px;
}

.nav-links ul {
   gap: 2px;
}

.hover-link {
   cursor: pointer;
   padding: 8px 12px;
   transition: all 0.16s ease-in-out;
   background-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
   .hover-link:hover {
      background-color: var(--hover-link-hover-bg);
   }
}

.nav-item.active {
   background-color: var(--hover-link-active-bg);
   color: var(--page-color);
}

.search-bar {
   height: 50px;

   position: absolute;
   left: 50%;
   transform: translateX(-50%);
}

.news-input {
   width: 250px;
   height: 80%;

   padding-inline: 16px;

   border: 1px solid var(--accent-color);
   border-radius: 0px;
   background-color: transparent;

   font-family: "Arimo", sans-serif;
}

.news-input::placeholder {
   color: var(--primary-text-color);
   opacity: 0.5;
}

.news-input:focus {
   outline: none;
}

.search-btn {
   justify-content: center;

   background-color: var(--accent-color);

   height: 80%;
   width: 45px;

   border: 1px solid var(--accent-color);

   cursor: pointer;
   transition: all 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
   .search-btn:hover {
      border: 1px solid var(--accent-color-dark);
      background-color: var(--accent-color-dark);
   }
}

/* ---------------- main news content ---------------- */
main {
   padding-block: 20px;
   margin-top: 70px;
}

.cards-container {
   justify-content: space-evenly;
   flex-wrap: wrap;
   align-items: start;
   gap: 50px;
   padding-top: 2rem;
   padding-bottom: 5rem;
}

@keyframes fadeInFromBottom {
   0% {
      opacity: 0;
      transform: translateY(15px);
   }

   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

.card {
   margin-top: 50px;
   width: 420px;
   min-height: 500px;

   border: 1.5px solid var(--accent-color);

   cursor: pointer;
   overflow: hidden;

   transition: all 0.2s ease-in-out;
   animation: fadeInFromBottom 0.6s ease;
}

@media (hover: hover) and (pointer: fine) {
   .card:hover {
      transform: scale(1.01);
   }
}

.card-header img {
   width: 100%;
   height: 250px;
   object-fit: cover;
}

.card-content {
   padding: 10px;
}

.card-content p {
   letter-spacing: 0.2px;
}

.news-source {
   margin-block: 12px;
}

/* ---------- New animated preloader - Fullscreen overlay with centered loader ----------- */
#news-preloader {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background-color: var(--page-color);
   z-index: 98;
}

.loader-overlay {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
}

/* ========================================== Responsive code ========================================== */
/* tabets and mobiles layout */
@media screen and (max-width: 1020px) {
   .container.cards-container {
      padding-inline: 2px;
      padding-top: 0rem;
      padding-bottom: 2rem;
   }

   .app-logo img {
      transform: translateX(-4px);
   }

   .main-nav {
      flex-direction: column;
      gap: 80px;
   }

   .nav-links ul {
      gap: 14px;
   }

   .search-bar {
      top: 45%;
   }

   .news-input {
      width: 240px;
   }

   main {
      margin-top: 197px;
   }

   .card {
      margin-top: 0px;
   }

   .card-header img {
      height: 260px;
      object-fit: cover;
   }

   #news-preloader {
      top: 40px;
      transform: none;
   }
}

@media screen and (max-width: 430px) {
   .card-header img {
      height: 220px;
   }

   #news-preloader {
      height: 100vh;
      align-items: center;
   }
}