/* Base styles */
@import url('./left-panel.css');
@import url('./nav.css');
@import url('./social-links.css');
@import url('./publications.css');
@import url('./software.css');
@import url('./main-page.css');

/* Ensure html and body take full height */
html, body {
  margin: 0;
  padding: 0;
  overflow-y: hidden;
  height: 100%;
}

.main {
  flex: 1;
}

header {
  position: relative;
  display: flex; /* Make header a flex container */
  justify-content: space-between; /* Space out items */
  align-items: center; /* Vertically center the content */
  padding: 2vw;  /* Padding between nav and rest of page, 2% viewport height*/
  flex-wrap: wrap; /* Allow wrapping */
}

/* Set default theme to Dark Mode */
body {
  background-color: #121212; /* Dark background */
  color: #e0e0e0; /* Light text color */
  transition: all 0.3s ease-in-out;
}

/* Wrapper takes full viewport height */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Light Mode styles */
body.light-mode {
  background-color: #fff; /* Light background */
  color: #333; /* Dark text color */
  transition: all 0.3s ease;
}

/* Position the night mode button on the right */
.night-mode-btn {
  position: fixed;
  top: 10px; /* Adjust as needed */
  right: 10px; /* Adjust as needed */
  background: none;
  border: none;
  color: #f1f1f1;
  font-size: clamp(1.2rem, 2.5vw, 2rem); /*scales font size: (min, max, won't go past)*/
  cursor: pointer;
  transition: color 0.3s ease;
  margin-left: 20px;
  z-index: 9999; /* Make sure it stays on top of other content */
}

.night-mode-btn:hover {
  transform: scale(1.1); /* Slight hover effect */
}

/* Change color when in light mode */
body.light-mode .night-mode-btn {
  color: #333;
}

/* Extra styling if you want to add hover effects for the button */
.night-mode-btn:hover {
  color: #ffeb3b; /* Example color change on hover */
}

/* Overall container */
.container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* Left: 1/4, Right: 3/4 */
}

.profile-image {
  width: 100%;
  max-width: 300px;
  max-height: 300px;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  object-position: right 40%;
  flex-shrink: 0;
}