/* ── CSS variables: dark (default) ───────────────────────────────────────── */
:root {
  --bg:               #222;
  --bg-sidebar:       #222;
  --text:             #d4d4d4;
  --link:             #7eb8f7;
  --link-hover-bg:    rgba(255,255,255,0.08);
  --link-hover-color: #fff;
  --accent:           #7eb8f7;
  --accent-text:      #222;
  --border:           #333;
  --border-hover:     #666;
  --line-color:       #d4d4d4;
}

/* ── CSS variables: light override ───────────────────────────────────────── */
body.light {
  --bg:               #ebebeb;
  --bg-sidebar:       #ebebeb;
  --text:             #000;
  --link:             blue;
  --link-hover-bg:    yellow;
  --link-hover-color: #000;
  --accent:           blue;
  --accent-text:      #fff;
  --border:           #ccc;
  --border-hover:     #777;
  --line-color:       #000;
}

body  {
  color: var(--text);
  background-color: var(--bg);
  font-family: OpenSans;
  padding-bottom: 100px;
}

@media (min-width: 994px) and (min-height: 539px) {
  #col-desc {
    position: fixed;
    background-color: var(--bg-sidebar);
  }
}

h1 {
  color: var(--accent);
  font-size: 55px;
  font-family: OpenSans;
  font-weight: bold;
}

h1 span:hover {
  background-color: var(--bg);
}

/* Style the navbar */
#navbar {
  padding-top: 1vw;
  z-index: 3;
  overflow: hidden;
}

/* Navbar links */
#navbar a {
  color: var(--text);
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 20px;
  background-color: var(--bg-sidebar);
}

.selected, #navbar a:hover {
  color: var(--accent) !important;
}

/* Page content */
.content {
  padding: 16px;
  z-index: 1;
  position: relative;
}

h2 {
  font-weight: bold;
  padding-top: 20px;
}

.email {
  font-family: Courier;
  border: none !important;
  position: relative;
}

a {
  color: var(--link);
}

a:hover {
  color: var(--link-hover-color);
  background-color: var(--link-hover-bg);
  text-decoration: none;
}

.project-title{
  font-weight: bold;
  margin-right: 10px;
  font-size: 15px;
}

.project-img {
  width: 120px;
  max-width: 8vw;
  object-fit: contain;
  border: 1px var(--text) dotted;
}

.paper-title{
  font-weight: bold;
  color: var(--text);
}

.paper {
  border-left: var(--text) 4px solid;
  padding-left: 5px;
  margin-left: 6px;
}

.paper-pubs {
  border-left: none;
}

.project-desc {}

.regular-text{
  position: relative;
}

.dot-under {
  border-bottom: 1px dotted var(--text);
}

.hovertext::after {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: max-content;
  max-width: 45vw;
  overflow-wrap: break-word;
  word-wrap: break-word;
  background-color: var(--accent);
  color: var(--accent-text);
  text-align: right;
  border-radius: 0px;
  padding: 3px 5px;
  transition: opacity 0s ease-in-out;
  position: absolute;
  z-index: 1;
  right: 0;
  top: 100%;
  left: 0%;
}

.hovertext.emailtext::after {
  left: 80%;
}

.hovertext:hover:after {
  opacity: 1;
  visibility: visible;
}

#images-holder{
  position: relative;
}

#photo-me {
  position: relative;
  width:  120px;
  margin-left: 4vw;
  padding-top: 3vw;
  z-index: 1;
}

.realpics {
  z-index: 2;
  position: absolute;
  width:  120px;
  margin-left: 4vw;
  padding-top: 3vw;
  left: 0;
}

#projects, #resume, #pubs{
  margin-bottom: 20px;
}

.bibs {
  color: var(--text);
  text-decoration: 1px var(--text) underline;
}

.bibs-pubs {
  margin-left: 0px;
  margin-top: 0;
  text-decoration: none;
  font-family: Courier;
}

.bibs:hover{
  background-color: var(--bg);
  text-decoration: none;
}

.vertical-txt {
  float: right;
  padding-top: 10px;
  padding-bottom: 10px;
  text-orientation: sideways;
  writing-mode: vertical-lr;
  text-transform: uppercase;
  color: var(--accent-text);
}

.oddcat, .evencat {
  background-color: var(--accent);
}

.resume-date {
  font-weight: bold;
}

.resume-title {
  font-weight: bold;
  color: var(--text);
  padding: 0px 10px;
}

.resume-cat, .pubs-cat {
  margin-bottom: 20px;
}

.resume-item, .pubs-item {
  margin-bottom: 10px;
}

.video {
  position: relative;
  padding-bottom: 56.25%;
  border: 1px var(--border) dotted;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

div.gallery {
  margin: 5px;
  border: 1px solid var(--border);
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid var(--border-hover);
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

.pdf {
  width: 100%;
  aspect-ratio: 4 / 3;
}

.pdf,
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* ── News list ────────────────────────────────────────────────────────────── */
.news-list {
  list-style: none;
  padding-left: 0;
}

.news-list li {
  padding: 6px 0;
  border-bottom: 1px dotted var(--border);
}

.news-list li:last-child {
  border-bottom: none;
}

/* ── Main row: flex for equal-height columns ─────────────────────────────── */
.main-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.main-row > [class*="col-"] {
  float: none;
}

/* ── Decorative lines column ─────────────────────────────────────────────── */
#lines-col {
  position: relative;
  padding: 0;
}

@media (max-width: 991px) {
  #lines-col {
    display: none;
  }
}

/* ── Dark/light toggle button ────────────────────────────────────────────── */
#dark-toggle {
  background: none;
  border: 2px solid var(--text);
  color: var(--text);
  font-size: 14px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  border-radius: 50%;
  line-height: 1;
  padding: 0;
  vertical-align: middle;
  margin-left: 8px;
  transition: background 0.15s, color 0.15s;
}

#dark-toggle:hover {
  background-color: var(--text);
  color: var(--bg);
}

/* Name + toggle on same line */
#name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}