.container {
  max-width: 800px; 
}

.table-responsive {
  width: 100% !important;
  overflow-x: auto;

}


.header {
  margin-top: 6rem;
  text-align: center; 
}

.value-prop {
  margin-top: 1rem; 
}

.value-props {
  margin-top: 4rem;
  margin-bottom: 4rem; 
}

.docs-header {
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: .2rem;
  font-weight: 600; 
  margin-bottom: 0.1rem;
}

.docs-section {
  border-top: 1px solid #eee;
  padding: 4rem 0;
  margin: 6rem 0 6rem 0;
  
}

.value-img {
  display: block;
  text-align: center;
  margin: 2.5rem auto 0; 
}

.item-grid .column,
.item-grid .columns {
  background: #EEE;
  text-align: center;
  border-radius: 4px;
  font-size: 1rem;
  text-transform: uppercase;
  height: 30px;
  line-height: 30px;
  margin-bottom: .75rem;
  font-weight: 600;
  letter-spacing: .1rem; 
}

.docs-item .row,
.docs-item.row,
.docs-item form {
  margin-bottom: 0; 
}

.docs-item h1,
.docs-item h2,
.docs-item h3,
.docs-item h4,
.docs-item h5,
.docs-item h6 {
  margin-bottom: 1rem; 
}

.heading-font-size {
  font-size: 1.2rem;
  color: #999;
  letter-spacing: normal; 
}

.code-item {
  margin-top: 1.5rem;
  margin-bottom: 0; 
}

.code-item-body {
  white-space: pre;
  word-wrap: break-word;
}

.item {
  position: relative; 
  margin-top: 4rem; 
  margin-bottom: 2rem; 
}

.item-header {
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: .5rem; 
}

.item-description {
  margin-bottom: 1.5rem; 
}

.item-project-summary{
  font-size: 1rem;
  text-align: justify;
}

select{
  width: 100%;
}

.params{
  width: 100%;
}

.item-screenshot-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #eee;
  height: 250px;
}

.item-screenshot {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  display: block;
  object-fit: contain;
}
.item-screenshot.coming-soon {
  width: auto;
  position: absolute;
  background: #eee;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px; 
}


.docs-subheader {
font-size: 1.1rem;
margin: 0 0 1rem 1rem;
}












/* ------ */



.dark-theme #about-me {
  margin: 2rem 0 2rem 0;
}

#about-me{
  margin: 2rem 0 2rem 0;
  text-align: justify;
  font-size: 1.2rem;
}

.date {
  color:#33C3F0;
}

.pdf-light {
  background: white !important;
  color: black !important;
}

/* Navbar - mobile default */
.navbar {
  display: flex;
  flex-direction: row;       /* horizontal on mobile */
  justify-content: center;   /* center items horizontally */
  align-items: center;       /* vertically align items */
  flex-wrap: wrap;           /* wrap to next line if too many items */
  background: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin-bottom: 6rem;
  width: 100%;
  z-index: 99;
}

.navbar-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  width: auto;
}

.navbar-item {
  margin: 0.5rem 1rem; /* horizontal spacing between items */
}

.navbar-link {
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-decoration: none;
  color: #222;
}

.res-intro #name {
  font-weight:800;
  color:#555;
}

@keyframes cursor {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: #33C3F0; /* Skeleton's accent blue */
  }
}

@keyframes typing {
  from {
    width: 100%;
  }
  to {
    width: 0; /* deletes once */
  }
}

@keyframes slide {
  33.3333% {
    font-size: 3.3rem;
    letter-spacing: 3px;
    color: #222; /* Dark text for light theme */
  }
  to {
    font-size: 3.3rem;      
    letter-spacing: 3px;
    color: #222; /* Keep it visible */
  }
}

.typing-slider {
  font-family: "Doto", monospace;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  margin-left: 1rem;

}

.typing-slider p {
  position: relative;
  display: inline;
  font-size: 0;
  text-transform: uppercase;
  letter-spacing: 0;
  animation: slide 2s step-start forwards; /* run once, keep state */
}

.typing-slider p::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border-left: 3px solid #33C3F0; /* Accent cursor */
  background-color: #fff;         /* Light background */
  animation: typing 2s steps(15) forwards, cursor 1.5s infinite;
}





.pointer {
  cursor: pointer;
  -webkit-animation: blink 1.5s steps(1, start) infinite;
  animation: blink 1.5s steps(1, start) infinite;
  color:#33C3F0;
}


@-webkit-keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}


/* Larger than phone */
@media (min-width: 550px) {


  
  .header {
    margin-top: 18rem; 
  }
  .value-props {
    margin-top: 9rem;
    margin-bottom: 7rem; 
  }
  .value-img {
    margin-bottom: 1rem; 
  }
  .item-grid .column,
  .item-grid .columns {
    margin-bottom: 1.5rem; 
  }
  .docs-section {
    padding: 4rem 0; 
  }

  #work-experience .work-summary{
    text-align: justify;
    font-size: 1.2rem;
  }
  #work-experience .work-technologies{
    text-align: justify;
    font-size: 1.2rem;
  }

  .item-send-yourself-copy {
    float: right;
    margin-top: 12px; 
  }
  .item-screenshot-wrapper {
    position: absolute;
    width: 48%;
    height: 100%;
    left: 0;
    max-height: none; 
  }

  .table-responsive {
    width: 100% !important;
    overflow-x: auto;
  }

}

/* Larger than tablet */
@media (min-width: 750px) {
  /* Navbar */
  .navbar + .docs-section {
    border-top-width: 0; 
  }
  .navbar {
    flex-direction: row;       /* horizontal on desktop */
    justify-content: flex-start; /* align left */
    height: 6.5rem;
    padding: 0 2rem;
  }
  .navbar-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: auto;
  }
  .navbar-item {
    margin: 0 1.5rem 0 0;
  }
  .navbar-link {
    line-height: 6.5rem;
    font-size: 11px;
    letter-spacing: .2rem;
    margin-right: 35px;
  }

  .navbar-link.active {
    color: #33C3F0; 
  }

  .has-docked-nav .navbar {
    position: fixed;
    top: 0;
    left: 0; 
  }

  .has-docked-nav .navbar-spacer {
    display: block; 
  }

  .has-docked-nav .navbar > .container {
    width: 80%; 
  }

  /* Popover */
  .popover.open {
    display: block;
  }
  .popover {
    display: none;
    position: absolute;
    top: 92%;
    left: -50%;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    -webkit-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
       -moz-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
            filter: drop-shadow(0 0 6px rgba(0,0,0,.1)); 
  }
  .popover-item:first-child .popover-link:after, 
  .popover-item:first-child .popover-link:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none; 
  }
  .popover-item:first-child .popover-link:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 10px;
    margin-left: -10px; 
  }
  .popover-item:first-child .popover-link:before {
    border-color: rgba(238, 238, 238, 0);
    border-bottom-color: #eee;
    border-width: 11px;
    margin-left: -11px; 
  }
  .popover-list {
    padding: 0;
    margin: 0;
    list-style: none; 
  }
  .popover-item {
    padding: 0;
    margin: 0; 
  }
  .popover-link {
    position: relative;
    color: #222;
    display: block;
    padding: 8px 20px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: .1rem; 
  }
  .popover-item:first-child .popover-link {
    border-radius: 4px 4px 0 0; 
  }
  .popover-item:last-child .popover-link {
    border-radius: 0 0 4px 4px;
    border-bottom-width: 0; 
  }
  .popover-link:hover {
    color: #fff;
    background: #33C3F0; 
  }
  .popover-link:hover,
  .popover-item:first-child .popover-link:hover:after {
    border-bottom-color: #33C3F0; 
  }



}

.header .header-buttons {
  margin: 6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.header .header-buttons a {
  text-decoration: none;
  color: inherit;
  border: none;
  outline: none;
}

.header .header-buttons a:link,
.header .header-buttons a:visited,
.header .header-buttons a:hover,
.header .header-buttons a:active,
.header .header-buttons a:focus {
  text-decoration: none;
  color: inherit;
  border: none;
  outline: none;
}

.header .header-buttons button {
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  background: #fff;
  color: #222;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.header .header-buttons button:hover {
  background: #33C3F0;
  border: 1px solid #33C3F0;
  color: #fff;
}


/* ---------------- DARK THEME SUPPORT ---------------- */
.dark-theme {
  background-color: #121212;
  color: #e0e0e0; /* base text color */
}

/* Generic text elements */
.dark-theme p,
.dark-theme ul,
.dark-theme ol,
.dark-theme li,
.dark-theme div,
.dark-theme a,
.dark-theme h1,
.dark-theme h2,
.dark-theme h3,
.dark-theme h4,
.dark-theme h5,
.dark-theme h6 {
  color: #aaa; /* brighter default text */
}

/* Links */
.dark-theme a {
  color: #33C3F0; /* accent blue */
}
.dark-theme a:hover {
  color: #66d5f5; /* lighter blue on hover */
}

/* Navbar */
.dark-theme .navbar {
  background: #1e1e1e;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}

.dark-theme .navbar-link {
  color: #ddd;
}

.dark-theme .navbar-link.active {
  color: #33C3F0;
}

/* Sections */
.dark-theme .docs-section {
  border-top: 1px solid #333;
}

.dark-theme .item-grid .column,
.dark-theme .item-grid .columns {
  background: #2a2a2a;
  color: #eee;
}

/* Cards / images */
.dark-theme .item-screenshot-wrapper {
  border: 1px solid #333;
}

.dark-theme .item-screenshot.coming-soon {
  background: #2a2a2a;
}

/* Popovers */
.dark-theme .popover {
  background: #1e1e1e;
  border: 1px solid #333;
}

.dark-theme .popover-link {
  color: #ddd;
  border-bottom: 1px solid #333;
}

.dark-theme .popover-link:hover {
  background: #33C3F0;
  color: #fff;
  border-bottom-color: #33C3F0;
}

/* Headers and intro */
.dark-theme .docs-header,
.dark-theme .docs-subheader,
.dark-theme .heading-font-size,
.dark-theme .res-intro #name {
  color: #fafafa; /* brighter headers */
}

.dark-theme .code-item {
  margin-top: 1.5rem;
  margin-bottom: 0; 
  background-color: #555;
}

.dark-theme .code-item-body {
  white-space: pre;
  word-wrap: break-word;
  background-color: #555;
}

.dark-theme code{
  background-color: #333;
}

.dark-theme input {
  background-color: #333;
  color:#eee;
}

@keyframes cursor {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: #33C3F0;
  }
}

@keyframes typing {
  from {
    width: 100%;
  }
  to {
    width: 0; /* deletes once */
  }
}

@keyframes slide {
  33.3333% {
    font-size: 3.3rem;
    letter-spacing: 3px;
  }
  to {
    font-size: 3.3rem;      /* stay visible */
    letter-spacing: 3px;  /* keep spacing */
  }
}

.dark-theme .typing-slider {
  font-family: "Doto", monospace;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  margin-left: 1rem;
}

.dark-theme .typing-slider p {
  position: relative;
  display: inline;
  font-size: 0;
  text-transform: uppercase;
  letter-spacing: 0;
  animation: slide 2s step-start forwards; /* run once, keep state */
}

.dark-theme .typing-slider p::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border-left: 3px solid black;
  background-color: #121212;
  animation: typing 2s steps(15) forwards, cursor 1.5s infinite;
}

.dark-theme .header .header-buttons a {
  text-decoration: none;
  color: inherit;
  border: none;
  outline: none;
}

.dark-theme .header .header-buttons a:link,
.dark-theme .header .header-buttons a:visited,
.dark-theme .header .header-buttons a:hover,
.dark-theme .header .header-buttons a:active,
.dark-theme .header .header-buttons a:focus {
  text-decoration: none;
  color: inherit;
  border: none;
  outline: none;
}

.dark-theme .header .header-buttons button {
  background: #1e1e1e;
  color: #aaa;
  border-color: #33C3F0;
}

.dark-theme .header .header-buttons button:hover {
  background: #33C3F0;
  color: #fff;
}