@font-face {
  font-family: 'Roboto';
  font-display: swap;
  font-style: normal;
  font-weight: 400 600;
  src: local('Roboto'), url("/fonts/Roboto-VariableFont_wdth\,wght.ttf") format(truetype) tech(variations);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  line-height: 1.5;
  font-family: 'Roboto';
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  hyphens: auto;
}

p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block: 20px 35px;

  h1 {
    text-align: center;
    font-size: clamp(1rem, 1rem + 1.5vw, 3rem);
  }

  a {
    font-size: clamp(1.5rem, 1.5rem + 1.5vw, 3rem);
    text-decoration: none;
    color: white;
    transition: 0.3s;
  }

  a:hover {
    transition: 0.3s;
    color: green;
    text-decoration: underline;
  }

  p {
    text-align: left;
    font-size: clamp(0.5rem, 0.5rem + 1.5vw, 1.5rem);
  }
}


.posts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
  
  > * {
    display: flex;
    flex-direction: column;
    max-inline-size: min(75%, 800px);
    border-radius: 10px;
    outline: 2px solid green;
    padding-inline: 25px;
    padding-block: 25px;
    gap: 15px;
  }
  
  a {
    text-decoration: none;
    color: green;
    font-size: clamp(1.2rem, 1.2rem + 1.5vw, 2rem);
    font-weight: bold;
  }

  a:hover {
    text-decoration: underline;
  }
}

.pages {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-block-start: 25px;

  a {
    text-decoration: none;
    color: green;
    font-size: clamp(1.2rem, 1.2rem + 1.5vw, 2rem);
    font-weight: bold;
  }

  a:hover {
    text-decoration: underline;
  }
}

.post_snippet {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  font-size: clamp(0.6rem, 0.6rem + 1.5vw, 1.5rem);
  line-clamp: 3;
  -webkit-line-clamp: 3;
}

.post {
  display: flex;
  flex-direction: column;
  margin: auto;
  gap: 20px;
  padding-inline: 40px;
  max-inline-size: 1000px;

  h1 {
    font-size: clamp(1.3rem, 1.3rem + 1.5vw, 3rem);
  }

  time {
    text-align: left;
  }

  p {
    max-inline-size: 66ch;
    font-size: clamp(0.6rem, 0.6rem + 1.5vw, 1.2rem);
  }
}

.blog {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  p {
    color: hsl(0, 0%, 60%);
  }

  svg {
    transform: scale(1);
    transition: 0.2s;
  }

  svg:hover {
    transition: 0.2s;
    transform: scale(1.2);
  }
}

@media (min-width: 360px) {
  header {
    p {
      max-inline-size: 30ch;
    }
  }

  footer {
    margin-block: 40px;
  }
}

@media (min-width: 720px) {
  header {
    p {
      max-inline-size: 45ch;
    }
  }

  footer {
    margin-block: 60px;
  }
}

@media (min-width: 980px) {
  header {
    p {
      max-inline-size: 66ch;
    }
  }

  footer {
    margin-block: 80px;
  }
}