/* Global CSS variables */
:root {
  --spacing-company: 3rem;
  --font-weight: 400;
  --border-radius: 0;
  --text-color: #333; /* Dark text for light background */
  --text-color-subtle: #555; /* Slightly lighter text color */
  --link-color: #007bff; /* Color for links */
  }

@media (prefers-color-scheme: dark) {
  :root {
    /* Override text colors for dark mode */
    --text-color: #ddd; /* Light text for dark background */
    --text-color-subtle: #bbb; /* Slightly darker text color for subtlety */
    --link-color: #4a90e2; /* A brighter link color for dark backgrounds */
  }
}

/* Typography */

/* For all screen sizes */
h1 {
  font-weight: 600; /* Bold but not too heavy */
}

h2 {
  font-weight: 500; /* Subtle boldness for sub-headers */
  text-align: left; /* Consistent text alignment */
}

h2 {
  font-weight: 250; /* Subtle boldness for sub-headers */
  text-align: left; /* Consistent text alignment */
}

.job-experience {
  margin-bottom: 1rem; /* Reduce space between job experiences */
}

.flex-container {
  align-items: flex-start; /* Align items to the top */
}

.job-title {
  font-weight: normal; /* Differentiate from company names */
}

hgroup h2 {
  font-weight: 500; /* Or you can use a specific size like 1.5em, 18px, etc. */
}

hgroup > :last-child {
  font-weight: 200;
}

small {
  color: var(--text-color);
}

/* Header */
.hero {
  background-color: #394046;
  background-image: url("img/sascha-eremin-DNQ-M93tHmA-unsplash-3000x1000.jpg");
  background-position: center;
  background-size: cover;
}

header {
  padding: var(--spacing-company) 0;
}

header hgroup > :last-child {
  color: var(--text-color);
}

header hgroup {
  margin-bottom: var(--spacing-company);
}

/* Nav */
summary[role="link"].contrast:is([aria-current], :hover, :active, :focus) {
  background-color: transparent;
  color: var(--contrast-hover);
}

/* Contact info */
.contact-info {
  margin-top: 1rem; /* Spacing from the About Me content */
}

.contact-info h3 {
  font-size: 1.2em; /* Adjust as needed */
  margin-bottom: 0.5rem;
}

.contact-info p {
  margin-bottom: 0.5rem;
  font-size: 1em; /* Adjust as needed */
}

.contact-info a {
  color: var(--text-color); /* Adjust the color as needed */
  text-decoration: none; /* Optional: Removes the underline */
}

.contact-info a:hover {
  text-decoration: underline; /* Optional: Underline on hover */
}

/* Main */
@media (min-width: 992px) {
  main .grid {
    grid-column-gap: var(--spacing-company);
    grid-template-columns: auto 25%;
  }
}

form.grid {
  grid-row-gap: 0;
}

/* Modify the left margin */
/* Adjust container padding */
.container {
  margin-left: 5rem; /* Adjust this value as needed */
  padding-left: 0rem; /* Adjust this value as needed */
  padding-right: 1rem; /* Adjust this value as needed */
}

/* If you are using a grid layout, you might want to adjust the gap as well */
.main .grid {
  grid-column-gap: 0rem; /* Adjust this value as needed */
}

/* Adjust the starting point of the main content */
main {
  margin-left: 0rem; /* Adjust this value as needed */
}

/* Additionally, check if there are any other elements with padding or margin that need to be adjusted */
hgroup,
.job-experience,
#experience,
.flex-container,
ul {
  margin-left: 0rem; /* Adjust this value as needed */
  padding-left: 0; /* Set padding to 0 if you want content to start from the very edge */
}

/* Override any global dark theme settings for mobile */
@media (max-width: 768px) {
  body {
    background-color: #ffffff; /* Ensure the background is white on mobile */
  }

  h1 {
    font-size: 1.5rem; /* Adjust for mobile */
  }

  h2 {
    font-size: 1.25rem; /* Adjust for mobile */
  }

  .container {
    padding-left: 1rem; /* Reduced padding for mobile */
    padding-right: 1rem;
  }

  :root {
    --spacing-company: 1rem; /* Reduced global spacing for mobile */
  }

  hgroup {
    margin-bottom: 1rem; /* Reduced vertical spacing between headers */
  }

  .job-experience,
  .flex-container {
    margin-left: 0; /* Align with the rest of the content */
  }
}

/* Aside nav */
aside img {
  margin-bottom: 0.25rem;
}

aside p {
  margin-bottom: var(--spacing-company);
  line-height: 1.25;
}

/* Container for the hgroup and figure */
.flex-container {
  display: flex;
  align-items: center; /* Aligns items vertically in the center */
  justify-content: space-between; /* Spreads items out evenly */
  flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */
}

/* Style for the hgroup */
hgroup {
  flex: 1; /* Allows the hgroup to grow and take up available space */
}

/* Style for the figure */
figure {
  flex: 0 1 auto; /* Prevents the figure from growing but allows it to shrink */
  margin-left: 20px; /* Adds some space between the text and the image */
}

/* Optional: style for the image */
figure img {
  max-width: 200px; /* Adjust as needed */
  height: auto;
}

/* Social media */
.social-media {
  display: inline-flex;
  align-items: center;
  gap: 20px; /* Adjust the space between icons */
}

.social-link {
  display: inline-block;
  vertical-align: top; /* Aligns the top of the element with the top of the tallest item in the line */
  margin-top: 0px; /* Adjust as necessary to move icons higher */
  width: 48px; /* Adjust icon size */
  height: 48px;
  text-decoration: none;
}

.social-link img {
  display: block;
  width: 100%; /* Adjust icon size within the container */
  height: auto;
}

/* Job experience */
#experience {
  margin-bottom: 20px;
}

.job-experience {
  margin-bottom: 20px; /* Adds space between job experiences */
}

.job-experience strong {
  font-size: 1.2em; /* Larger font size for company names */
  color: var(--text-color); /* Choose a color that stands out */
  font-weight: bold; /* Makes the company names bold */
}

.job-title {
  font-size: 1em; /* Slightly smaller than company names */
  color: var(--text-color-subtle); /* A subtler color for job titles */
  font-weight: normal;
}

.job-experience p,
.job-experience ul {
  margin-left: 20px; /* Indent details to align under job titles */
}

ul {
  list-style-type: square; /* Style list bullets */
}

/* Style for tools and technologies */
.job-experience p {
  font-style: italic; /* Italicize the tools and technologies */
  color: var(--text-color); /* A color that blends with the rest of the text */
}

/* Education title */
.education-experience {
  margin-bottom: 1rem; /* Space between education entries */
}

.education-experience strong {
  font-size: 1.2em; /* Larger font size for the institution names */
  color: var(--text-color); /* Color for institution names */
  font-weight: bold; /* Bold font weight for institution names */
}

.education-experience .education-title {
  font-size: 1em; /* Font size for the title */
  color: var(--text-color); /* Subtle color for the title */
  font-weight: normal; /* Normal font weight for the title */
}

.education-experience p {
  margin-left: 20px; /* Indent details to align under titles */
  font-style: italic; /* Italicize the date range */
  color: var(--text-color); /* Color that blends with the rest of the text */
}

/* Sidebar */
#sidebar {
  position: fixed;
  top: 250px;
  right: 0;
  width: 550px; /* Adjust the width as needed */
  height: calc(
    300% - 250px
  ); /* Subtract the same value to maintain the gap at the top */
  background-color: #f9f9f9; /* Light background for the sidebar */
  overflow-y: auto; /* Adds scroll to the sidebar if content is too long */
  padding: 20px;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* Make sure this is higher than the z-index of elements behind the sidebar */
  color: #4a4a4a; /* Charcoal grey */
}

.sidebar-section {
  margin-bottom: 1rem; /* Smaller margin between sections */
}

.sidebar-section h4 {
  margin-top: 0;
  padding-top: 20px;
  font-size: 1em; /* Smaller font size for headings */
  margin-bottom: 0.2rem; /* Reduced bottom margin for headings */
}

.sidebar-section ul {
  font-size: 0.9em; /* This will make the font size smaller */
  line-height: 1.2; /* This will make the interline spacing narrower */
  padding-left: 1.5rem; /* Reduced padding for list */
  margin-bottom: 0.2rem; /* Reduced bottom margin for list */
}

.sidebar-section ul li {
  font-size: 0.9em; /* Smaller font size for list items */
  line-height: 1.2; /* Reduced line height for list items */
  margin-bottom: -0.5rem; /* Reduced space between list items */
}

.sidebar-section p {
  padding-left: 20px;
  font-size: 0.9em; /* Apply the same font size for consistency */
  line-height: 1.2; /* Apply the same line height for consistency */
}

@media screen and (max-width: 960px) {
  #sidebar {
    width: 200px; /* Smaller width on smaller screens */:
  }
}

@media screen and (max-width: 768px) {
  #sidebar {
    display: none; /* Hide sidebar on very small screens */
  }
}