/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxsAUi-qNiXg7eU0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxsAXC-qNiXg7Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wq_FQftx9897sxZ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
 	font-weight: 700;
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wq_Gwftx9897g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

a {
  color: #1772d0;
  text-decoration: none;
}
a:focus, a:hover { color: #f09228; text-decoration: none; }
.dark-mode a:hover { color: #fffb00; text-decoration: none; }

body, td, th, tr, p, a {
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 18px;
  margin: 0;
  padding: 0;
}

strong { font-size: 14px; }

h2 {
  margin: 0;
  font-weight: normal;
  font-size: 22px;
  padding-bottom: 8px;
}

.papertitle { font-size: 14px; font-weight: 700; }

.name {
  padding-top: 20px;
  margin: 0;
  font-size: 32px;
}

.one { width:160px; height:160px; position:relative; }
.two { width:160px; height:160px; position:absolute; transition:opacity .2s; }
.fade { transition:opacity .2s; }

span.highlight { color:#ff9100; padding:1px 2px; border-radius:4px; }
.dark-mode span.highlight { color:#fffb00; }

.colored-box {
  color:black;
  padding:20px;
  display:inline-block;
  border-radius:10px;
}

.taskbar {
  width: 100%;
  height: 50px;
  background-color: #f8f9fa;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #e0e0e0;
  position: sticky;
  top: 0;
  z-index: 999;
}

.taskbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 6px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(8px);
  width: 100%;
  max-width: 760px;
}

.taskbar-name {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  padding-bottom: 2px;
  border-bottom: 3px solid;
  border-image: linear-gradient(90deg, #00ffcc, #0b95ff) 1;
}

.dark-mode .taskbar-name {
  color: #e6e6e6;
  border-image: linear-gradient(90deg, #f09228, #764ba2) 1;
}

.dark-mode-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  padding: 6px;
}

.mode-icon { width:24px; height:24px; transition:transform .3s; }
.dark-mode-toggle:hover .mode-icon { transform:scale(1.1); }

.banner {
  width: 100%;
  height: 33.33vh;
  background: url('images/banner.jpg') center/cover no-repeat;
  position: relative;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.profile-card {
  background: rgba(255, 255, 255, 0.452);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  max-width: 90%;
  width: fit-content;
  height: auto;
  max-height: 90%;
  overflow: hidden;
  transform: translateX(30%);
  padding-block: 24px;
}

.profile-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.profile-name {
  font-size: 32px;
  font-weight: 700;
  color: #000;
  margin: 0 0 10px 0;
}

.profile-occupation {
  font-size: 20px;
  color: #000;
  margin: 0 0 5px 0;
}

.profile-email {
  font-size: 15px;
  color: #1772d0;
}

.profile-email:hover { color:#f09228; }

.profile-image-wrapper {
  padding: 20px 0;
  display: flex;
  align-items: center;
}

.profile-picture {
  width: auto;
  height: min(250px, 30vh);
  aspect-ratio: 1 / 1;
  border-radius: 15px;
  object-fit: cover;
}

.links-separator {
  padding: 20px 2.5%;
  border-bottom: 1px solid #808080;
  text-align: center;
}

.separator {
  padding: 0 0 20px 0;
  border-bottom: 1px solid #808080;
  text-align: center;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-direction: row-reverse;
}

.contact-icon { width:18px; height:18px; }
.dark-mode .contact-icon { filter:invert(1) brightness(1.1); }

.dark-mode { background:#0b0b0b; color:#e6e6e6; }
.dark-mode a { color:#9ecbff; }
.dark-mode .taskbar { background:#111; border-bottom-color:#222; }
.dark-mode .mode-icon {
  filter: invert(36%) sepia(62%) saturate(600%) hue-rotate(175deg) brightness(95%) contrast(95%);
}

.dark-mode .profile-card {
  background: rgba(20,20,20,0.7);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.dark-mode .profile-name,
.dark-mode .profile-occupation { color:#fff; }
.dark-mode .profile-email { color:#9ecbff; }
.dark-mode .links-separator { border-bottom-color:#333; }
.dark-mode .separator { border-bottom-color:#333; }

.dark-mode .project-card {
  background: rgba(30, 30, 30, 0);
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.123);
}

.project-info h3 {
  margin: 0;
  font-size: 15px;
}

.project-info p {
  margin: 0;
  font-size: 15px;
}

.project-info a {
  color: #1772d0;
  font-weight: 500;
  margin-right: 12px;
  font-size: 15px;
  text-decoration: none;
}

.project-info p a {
  margin-right: 0;
  white-space: nowrap;
}

.project-info a:focus,
.project-info a:hover {
  color: #f09228;
  text-decoration: none;
}

.dark-mode .project-info a:hover {
  color: #fffb00;
  text-decoration: none;
}

@media (max-width: 768px) {
  .banner { height:auto; min-height:400px; padding:15px; }
  .profile-card { flex-direction:column; max-width:90%; transform:none; }
  .profile-info { text-align:center; }
  .profile-name { font-size:28px; }
  .profile-occupation { font-size:16px; }
}

@media (max-width: 480px) {
  .banner { min-height:350px; padding:10px; }
  .profile-card { max-width:100%; padding:15px; gap:15px; }
  .profile-picture { width:clamp(120px,40vw,150px); height:clamp(120px,40vw,150px); }
  .profile-name { font-size:24px; margin-bottom:8px; }
  .profile-occupation { font-size:14px; }
  .profile-email { font-size:13px; }
}

.dark-mode-toggle {
  background: none;
  border: none;
  cursor: pointer;
}

.dark-mode-toggle:hover i {
  transform: rotate(20deg);
}

.dark-mode .dark-mode-toggle .fa-moon {
  color: #4da3ff;
}

:not(.dark-mode) .dark-mode-toggle .fa-sun {
  color: #ff9f1c;
}

.dark-mode-toggle i {
  font-size: 20px;
  transition: color 0.3s ease, transform 0.3s ease;
}

section {
    max-width: 800px;
    margin: 32px auto;
    padding: 0 16px;
}

.project-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0px 0px 10px rgba(63, 63, 63, 0.349);
    border-radius: 12px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.project-media {
    position: relative;
    width: 160px;
    height: 160px;
    flex-shrink: 0;

    display: flex;          /* use flexbox for centering */
    justify-content: center; /* horizontal center */
    align-items: center;     /* vertical center */
    overflow: hidden;        /* crop overflow */
}

.project-video {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}

.project-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-media img {
    width: 100%;
    height: 100%;
    background: #ffffff;
    object-fit: fill;
    display: block;
}

.project-info {
    min-width: 0;
    flex: 1;
}

.project-info h3 {
    margin: 0 0 6px 0;
    font-size: 18px;
}

.project-info p {
    margin: 4px 0;
    font-size: 14px;
    line-height: 1.4;
}

.project-links {
  margin-bottom: 10px;
}

.project-links a {
    margin-right: 12px;
    text-decoration: none;
    color: #1772d0;
    font-weight: 500;
}

.project-links a:hover {
    text-decoration: underline;
}