/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --clr-light: #ffffff;
  --clr-dark: #000000;
  --change-light-btn: #e9e9e9;
  --change-light-btn-hover: #2b2b2b;
  --btn-bg-color: #dddddd;
  --bq-bg-color: #bafe7eb6;

  --clr-primary: #dbffa2;
  --clr-secondary: #c3fcf2;
  --clr-accent: #ff7750;

  --foreground: var(--clr-dark);
  --background: var(--clr-light);
  --link: #08ad47;
  /* --link: #cc00ff; */

  --body-font-family: 'Libre Baskerville', 'Times New Roman', Times, serif;
  --code-font-family: monospace;

  box-sizing: border-box;
}

.darkmode {
  --clr-light: #ffffff;
  --clr-dark: #000000;
  --change-light-btn: #2b2b2b;
  --change-light-btn-hover: #e9e9e9;
  --btn-bg-color: #292929;
  --bq-bg-color: #55812c8c;

  --clr-primary: #202302;
  --clr-secondary: #00100d;
  --clr-accent: #ff7750;

  --foreground: var(--clr-light);
  --background: var(--clr-dark);
  --link: #09e15c;
  /* --link: #d400ff; */
}

/* body */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0px;
  padding: 0px;
  font-family: var(--body-font-family);

  background-color: var(--background);
  color: var(--foreground);
}

a {
  color: var(--link);
  text-decoration: none;
  transition: all 0.5s ease;
}

a:hover {
  color: #7bff00;
  /* color: #7500c4; */
}

button {
  font-family: inherit;
  cursor: pointer;
  color: var(--foreground);
  background-color: var(--btn-bg-color);
  border: 1px solid var(--foreground);
  border-radius: 5px;
  padding: 10px 20px 10px 20px;
  margin: 10px;
}

button:hover {
  color: var(--background);
  border: 1px solid var(--background);
  background-color: var(--link);
}

ul, ol {
  padding: 0;
  margin: 0;
}

li {
  padding-bottom: 10px;
}

img {
  max-width: 100%;
}

blockquote {
  background-color: var(--bq-bg-color);
  padding: 5px;
  margin: 0px;
  border-radius: 5px;
}

/* header */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  font-weight: bold;
}

.site-title {
  color: var(--foreground);
  font-size: 1.5rem;
}

.change-light-button {
  border: none;
  padding: 10px;
  border-radius: 10px;
  background-color: var(--change-light-btn);
  transition: all 0.5s ease;
}

.change-light-button:hover {
  background-color: var(--change-light-btn-hover);
}

/* main */

main {
  flex: 1;
}

main section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

/* coding projects */



/* writing-projects-section */

.writing-projects-section {
  text-align: center;
}

/* blog-section */

.blog-section {
  text-align: center;
}

/* small-coding-projects-section */

.small-coding-projects-section {
  text-align: center;
}

.small-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

.small-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--foreground);
  border-radius: 10px;
  padding: 0px 0px 10px 0px;
  min-width: 200px;
  max-width: 200px;
  font-family: inherit;
}

/* resource-section */

.resource-section {
  text-align: center;
}

/* Footer */

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
}

footer ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  padding: 0;
  margin: 0 20px 10px 20px;
}

footer ul li {
  margin: 0 20px 0 0;
}

.youtube-icon {
  color: var(--foreground);
  font-size: 2rem;
  transition: all 0.5s ease;
}

.youtube-icon:hover {
  color: #ff0000;
}

.x-icon {
  color: var(--foreground);
  font-size: 2rem;
  transition: all 0.5s ease;
}

.x-icon:hover {
  color: #1888b4;
}

.github-icon {
  color: var(--foreground);
  font-size: 2rem;
  transition: all 0.5s ease;
}

.github-icon:hover {
  color: #007a1f;
}

#copyright-text {
  text-align: center;
  font-size: 1rem;
  margin: 0 20px 10px 20px;
}

/* Bucketlist in Another World */

.novel {
  text-align: center;
}

.chapter {
  padding: 0% 35% 5% 35%;
  text-align: left;
}

.chapter ul, ol {
  padding: 20px;
}

/* Blog */

.post {
  padding: 0% 35% 5% 35%;
  text-align: left;
}

.post ul, ol {
  padding: 20px;
}

/* Responsiveness */

@media screen and (max-width: 1440px) {
  .chapter {
    padding: 0% 25% 5% 25%;
  }
  .post {
    padding: 0% 25% 5% 25%;
  }
}

@media screen and (max-width: 1024px) {
  .chapter {
    padding: 0% 20% 5% 20%;
  }
  .post {
    padding: 0% 20% 5% 20%;
  }
}

@media screen and (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
  .small-grid-container {
    grid-template-columns: 1fr 1fr;
  }
  .chapter {
    padding: 0% 15% 5% 15%;
  }
  .post {
    padding: 0% 15% 5% 15%;
  }
}

@media screen and (max-width: 426px) {
  /* header {
    flex-direction: column;
  } */

  .small-grid-container {
    grid-template-columns: 1fr;
  }

  .chapter {
    padding: 0% 10% 5% 10%;
  }
  .post {
    padding: 0% 10% 5% 10%;
  }

  footer {
    flex-direction: column;
  }
}