/* General styles */
:root {
  --background: #ffffff;
  --darker-background: #f5f4f8;
  --headlines: #3b14c7;
  --main-text: #171717;
  --secondary-text: #858585;
  --hover: #f6f3ff;
  --border: #f6f3ff;
}

body {
  overflow-y: hidden;
  margin: 0;
  padding: 0;
  font-family: Avenir, 'Avenir Next', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: var(--main-text);
  background-color: var(--background);
  line-height: 1.9rem;
  font-size: 1.1rem;
  font-weight: 300;
}

.container-index {
  display: flex;
  flex-wrap: nowrap; /* Prevents wrapping of the columns */
  width: 100%;
  height: 100vh; /* Make the container as tall as the viewport */
  overflow-x: scroll; /* Enable horizontal scrolling for the entire container */
  overflow-y: hidden;
}

.container-single {
  display: flex;
  flex-wrap: nowrap; /* Prevents wrapping of the columns */
  width: 100%;
  height: 100vh; /* Make the container as tall as the viewport */
  overflow-y: scroll;
}

.column {
  width: 460px; /* Fixed column width */
  flex: none;
  height: 100vh; /* Make columns as tall as the viewport */
  overflow-y: scroll; /* Allow vertical scrolling inside each column */
  padding: 0; /* Remove extra space */
  box-sizing: border-box;
  border-right: 1px solid var(--border);
  /*margin: 0 auto;*/
}

.single {
  max-width: 42rem;
  padding-left: 40px;
}   

.headline-container {
  display: block;
  padding: 40px; /* Increase padding for emphasis */
  box-sizing: border-box; /* Account for padding within the width */
  border-bottom: 1px solid var(--border);
}

.headline-icon {
  width: 100%; /* Adjust width */
  height: 100%; /* Adjust height */
}

h1, h2, h3, h4 {
  color: var(--headlines);
}

h1 {
  margin-top: 0;
  font-size: 3rem;
  line-height: 4rem;
}

a {
  text-decoration: none;
  color: var(--headlines);
}

.name {
  font-size: 1.6rem;
  margin: 0;
}

img {
  max-width: 100%;
}

.description {
  font-size: 1.1rem; /* Smaller font size for the description */
  color: var(--secondary-text); /* Lighter color for emphasis */
  margin-top: 0px;
  margin-bottom: 0; /* No additional bottom spacing needed */
}

.bio {
  padding: 40px;
  margin: 15px 0;
  box-sizing: border-box;
}

.bio p {
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 2rem;
  margin: 0;
}

.rectangle, .small-rectangle {
  display: block; /* Treat the entire block as a link */
  text-decoration: none; /* Remove underline on link text */
  color: inherit; /* Inherit text color from parent */
  background-color: var(--background);
  width: 100%; /* Expand the rectangle across the whole column */
  padding: 40px;
  margin: 0; /* Remove margins to cover the full width */
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
  position: relative;  /* This is needed for absolute positioning of the pin */
}

.rectangle {
  background-color: var(--darker-background);
}

.small-rectangle {
  padding-left: 40px;
  padding-top: 10px;
  padding-right: 40px;
  padding-bottom: 10px;
}

.rectangle h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.4rem;
}

.rectangle p {
  font-size: 1.1rem;
  line-height: 1.4rem;
  font-weight: 300;
  color: var(--secondary-text);
}

.small-rectangle h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 400;
}

.small-rectangle p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1rem;
  color: var(--secondary-text);
  font-weight: 300;
}

.post-snippet {
  margin-bottom: 0.5rem;
}

.post-snippet time {
  font-size: 0.7rem;
  color: var(--secondary-text);
}

/* Hover Effects */
.rectangle:hover, .small-rectangle:hover {
  background-color: var(--hover);
}

.subscription-form {
  padding: 40px;
  margin: 15px 0;
  box-sizing: border-box;
}

.subscription-form .cta {
  margin: 0 0 10px;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.5rem;
}

.subscription-form input[type="email"] {
  width: calc(100% - 140px); /* Adjust input field width considering the button's size */
  padding: 10px;
  border: none;
  outline: none;
  background-color: var(--darker-background);
  color: var(--text);
  font-size: 1rem;
  box-sizing: border-box;
  font-family: Avenir, system-ui, Arial;
}

.subscription-form .button {
  padding: 10px 20px;
  border: none;
  outline: none;
  border-radius: 4px;
  background-color: var(--headlines);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  color: #ffffff;
  font-family: Avenir, system-ui, Arial;
}

.subscription-form .button:hover {
  background-color: var(--secondary-text); /* Slightly lighter shade on hover */
}

::placeholder {
  color: var(--secondary-text);
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
  color: var(--secondary-text);
}

/* ARTICLES*/

.article-date {
  color: var(--secondary-text);
  font-size: 1rem;
  display: block;
}

.single img {
  max-width: 42rem;
  border-radius: 0.5rem;
}

.single h1 {
  font-size: 3rem;
  line-height: 3.8rem;
  margin-top: 3rem;
}

.single h2 {
  font-size: 1.8rem;
}

.single h2 {
  font-size: 1.6rem;
}

/* blockquote styling */
blockquote {
  font-family: Avenir, system-ui, 'Georgia', 'Times New Roman', serif; /* Choose a serif font */
  font-size: 1.25em; /* Make the text slightly larger */
  color: #555; /* Dark gray text color */
  border-left: 4px solid var(--headlines); /* Left border to distinguish it visually */
  background-color: #f9f9f9; /* Light background for contrast */
  margin: 20px 0; /* Margins to provide spacing */
  padding: 10px 20px; /* Padding for better readability */
  quotes: "“" "”" "‘" "’"; /* Custom quote symbols */
}

/* 

blockquote:before {
  content: open-quote;
  font-size: 2em;
  color: var(--headlines);
  position: relative;
  top: 10px;
  left: -5px;
}

blockquote:after {
  content: close-quote;
  font-size: 2em;
  color: var(--headlines);
  position: relative;
  top: 10px;
  right: -5px;
}

*/


blockquote p {
  display: inline;
}

.single .subscription-form {
  padding-left: 0;
  max-width: 30rem;
}

.single a {
  color: var(--headlines);
  text-decoration: none;
}

.single a:hover {
  text-decoration: underline;
}

/* Styling the figcaption */
figure {
  margin: 20px 0; /* Adds space above and below the figure */
  text-align: center; /* Center-aligns both image and caption */
}

figcaption {
  font-size: 0.9em; /* Slightly smaller text size than the default */
  color: #555; /* Dark gray color for the caption */
  margin-top: 10px; /* Adds space between the image and the caption */
  font-style: italic; /* Italicizes the caption */
}


/* Responsive Styles */

@media (max-width: 768px) {
  body {
      overflow-y: scroll;
  }

  .container-index {
      flex-wrap: wrap; /* Allow the columns to wrap into a single column layout */
      flex-direction: column; /* Align columns vertically */
      height: auto; /* Adjust the height to fit content */
      overflow-y: visible; /* Make sure all content is visible */
  }

  .container-single #column1 {
      display: none;
  }

  .single {
      max-width: 100%;
      padding: 20px;
  }

  .single .subscription-form {
    padding-left: 0;
    max-width: 100%;
  }

  img {
    max-width: 100%;
  }

  .single img {
    max-width: 100%;
  }

  .column {
      width: 100%; /* Make columns take the full width of the container */
      height: auto; /* Adjust height to fit content */
  }

  /* Adjust padding for a more compact look on mobile */
  .headline-container,
  .bio,
  .subscription-form,
  .rectangle,
  .small-rectangle {
      padding: 20px;
  }

  h1 {
      font-size: 2rem;
      line-height: 3rem;
  }

  .name {
      font-size: 1.4rem;
  }

  .description {
      font-size: 1rem;
  }

  figcaption {
    font-size: 0.8em; /* Smaller text size on small screens */
  }

  .rectangle p {
    margin-bottom: 0;
  }

  .small-rectangle {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .small-rectangle p {
    display: none;
  }

}