.container {
  height: 100vh;
}.main {
  width: 100%;
  min-height: calc(100vh - 10%);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff3f3;
  padding: 1rem;
}

h1 {
  user-select: none;
}

marquee span {
  margin: 0 100px;
  user-select: none;
}a.post__item {
  width: 60%;
  border-bottom: 2px solid #ff7878;
  text-decoration: none; 
  color: #ff7878;
  margin-bottom: .3rem;
  transition: .3s all ease;
}

@media (hover: hover) {
  a.post__item:hover {
    scale: 1.1;
    transition: .3s all ease;
  } 
}

.loading {
  font-size: 2rem;
}

a.post__item:active {
  width: 60%;
  border-bottom: 2px solid black;
  text-decoration: none; 
  color: black;
  margin-bottom: .3rem;
}

@media (max-width: 500px) {
  a.post__item {
    width: 90%;
  }
}

main {
  overflow: auto;
}

@media (max-width: 640px) {
  .post .post__title {
    font-size: 1.5rem;
  }
}

.markdown h1:first-child {
  margin: 2rem 0;
  text-align: center;
}

.post__back {
  color: #ff7878;
  text-decoration: none;
  user-select: none;
}

.hr {
  width: 60%;
  margin: 20px 0;
  border: none;
  box-shadow: 0 0 10px 1px red;
}

img {
  width: 50%;
  height: auto;
  object-fit: cover;
}

.translate-button {
  padding: .5rem 1rem;
  text-decoration: none;
  color: #ff7878;
  background-color: #ffcfcf;
  text-align: center;
  border-radius: 1.5rem;
  margin-top: .5rem;
  transition: .5s all ease;
}

@media (hover: hover) {
  .translate-button:hover {
    scale: 1.1;
  }
}

.translate-button:active {
  background-color: black;
  color: white;
  border-radius: 1rem;
}


.markdown {
  max-width: 1000px;
  text-align: left;

}
.markdown hr {
  width: 60%;
  margin: 30px 0;
  border: none;
}

.markdown br {
  width: 60%;
  margin: 15px 0;
  border: none;
}

.markdown img {
  width: 70%;
  height: auto;
  object-fit: cover;
}

.markdown table {
  width: 100%;
  border-collapse: collapse;
}

.markdown th,
.markdown td {
  border: 1px solid #ccc;
  padding: 5px;
}

.markdown a {
  color: #ff7878;
}

.markdown li {
  margin: 0 1rem;
}

.markdown span.select {
  color: #ff7878;
}

ol {
  margin-bottom: 25px;
}

ul {
  margin-bottom: 25px;
}

.markdown p,
.markdown table {
  margin-bottom: 15px;
}

.markdown h1
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .markdown img {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .markdown h1 {
    font-size: 1.5rem;
  }

  .markdown img {
    width: 100%;
  }

  .markdown h2 {
    font-size: 1.3rem;
  }
}

@media (max-width: 415px) {
  .markdown h1 {
    font-size: 1.3rem;
  }

  .markdown h2 {
    font-size: 1rem;
  }

  .markdown p {
    font-size: .9rem;
  }

  .markdown li {
    font-size: .9rem;
  }
}header {
  width: 100%;
  height: 10vh;
  background-color: #ffc3c3;
  padding: 0 20%;
  user-select: none;
}
header nav {
  height: 100%;
}

header ul {
  height: 100%;
  display: flex;
  list-style: none;
  align-items: center;
  justify-content: center;
}

header a {
  font-size: 1.25rem;
  color: #ff7878;
  text-decoration: none;
}footer {
  background-color: #ff7878;
  padding: 2em;
  font-family: Roboto;
}

.copyright {
  color: #fff;
  text-align: center;
}

.email {
  text-align: center;
}

a {
  color: white;
}:root {
  font-size: 1em;
}

* {
  margin: 0;
  margin-block: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, 
  'BlinkMacSystemFont', 
  'Segoe UI', 
  'Roboto', 
  'Oxygen', 
  'Ubuntu', 
  'Cantarell', 
  'Open Sans', 
  'Helvetica Neue', 
  sans-serif;
  outline: none;
}