* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
  scroll-behavior: smooth;
}

#Skip {
  margin-top: -1000px;
  position: absolute;
}

#HighContrastButton {
  margin-top: 4rem;
  border-radius: 15px;
  padding: 0.2rem;
  margin-left: 1rem;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-image: url("../files/images/darkBackground.png");
  background-attachment: scroll;
  z-index: -1;
}

#navBar-container {
  position: fixed;
  width: 100vw;
  z-index: 1;
}

/* Responsive Changes */
@media screen and (max-width: 991.5px) {
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("../files/images/darkBackground_mobile.png");
    background-attachment: scroll;
    z-index: -1;
  }
}
.counter {
  display: flex;
  height: 6rem;
  line-height: 1;
  font-family: "Helvetica";
  font-size: 15px;
  position: relative;
  -webkit-font-smoothing: antialiased;
  margin-bottom: 1rem;
}

.counterNumber {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.counterItem {
  margin-top: auto;
  margin-bottom: auto;
  text-align: center;
  color: #b5b3b3;
  margin-right: 5rem;
}

.counterItem:hover {
  color: white;
  cursor: pointer;
}

/* General Styling */
.container-fluid {
  padding-top: 8rem;
}

/* Home Section */
.homeRow {
  margin-bottom: 2rem;
}

.main {
  color: rgb(233, 229, 229);
  font-weight: bold;
  padding-left: 5vw;
  padding-right: 5vw;
}

.homeText {
  text-align: left;
  padding-top: 2rem;
  min-height: 17rem;
}

.homeText h1 {
  font-size: 3.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.homeText h2 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.homeText a {
  color: blueviolet;
  text-decoration: none;
}

.portfolioImageDiv {
  text-align: left;
}

.portfolioImageDiv img {
  max-width: 70%;
}

/* Typewriter cursor */
.cursor {
  color: white;
  font-weight: 400;
}

/* Social Media Icons */
#twitter,
#github,
#linkedin {
  font-size: 2em;
  background-color: #18191f;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5019607843), 10px 1px 12px rgba(0, 0, 0, 0.5019607843), 2px 2px 10px rgba(0, 0, 0, 0.5019607843), 2px 2px 3px rgba(0, 0, 0, 0.5019607843), inset 2px 2px 10px rgba(0, 0, 0, 0.5019607843), inset 2px 2px 10px rgba(0, 0, 0, 0.5019607843), inset 2px 2px 10px rgba(0, 0, 0, 0.5019607843), inset 2px 2px 10px rgba(0, 0, 0, 0.5019607843);
  border-radius: 29px;
  padding: 11px 19px;
  margin-left: 15px;
  margin-right: 15px;
  animation: animate 3s linear infinite;
  text-shadow: 0 0 50px #0072ff, 0 0 100px #0072ff, 0 0 150px #0072ff, 0 0 200px #0072ff;
}

#github {
  animation-delay: 0.3s;
}

#linkedin {
  animation-delay: 0.7s;
}

@keyframes animate {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
/* Services Section */
#Services {
  background-color: #111827;
  padding-left: 3rem;
  padding-right: 3rem;
}

.card {
  background-color: #1f2937;
  color: white;
  border-radius: 1rem;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5019607843), 10px 1px 12px rgba(0, 0, 0, 0.5019607843), 2px 2px 10px rgba(0, 0, 0, 0.5019607843), 2px 2px 3px rgba(0, 0, 0, 0.5019607843);
  margin-top: 4rem;
  margin-bottom: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  min-height: 21rem;
}

.cardImage {
  width: 7rem;
  height: 7rem;
  background-color: #374151;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-width: 0.3rem;
  border-style: solid;
  border-color: #474d56;
}

.card img {
  border-radius: 1rem 1rem 0 0;
  width: 5rem;
}

.card h1 {
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 1rem;
}

/* My Expertise Section */
/*
#MyExpertise {
    margin-top: 2rem;
    padding-left: 3rem;
    padding-right: 3rem;
}

.myExpertiseTitle {
    color: white;
    text-align: center;
    font-weight: 700;
    font-size: 2rem;
}

.myExpertiseText {
    color: #9ca3af;
    text-align: center;
    font-weight: 400;
    font-size: 1rem;
}

.smallCard {
    background-color: #1f2937;
    color: white;
    border-radius: 1rem;
    box-shadow: 2px 2px 2px #00000080, 10px 1px 12px #00000080, 2px 2px 10px
    #00000080, 2px 2px 3px #00000080;
    margin-top: 4rem;
    margin-bottom: 4rem;
    text-align: center;
    padding: 2rem;
    min-height: 10rem;
}

.smallCard h1 {
    font-weight: 400;
    font-size: 1.8rem;
}

.smallCard p {
    color: #9ca3af;
}
*/
/* My Expertise with table */
table {
  width: 100%;
  margin: 20px auto;
  border-collapse: collapse;
  justify-content: center;
  align-items: center;
  text-align: center;
}

caption {
  display: table-caption;
  text-align: center;
  caption-side: top; /* Ensures the caption is displayed above the table */
  color: white;
  text-align: center;
  font-weight: 700;
  font-size: 2rem;
}

caption p {
  color: #9ca3af;
  text-align: center;
  font-weight: 400;
  font-size: 1rem;
}

th {
  color: white;
  padding: 0.5rem; /* Reduced padding for better stacking */
  white-space: nowrap; /* Prevent header text from wrapping */
}

.headerCard {
  background: #212b35;
  padding: 0.2rem;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  transition: 0.5s;
  color: #ddd;
  font-size: 1.2em;
}

.headerCard:hover {
  box-shadow: 0 6px 12px rgba(255, 255, 255, 0.2);
}

td {
  padding: 20px;
  width: 25%;
}

.smallCard {
  background: #212b35;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  transition: 0.5s;
  color: #ddd;
  height: 12rem;
}

.smallCard h1 {
  font-weight: 700;
  font-size: 2rem;
}

.smallCard:hover {
  box-shadow: 0 6px 12px rgba(255, 255, 255, 0.2);
}

details {
  margin-top: 10px;
  cursor: pointer;
}

summary {
  font-weight: bold;
  color: #ddd;
}

td h1,
td p,
td .smallCard {
  cursor: pointer;
}

.transition {
  transition: all 1s ease-in-out;
}

.hidden {
  display: none;
}

.fade-in {
  opacity: 0;
  animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Responsive Styles */
@media (max-width: 991.5px) {
  thead {
    display: none; /* Hide the header row */
  }
  tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }
  td {
    display: block;
    width: 100%;
    padding: 1rem 2rem !important;
    position: relative;
  }
  .smallCard {
    text-align: center;
  }
  .smallCard h2,
  .smallCard p,
  .smallCard details {
    text-align: center;
  }
}
/* Button Styling */
.buttonRow {
  display: flex;
  justify-content: center;
  align-items: center;
}

.refButton {
  font-size: 1.1rem;
  border-color: white;
  width: 12rem;
  font-weight: bold;
  cursor: pointer;
}

.btn-hover {
  width: 200px;
  color: #fff;
  cursor: pointer;
  height: 55px;
  text-align: center;
  border: none;
  background-size: 300% 100%;
  border-radius: 50px;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.btn-hover:hover {
  background-position: 100% 0;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.btn-hover:focus {
  outline: none;
}

.btn-hover.color-1 {
  background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
  box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}

.btn-hover.color-2 {
  background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
  box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}

.btn-hover.color-3 {
  background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
  box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}

.btn-hover.color-4 {
  background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
  box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
}

.btn-hover.color-5 {
  background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
  box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
}

.btn-hover.color-6 {
  background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);
  box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
}

.btn-hover.color-7 {
  background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645);
  box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
}

.btn-hover.color-8 {
  background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
  box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}

.btn-hover.color-9 {
  background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
  box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}

.btn-hover.color-10 {
  background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a, #FBB03B);
  box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}

.btn-hover.color-11 {
  background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);
  box-shadow: 0 5px 15px rgba(242, 97, 103, 0.4);
}

/* Responsive Changes */
@media screen and (max-width: 991.5px) {
  .homeText {
    text-align: center;
  }
  .counter {
    text-align: center;
  }
  .social {
    text-align: center;
  }
  .counter {
    display: inline-flex;
    justify-content: center;
    width: 100vw;
    margin: 0;
  }
  .counterItem {
    margin-right: 0;
  }
  .counterItem2 {
    margin-left: 1.5rem;
  }
  .counterItem1 {
    margin-right: 1.5rem;
  }
  .portfolioImageDiv {
    text-align: center;
    margin-top: 1rem;
  }
  .portfolioImageDiv img {
    max-width: 50%;
  }
  .container-fluid {
    padding-top: 3rem;
  }
}
@media print {
  /* Hide non-essential elements */
  header, nav, aside, footer, .menu, .sidebar,
  video, .video-container,
  button, .interactive {
    display: none !important;
  }
  /* Print-friendly text styling */
  body {
    color: black !important;
    background: white !important;
    font-family: serif;
    font-size: 12pt;
    line-height: 1.5;
  }
  /* Force all text elements to be visible with high contrast */
  * {
    color: black !important;
    background: transparent !important;
  }
  /* Links visible and styled as text */
  a {
    color: blue !important;
    text-decoration: underline !important;
  }
  /* Image formatting */
  img {
    max-width: 50% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }
  /* Table formatting */
  table {
    width: 100% !important;
    border-collapse: collapse !important;
  }
  th, td {
    border: 1px solid black !important;
    padding: 5px !important;
    text-align: left !important;
  }
  /* List formatting */
  ul, ol {
    list-style-position: inside !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Code blocks */
  pre, code {
    background: #f0f0f0 !important;
    padding: 10px !important;
    border-radius: 5px !important;
    overflow-x: auto !important;
  }
  /* Details/summary */
  details {
    background: #f0f0f0 !important;
    padding: 10px !important;
    border: 1px solid black !important;
    border-radius: 5px !important;
  }
  summary {
    font-weight: bold !important;
  }
  /* Blockquotes */
  blockquote {
    background: #f0f0f0 !important;
    padding: 10px !important;
    border-left: 5px solid black !important;
    font-style: italic !important;
    margin: 0 !important;
  }
  /* Form elements */
  form {
    display: block !important;
  }
  input, textarea, select {
    width: 100% !important;
    padding: 5px !important;
    border: 1px solid black !important;
  }
  /* Articles and sections for structure */
  article, section {
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid black !important;
    border-radius: 5px !important;
    background: #f0f0f0 !important;
  }
  /* Use full width for content */
  main, .content {
    width: 100% !important;
  }
  /* Page margin */
  @page {
    margin: 2cm;
  }
}

/*# sourceMappingURL=index_linker.css.map */