@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');

/* Universal selector to normalize spacing across all elements */
* {
  box-sizing: border-box;
}


body {
  font-family: "Courier Prime", monospace;
  margin: 0px;
  padding: 0px;
  background-color: #f4f4f4;
  color: black;
}

header {
  text-align: center;
  padding: 5px;
  border-bottom: dashed;
}

a {
  text-decoration: none;
  color: black;
  margin: 5px;
}

a:hover {
    text-decoration: underline;
  }

section {
  padding: 2em;
}

img.profile {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: solid 1px black;
  display: block;
  margin: auto;
}

progress {
  width: 150px;
  height: 10px;
  border: solid 1px black;
  color: black;
  background-color: #f4f4f4;
}

progress::-webkit-progress-bar {
  background-color: #f4f4f4;
}

progress::-webkit-progress-value  {
  background-color: black;
}

progress::-moz-progress-bar  {
  background-color: black;
}

details {
  display: flex;
  border: dashed 1px black;
  padding: 2px;
  margin: 2px;
}

details:hover {
  border: solid 1px red;
}

#about {
    text-align: center;
}

#skills {
    text-align: center;
}

#projects {
    text-align: center;
}

nav {
    margin: 20px;
}

#aboutnav {
    padding-right: 20px;
    font-size: 23px;
}

#skillsnav {
    font-size: 23px;
}

#projectsnav {
    padding-left: 20px;
    font-size: 23px;
}

#aboutmeheader {
    font-size: 40px;
}

#skillsheader {
    font-size: 40px;
}

#projectsheader {
    font-size: 40px;
}

#title {
    font-size: 50px;
}

.footer {
    text-align: center;
}

#linkedin {
    width: 30px;
    height: 30px;
}

#github {
    width: 30px;
    height: 30px;
}

#paragraph1 {
  font-size: 20px;
}

#summary {
  font-size: 23px;
}

#paragraph2 {
  font-size: 18px;
}

#connectheader {
  font-size: 27px;
}

nav a[href="resume.html"],
nav a[href="cover-letter.html"],
nav a[href="career-goals.html"],
nav a[href="index.html"] {
  font-size: 23px;
}

nav a {
  margin: 0 10px;
}

#contact-info {
  text-align: center;
}

#summary {
  text-align: center;
}

#skills {
  text-align: center;
}

#skills table {
  width: 80%; /* You MUST set a width for margin: auto to work effectively. Adjust as needed. */
  margin: 0 auto; /* This centers the block-level table horizontally */
}

/* Center the main section headings */
#professional-experience h2,
#education h2 {
  text-align: center;
}

/* Center each individual article within the sections */
#professional-experience article,
#education article {
  width: 80%; /* Or any specific max-width like 700px; essential for margin: auto to work */
  margin: 0 auto; /* Centers the block-level article horizontally */
  text-align: left; /* Reset text alignment for content inside the article if needed */
}

/* Add this to your style.css file */

#contact-me {
    /* Existing styles for background, padding, border, etc. */
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 30px;
    margin-top: 40px; /* Space above the form */
    box-shadow: 0 0 8px rgba(0,0,0,0.05);

    /* --- Centering Styles --- */
    width: 90%; /* Give it a defined width, less than 100% of its parent */
    max-width: 600px; /* Set a maximum width for larger screens */
    margin-left: auto; /* Push it to the center from the left */
    margin-right: auto; /* Push it to the center from the right */
    /* Shorthand for margin-left/right auto: margin: 40px auto 0; (top auto bottom) */

    /* Ensure text within the form is left-aligned for readability */
    text-align: left;
}

/* Also, ensure the form's heading is centered */
#contact-me h2 {
    text-align: center;
    color: #0056b3;
    margin-bottom: 25px;
}

.emphasize {
  font-style: italic;
}

ul {
  list-style-type: square;  /* You can use circle, disc, etc. */
  list-style-position: inside;
  padding-left: 20px;
}