:root {
  --font-family: 'Kanit', sans-serif;
  --border-radius: 0.5rem;
  --spacing: 1rem;

  /* colors ye */
  --blue: rgba(16, 149, 193, 1);
  --blue-half: rgba(16, 149, 193, 0.5);
  --blue-faded: rgba(16, 149, 193, 0.2);
  --pink-faded: rgba(245, 40, 145, 0.2);
  --white-half: rgba(255, 255, 255, 0.5);

  --primary-hover: var(--blue);

  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

@font-face {
  font-family: 'Ben Zion';
  src: url(/fonts/benzion.woff2);
}

@font-face {
  font-family: 'Kanit';
  src: url(/fonts/kanit.woff2);
}

/* fix to make the footer stick to the bottom */
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: flex-start;
}

main {
  padding-top: 1rem !important;
}

footer {
  /* fix to make it stick at the bottom */
  margin-top: auto;
  padding: 2rem 0 !important;
  opacity: 50%;
  text-align: center;
}

footer p {
  /* footer text should be smaller */
  font-size: 0.6rem;
}

#footer-break {
  display: none;
}

nav {

  margin-left: 10px;
  margin-right: 10px;

  border-bottom: var(--blue) 2px solid;
}


svg {
  color: var(--blue);
  margin: 0 10px;
}

h4 {
  margin-bottom: 0;
}

h6 {
  margin: 0 0;
}

/* Main page title text */
#title {
  position: absolute;
  left: 0;
  right: 0;

  font-family: 'Ben Zion';
  letter-spacing: 4px;
  font-size: 10vw;
  text-align: center;
  margin-bottom: 0;
}

#title-break {
  display: block;
  height: 12vw;
}

#title:hover {
  -webkit-animation: glow 5s ease-in-out infinite alternate;
  -moz-animation: glow 5s ease-in-out infinite alternate;
  animation: glow 5s ease-in-out infinite alternate;
}

/* Description text underneath title */
#tagline {
  margin-bottom: 0;
  text-align: center;
  font-size: 2vw;
}

#recent-posts-text {
  text-align: center;
}

#post-info {
  font-size: 0.8rem;
}

/* spacing between title & desc and rest of page */
header {
  margin-bottom: 3vw;
}


@keyframes glow {
  0% {
    text-shadow: none;
  }
  50% {
    text-shadow: 0 0 10px var(--white-half), 0 0 20px var(--white-half), 0 0 30px var(--pink-faded), 0 0 40px var(--pink-faded), 0 0 50px var(--pink-faded), 0 0 60px var(--pink-faded), 0 0 70px var(--pink-faded);
  }
  100% {
    text-shadow: 0 0 20px var(--white-half), 0 0 30px var(--blue-faded), 0 0 40px var(--blue-faded), 0 0 50px var(--blue-faded), 0 0 60px var(--blue-faded), 0 0 70px var(--blue-faded), 0 0 80px var(--blue-faded);
  }
}

/* style the "apologetics.club" in the header*/
#nav-title {
  /* border styling */
  /* position: absolute; */
  border: 2px var(--blue) solid;
  border-radius: 25px;
  padding: 0 7.5px;
  margin-left: 0px;
  color: white;
}

.pagination-container {
  display: flex;
  justify-content: space-between;
}


/* styling the post boxes */
a.box {

  margin: 0.5rem;
  padding: 0.75rem;

  border-radius: 25px;
  border-width: 2px;
  border-style: solid;
  border-color: var(--h4-color);

}

a.box:hover {
  animation-name: fade;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.summary-box {
  display: block;
}

/* Trying to get links to also fade on */
/* [role=link] {
  animation-name: fade;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
} */

/* @keyframes fade {
  from {border-color: var(--h4-color);}
  to {border-color: var(--blue);}
} */

h1.title {
  margin: 2rem 0 0 0;
}

.mini-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.mini-boxes-container {
  display: flex;
  flex-direction: row;
}

.box-icon {
  width: 7vw;
  height: 7vw;
  align-self: center;
}

.box-text {
  text-align: center;
  margin: 0.5vw;
  font-size: 1.25em;
}

button {
  margin: 0.5rem;
  padding: 0.75rem;

  background-color: rgba(0, 0, 0, 0);

  border-radius: 25px;
  border-width: 2px;
  border-style: solid;
  border-color: var(--h4-color);
}



/* style search page */

.special-page-container {
  margin-top: 3rem;
}

.pagefind-ui__search-clear {
  display: none;
}

.pagefind-ui__drawer {
  padding: 2rem;
}

.pagefind-ui__message {
  margin-bottom: 1rem;
}

.pagefind-ui__search-input {
  padding-inline-start: 2.75rem;
  border-radius: 5rem;
  /* background-image: var(--icon-search);
  background-position: center right 1.125rem;
  background-size: 1rem auto;
  background-repeat: no-repeat; */
}

mark {
  background-color: var(--blue);
}



/* the markdown area */

article {
  padding: 2rem;
  margin-top: 1rem;
  margin-bottom: 0;
}


article h1, h2, h3, h4, h5, h6 {
  --typography-spacing-vertical: 1rem;
}

h1 {
  margin-bottom: 0.5em;
}

h2 strong {
  font-size: calc(var(--font-size) + 0.25rem);
}

::marker {
  font-weight: bold;
}

ul li::marker {
  color: var(--blue-half);
  content: "● ";
}


ol, ul li {
  list-style-position: inside;
}

ul li ul li::marker {
  color: var(--blue-half);
  content: "○ ";
}

ul li ul li ul li::marker {
  color: var(--blue-half);
  content: "‣ "
}

blockquote ol {
  margin-bottom: 0;
  padding-bottom: 0;
}

p img {
  /* margin: var(--typography-spacing-vertical) 0; */
  margin: 0 0;
}

article p {
  margin-bottom: 1rem;
}

hr {
  margin-block-start: 2em;
  margin-block-end: 2em;
}

/* media queries */

@media screen and (max-width: 992px) {
  #tagline {
    font-size: 3vw;
  }
}

@media screen and (max-width: 769px) {

  #footer-separator {
    display: none;
  }

  #footer-made-with {
    font-size: 0.8rem;
    margin: 0 10px;
  }

  #footer-break {
    display: inline;
  }
}

@media screen and (max-width: 576px) {
  #title-apologetics {
    display: block;
    line-height: 0.5;

    margin-top: 2vw;
  }

  #title-break {
    height: 28vw;
  }

  #title {
    font-size: 14vw;
  }

  #tagline {
    font-size: 4vw;
  }

  .box-text {
    font-size: 1em !important;
  }

}

@media screen and (max-width: 370px) {
  .mini-boxes-container {
    flex-direction: column;
  }
  .mini-box {
    width: 65%;
    margin-left: auto;
    margin-right: auto;
    flex-direction: row;
    justify-content: flex-start;
  }

  .box-text {
    margin: 0 7.5px !important;
  }

  svg {
    margin: 0 0px;
  }

  #post-summary {
    font-size: 0.8rem;
  }

  #post-info {
    font-size: 0.6rem;
  }
}

@media screen and (max-width: 300px) {

  #nav-title {
    font-size: 0.75em;
  }

  #title {
    font-size: 12vw;
  }
}

@media screen and (max-width: 264px) {
  .mini-box {
    width: 90%;
  }
}