@import "code-blocks.css";
@import "font.css";
@import "footer.css";
@import "nav-bar.css";
@import "toc.css";

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  padding: 0;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #c9d1d9;
    background: #0d1117;
  }
}

/* change color of headings */
h1 {
  color: #F5A97F;
  font-size: calc(1rem * pow(1.1, 4));
  text-align: center;
}

h2 {
  color: #7DC4E4;
  font-size: calc(1.1rem * pow(1.1, 2));
}

h3 {
  color: #F5A97F;
  font-size: calc(1rem * pow(1.1, 1));
}

h4 {
  color: #A6DA95;
  font-size: calc(1rem * pow(1.0, 1));
}

h5 {
  color: #7DC4E4;
  font-size: calc(1rem * pow(1.1, 0));
}

h6 {
  color: #7DC4E4;
  font-size: calc(1rem * pow(1.1, -1));
}

/* add your own norg icons here*/
h2::before {
  content: '◉ ';
}

h3::before {
  content: '◎ ';
}

h4::before {
  content: '○ ';
}

h5::before {
  content: '✺ ';
}

h6::before {
  content: '▶ ';
}

h7::before {
  content: '⤷ ';
}

/* Styling */

.body {
  color: white;
  background-color: #24273A;
  font-family: "JetBrains Mono", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  position: relative;
  padding-bottom: 1em;
}

/* Main content of the page */
.content {
  width: auto;
  max-width: 750px;
  margin: 40px auto;
  padding: 0 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  line-height: 1.5em;
  text-align: auto;
  text-justify: inter-word;
}

.content a:link {
  color: #b4befe;
  text-decoration: none;
}

.content a:visited {
  color: #7E7EFF;
}

/* links colors on interactions */
.content a:hover {
  color: #f38ba8;
}

.content a:active {
  color: #202030;
}

/* make bold text red */
.content b,
strong {
  color: #EE99A0;
}


/* Box */
.flex-container {
  width: auto;
  display: flex;
  grid-auto-flow: column;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-content: space-evenly;
  gap: 2em;
  margin: 0 auto;
}

.flex-box {
  display: block;
  border-radius: 20px;
  border: 2px solid #8aadf4;
  background-color: #1e2030;
  padding: 0em 1em 1em 1em;
  box-shadow: 0px 0px 0.2em #8aadf4;
  transition: box-shadow 400ms ease-in-out, bottom ease-in-out 600ms;
  width: 40%;
  height: auto;
  position: relative;
  bottom: 0px;
  cursor: pointer;
}

.flex-box:hover {
  transition: box-shadow 600ms ease-in-out, bottom ease-in-out 600ms;
  box-shadow: 0px 0px 1.3em #8aadf4;
  bottom: 5px;
}

/* View All Posts Button */
.view-all-container {
  text-align: center;
  margin-top: 3em;
  margin-bottom: 2em;
}

.view-all-btn {
  display: inline-block;
  padding: 0.8em 2em;
  font-size: 1.1em;
  font-weight: bold;
  color: #cad3f5;
  text-decoration: none;
  border: 2px solid #8aadf4;
  border-radius: 20px;
  background-color: #1e2030;
  position: relative;
  bottom: 0px;
}
/* css class for descriptions under "recent posts" */
.flex-box p {
  color: #b7bdf8;
  font-size: 12px;
}

.flex-box h3::before {
  content: ' ';
}

/* classes for images */
/* center images */
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
}

/* Only center containers that have pokemon images */
.content>div:has(.pokemon) {
  text-align: center;
}

.content>div:has(.pokemon)>*:not(.pokemon):not(h1) {
  text-align: left;
}

/* Pokemon images spread equally */
.pokemon {
  display: inline-block;
  width: 15%;
  margin: 0.5em 2%;
  text-align: center;
}

/* Customize the scrollbar */
* {
  scrollbar-width: thin;
  /* Width of the scrollbar */
  scrollbar-color: #64687E #1E1E2E;
}