/* Jasmine Theme: modifies the default theme to inject a wee bit o' green in various places. */

/* Use Open Sans as the default font. */
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Hind+Siliguri&display=swap");

/* See https://getbootstrap.com/docs/5.2/customize/css-variables/#root-variables for variables to override. */
:root {
  --tf-header-font: "Archivo Black", sans-serif;        /* font for headers */
  --tf-body-font: "Hind Siliguri", serif;               /* font for headers */
  --tf-green1: #136c14;
  --tf-green2: #4FA64F;
  --tf-green3: #85C285;
  --tf-green4: #e0f2df;
  --background-white: #f2f2f2;
  --header-dark: #292929;
  --complement-yellow: #eec320;
  --complement-blue: #00274c;
  --complement-violet: #2e47ff;
  --just-black: #010100;
  --complement-orange: #df4636;
  --complement-cream: #f1e7d5;
  --complement-pink: #f37287;
  --bs-link-color: var(--tf-green1);
  --tf-pill-bg: var(--complement-yellow);
  --tf-icon-fill: var(--complement-pink);
  --tf-icon-hover: var(--tf-green2);
  --tf-page-bg-color: var(--background-white);
  --tf-footer-bg-color: var(--complement-blue);
  --tf-projects-bg-color: var(--complement-cream);
}

.name-header {
  margin-top: 20px;  /* Adjust top margin */
  margin-bottom: 10px; /* Adjust bottom margin */
  font-family: var(--tf-header-font); /* header font */
  color: var(--header-dark);
}

.summary-text {
  text-align: justify;   /* Justifies the text */
  line-height: 1.6;       /* Adjusts line height for readability */
  margin-bottom: 20px;    /* Adds space below the paragraph */
  width: 100%;            /* Ensures the paragraph takes up the full container width */
  max-width: 800px;       /* Optional: limits width to prevent excessive stretching */
  margin-left: auto;      /* Centers the paragraph block if width is limited */
  margin-right: auto;     /* Centers the paragraph block if width is limited */
}

/*
.summary-text {
  text-align: justify;   /* Centers the text horizontally */
  line-height: 1.6;     /* Adjusts the spacing between lines of text */
  margin-bottom: 20px;  /* Adds space below the paragraph */
}
*/

.interests-text {
  text-align: center;   /* Justifies the text */
  line-height: 1.6;       /* Adjusts line height for readability */
  margin-bottom: 20px;    /* Adds space below the paragraph */
}

body {
  font-family: var(--tf-body-font); /* header font */
}

h1,h3,h4 {
  font-family: var(--tf-header-font); /* header font */
  color: var(--complement-orange);
}

h5 {
  font-family: var(--tf-header-font); /* header font */
  color: var(--header-dark);
}

.navbar {
  background-color: var(--complement-yellow);
}

/* Format social media icons */
.tf-social {
  display: inline-block;
  fill: var(--tf-green1);
  height: 1.5em;
  vertical-align: -.1em;
  width: 1.5em;
  transition: 0.2s;
}

.tf-social:hover {
  fill: var(--complement-pink);
}

a {
  text-decoration: none;
}

a:hover {
  color: var(--complement-pink);  /* Example: links will turn orange on hover */
}

@media (max-width: 500px) {
  .navbar-brand {
    display: none;
  }

  .navbar-brand-mobile {
    display: inline;
  }
}

/* Simplify the styling of the bottom of Essay cards. */
.card-footer {
  background-color: var(--background-white);
  border-top: none;
}