/* color scheme and css code Copyright 2014-2025 James Guerrero
   Last Edited -- 04-06-2025*/

:root {
  --body-bg-color: #000;
  --text-color: #C0C0C0;
  --link-color: #000;
  --link-hover-color: #000;
  --link-active-color: #6495ED;
  --nav-bg-color: #6495ED;
  --nav-text-color: #000;
  --contact-link-color: #C0C0C0; /* Default contact link color */
  --contact-link-hover-color: #6495ED; /* Default contact link hover color */
}

body {
  background-color: var(--body-bg-color);
  width: 100%;
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Contact Links Only */
a.contact-links {
    color: var(--contact-link-color);
    text-decoration: none;
}

a.contact-links:hover {
    color: var(--contact-link-hover-color);
    text-decoration: underline;
}

h1, h2, h3, h4 {
  text-align: center;
  color: var(--text-color); /* Add text color variable */
}

/* Formatting of Images */
#me, #cdctp, #linkedin {
  display: block;
  border: 0;
  margin-left: auto;
  margin-right: auto;
}

#me { width: 300px; }
#cdctp { width: 70px; }
#linkedin { width: 160px; height: 25px; }

/* Formatting Table */
table { width: 100%; }
desc, input, jobtitle { width: 60%; }
jobyears, jobtotalyears { width: 40%; text-align: right; }
jobcompany, jobtotalyears { color: var(--link-active-color); } /* color variable */
textarea { width: 90%; }

/* Centering Footer */
footer { text-align: center; color: var(--text-color); } /* color variable */

#centerContainer, #topFix {
  width: 800px;
  margin: 0 auto;
}

#centerContainer {
  text-align: left;
  color: var(--text-color); /* color variable */
}

#wrap, #topFix { position: sticky; }
#wrap {
  height: 50px;
  z-index: 99;
  background-color: var(--nav-bg-color);
}

#topFix {
  z-index: 98;
  top: 0;
  background-color: var(--body-bg-color); /* color variable */
  visibility: visible;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
}

li {
  display: inline-block;
  float: left;
  margin-right: 1px;
}

li a {
  display: block;
  min-width: 140px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--nav-text-color);
  background: var(--nav-bg-color);
  text-decoration: none;
}

li:hover a {
  background: var(--text-color);
  color: var(--link-hover-color);
}

li:hover ul a {
  background: var(--body-bg-color);
  color: var(--link-active-color);
  height: 40px;
  line-height: 40px;
}

li:hover ul a:hover {
  background: var(--text-color);
  color: var(--link-hover-color);
}

li ul { display: none; }
li ul li { display: block; float: none; }
li ul li a { width: auto; min-width: 100px; padding: 0 20px; }

ul li a:hover + .hidden, .hidden:hover { display: block; }

.show-menu {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: var(--nav-text-color);
  background: var(--nav-bg-color);
  text-align: center;
  padding: 10px 0;
  display: none;
}

input[type=checkbox] { display: none; }
input[type=checkbox]:checked ~ #menu { display: block; }

/* Responsive Styles */
@media all and (max-width: 760px) {
  #centerContainer, #wrap, #topFix { width: 100%; }
  h1 { display: none; }
  #me { width: 90%; }
  ul { position: static; display: none; }
  li { margin-bottom: 1px; }
  ul li, li a { width: 100%; font-size: 1rem; }
  .show-menu { display: block; font-size: 2rem; }
}