/* Global theme styles */
@font-face {
  font-family: MLFont;
  src: url('../fonts/MachineLearningFont-v2.woff') format('woff'),
  url('../fonts/MachineLearningFont-v2.woff2') format('woff2');
}

.ml-title-text {
  font-family: MLFont;
}

:root {
  --dark: #111;
  --light: #fefefe;
  --color: var(--dark);
  --bg: var(--light);
}
@media (prefers-color-scheme: dark) {
  :root {
    --color: var(--light);
    --bg: var(--dark);
  }
}

body {
  background-color: var(--bg);
  color: var(--color);
  font-family: monospace;
  min-height: 100vh;
  margin: 0;
}

a {
    color: var(--color);
}

.posts-container {
  margin: 36px 5% 0px;
}

.post-preview {
  font-size: 24px;
  margin-bottom: 24px;
}

@media (max-width: 795px) {
    .post-preview {
      font-size: 16px;
      margin-bottom: 16px;
    }
}

.post {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 0px 96px 0px;
}

@media (max-width: 795px) {
  .post {
    padding: 0px 0px 48px 0px;
  }
}

.post-title {
  font-size: 24px;
}

@media (max-width: 795px) {
    .post-title {
      font-size: 16px;
    }
}

.post-content {
  font-size: 16px;
  line-height: 24px;
  max-width: 800px;
}

@media (max-width: 795px) {
    .post-content {
      font-size: 12px;
      line-height: 16px;
      max-width: 800px;
      margin: 0px 24px;
  }
}

.home-link {
  position: fixed;
  top: 0;
  right: 0;
  margin: 24px 5%;
  font-family: MLFont;
  font-size: 24px;
}

.home-link a {
  text-decoration: none;
}

@media (max-width: 795px) {
  .home-link {
    position: unset;
  }
}

hr {
  margin: 48px 0px;
}

.pagination {
  margin: 24px 5% 0px;
  font-size: 16px;
}

@media (max-width: 795px) {
  .pagination {
    font-size: 14px;
  }
}

.not-footer {
  min-height: calc(100vh - 24px);
}

.footer {
  height: 24px;
  margin-left: 5%;
  font-size: 14px;
}

#KIL {
  font-family: MLFont;
}

#KIL:hover {
  color: #57d8b6;
}

/* title-bar.hbs */

.title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0px 5%;
  box-sizing: border-box;
  -webkit-transition: color 0.25s ease;
  transition: color 0.25s ease;
  padding-top: 24px;
}

@media (max-width: 795px) {
  .title-bar {
      flex-direction: column;
      align-items: flex-start;
    }
}

.title-text {
  font-size: 48px;
}

@media (max-width: 795px) {
  .title-text {
    font-size: 48px;
  }
}

.site-subtitle {
  font-size: 16px;
}

@media (max-width: 795px) {
    .site-subtitle {
      display: none;
    }
}

.title-description {
  font-size: 14px;
}

@media (max-width: 795px) {
    .title-description {
    }
}

#what {
  border: 1px solid var(--color);
  padding: 4px 8px;
  font-family: MLFont;
}

@media (max-width: 795px) {
    #what {
      border: unset;
      padding: unset;
      text-decoration: underline;
    }
}

.description-container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.description-box {
  border: 1px solid var(--color);
  padding: 24px;
  background-color: var(--bg);
  font-size: 16px;
  line-height: 24px;
  max-width: 300px;
}

.ok-container {
  text-align: right;
  margin-top: 16px;
}

#ok {
  font-family: MLFont;
  border: 1px solid var(--color);
  padding: 4px 8px;
  text-decoration: none;
}

.hidden {
  display: none;
}

.whitespace {
    white-space: pre;
}