@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --blue-950: oklch(10% 0.02 250);
  --blue-900: oklch(12% 0.03 250);
  --blue-800: oklch(18% 0.04 250);
  --blue-700: oklch(25% 0.06 250);
  --blue-600: oklch(35% 0.08 250);
  --blue-500: oklch(45% 0.10 250);
  --blue-400: oklch(60% 0.12 250);
  --blue-300: oklch(75% 0.10 250);
  --blue-200: oklch(88% 0.06 250);
  --blue-100: oklch(95% 0.02 250);

  --color-light-gray: oklch(80% 0 0); 
  --text-light: oklch(100% 0 0);
  --text-dark: oklch(20% 0 0);

  --space-sm: 0.8rem; 
  --space-md: 1.6rem;     
  --space-lg: 2.4rem;
  --space-xl: 4.8rem;
  --space-xxl: 7.2rem;

  --radius-sm: 0.4rem;
  --radius-md: 0.8rem;
  --radius-lg: 1.6rem;
  --radius-circle: 50%;

  --font-xs: 1.2rem;
  --font-sm: 1.4rem;
  --font-base: 1.6rem;
  --font-md: 2.4rem;
  --font-lg: 3.2rem;
  --font-xl: 4.4rem;
}

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

html {
  font-size: 62.5%;
}

.no-scroll{
  overflow: hidden;
  height: 100%;
}

.container {
  margin: 0 auto;
  max-width: 1250px;
  width: 90%;
}

.narrow{
  max-width: 800px;
}

body{
  background-color: var(--blue-950);
  color: var(--text-light);
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: var(--font-base);
  line-height: 1.5;
}

main{
  padding-top: 80px;
}

a{
  text-decoration: none;
  color: var(--color-light-gray);
  transition: 0.4s;

  &:hover {
    color: var(--text-light);
  }
}

ul{
  list-style: none;
}


.logo{
  color: var(--blue-200);

  &:hover{
    color: var(--blue-400);
  }
}


h1, h2, h3, h4, h5, h6 {
  font-family: "Merriweather", serif;
  font-weight: 600;
}

p{
  font-weight: 300;
}

hr{
  margin-top: var(--space-xl);
  border: none;
  background-color: rgba(128, 128, 128, 0.3);
  height: 1px;
}

.pagination,
.single-pagination{
  display: flex;
  justify-content: end;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;

  .prev, 
  .next{
    background-color: var(--blue-500);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--blue-400);
    color: var(--text-light);

    &:hover{
      background-color: var(--blue-400);
      color: var(--text-light);
    }      
  }
}

.single-pagination{
  padding: var(--space-xl) 0;
}

.navigation.pagination{
  padding: 0;
}

abbr[title] {
  text-decoration: none;
}

.blocker {
  position: fixed;
  width: 100dvw;
  height: 100dvh;
  z-index: 5;
  display: none;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5); 
  backdrop-filter: blur(3px); 
  cursor: pointer;
}

/* responsive */
@media (max-width: 900px) {
  p{
    font-size: var(--font-sm);
  }

  hr{
    margin-top: var(--space-lg);
  }
}