/* Global styles for Skills page */
#page-skills {
    background-color: #000000; /* Dark background for page */
    color: #e2e2da; /* Light text color */
    padding: 10vh 10vw 5vh 10vw; /* No padding on top, 10% left/right, 5% bottom */
    width: 100%;
    border-top: 2px solid #444; /* Add top border */
    border-top-left-radius: 25px; /* Round top left corner */
    border-top-right-radius: 25px; /* Round top right corner */
    box-sizing: border-box; /* Ensures padding and border are included in the element's width and height */
}


/* Skills Section */
.skills-section {
    margin: auto;
    padding: 2vh; /* Adjust padding to be responsive */
}

.skills-header {
    width: 110%; /* Set the width to full */
    
    display: flex; /* Flex display for better alignment */
    flex-direction: column; /* Stack items vertically */
    margin: 0; /* Remove any margin that could reduce the width */
    padding: 0; /* Remove any padding to align properly */
    box-sizing: border-box; /* Include padding and border in the width */
}

.skills-header h2 {
    color:#cfcfcf;
    font-family: 'Roboto';
    font-size: 6.5vw; /* Make font size responsive based on viewport width */
    white-space: nowrap; /* Prevent text wrapping */
    text-overflow: ellipsis; /* Add ellipsis if text overflows */
    margin-bottom: 5vh; /* Adjust bottom margin for spacing */
    margin-left: -8vw; /*make sure to use VERTICAL WIDTH(vw) not VERTICAL HEIGHT(vh) if problems when less width*/
}


.skills-number {
    font-size: 4vw; /* Responsive font size based on viewport width */
    position: relative; /* Make it a relatively positioned element */
    top: -5vh; /* Shift it up slightly */
    color: #888888;
}

.skills-text-container {
    display: flex; /* Displays elements in a single line */
    justify-content: flex-end; /* Aligns the container to the right */
    margin-left: 0vw; /* Pushes the container to the right */
    margin-right: 30vh;
    margin-top: 15vh;
    margin-bottom: 5vh;
}

.skills-text {
    font-family: 'Roboto';
    font-size: 1.2rem; /* Adjust size as needed */
    font-weight: 500;
    letter-spacing: 0em;
    color: #7e7e7e; /* Gray color */
    margin: 0;
    padding-right: 1.5vw; /* Responsive padding */
}

.skills-description {
    font-family: 'Roboto';
    font-size: 1.2vw; /* Responsive font size */
    max-width: 43%; /* Sets maximum width */
    color: #cfcfcf; /* Light gray color */
    margin-top: 0; /* Removes extra margin */
    line-height: 1.5em;
}

/* Skill Set Container */
.skill-set {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end; /* Align content to the right */
    margin-bottom: 5vh;
    padding-bottom: 2vh;
    /* Remove the border-bottom */
}


/*no idea how the lining up of this makes sense, if you remove one margin it stops the other*/
.skills-BigNumber {
    font-family: 'Roboto Condensed';
    font-size: 4vw; /* Responsive font size */
    font-weight: 600;
    color: #cfcfcf;
    margin-right: 33vw; /* Responsive margin */
    margin-left: -25vw;
    flex-shrink: 0; /* Prevent shrinking */
}

.skill-number {
    color:#7e7e7e;
    font-family:'Roboto Mono';
    font-size: 1vw;
    margin-right: 2%;
}

/* Skill Content Style */
.skill-content {
    max-width: 60%; /* Set a max width for content */
    text-align: left; /* Align text to the left */
    padding-left: 2vw; /* Add some left padding */
}

.skill-content h3 {
    font-size: 3vw; /* Increase font size to make "Web Design" bigger */
    color: #e2e2da;
}

.skill-details {
    font-size: 1vw; /* Responsive font size */
    font-family: 'Roboto';
    margin: 3vh 0;
    margin-top: 6vh;
    color: #cfcfcf;
    width: 70%;
    line-height: 1.3em;
}

.skills-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.skills-list li {
    font-size: 1.5vw; /* Responsive font size */
    font-family: "Roboto", monospace;
    padding: 1vh 0; /* Responsive padding */
    border-top: 0.2vh solid #333; /* Adjust border size responsively */
    color: #e2e2da;
}

.custom-line {
    border: none; /* Remove the default border */
    border-top: 0.2vh solid #444; /* Adjust border size responsively */
    width: 125%; /* Set width to match container */
    margin: 2vh 0vh 5vh -20vh;
    opacity: 0.6; /* Adjust the transparency to match the look */
}




/* Custom Media Query for Small Phones like iPhone SE */
@media only screen and (max-width: 375px) {
  /* Add your custom styles for small phones here */
  .skills-text-container {
    margin-left: 0vw; /* Reduce margins for small phone screens */
    margin-right: 15vw;
    font-size: 12px; /* Adjust font size for readability */
    margin-top: 0vh;
  }

  .skills-header {
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center content */
    text-align: center; /* Center text */
  }

  .skill-set {
    margin-bottom: 12px; /* Adjust space between skill sets */
  }

  .skills-description{
    font-size: 0.7em;
    max-width:90%;
  }

  /* Additional adjustments for small phones */
}


/* Custom Media Query for iPads in Portrait Mode */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .skills-text-container {
      margin-left: 5vw; /* Slightly increase margins for iPad portrait */
      margin-right: 5vw;
      font-size: 14px; /* Adjust font size slightly for readability */
      margin-top: 2vh;
    }
  
    .skills-header {
      flex-direction: column; /* Stack content vertically */
      align-items: center; /* Center content */
      text-align: center; /* Center text */
    }
  
    .skill-set {
      margin-bottom: 15px; /* Adjust space between skill sets */
    }
  
    .skills-description {
      font-size: 1.5em; /* Slightly larger font size */
      max-width: 85%; /* Increase max width slightly */
    }
  }
  
  /* Custom Media Query for iPads in Landscape Mode */
  @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .skills-text-container {
      margin-left: 8vw; /* Adjust margins for iPad landscape */
      margin-right: 8vw;
      font-size: 13px; /* Slightly smaller font size */
      margin-top: 1vh;
    }
  
    .skills-header {
      flex-direction: column; /* Stack content vertically */
      align-items: center; /* Center content */
      text-align: center; /* Center text */
    }
  
    .skill-set {
      margin-bottom: 14px; /* Adjust space between skill sets */
    }
  
    .skills-description {
      font-size: 0.8em; /* Slightly smaller font size */
      max-width: 80%; /* Adjust max width */
    }
  }
  
  /* Custom Media Query for iPhone 12 and Similar Devices */
  @media only screen and (max-width: 430px) {
    .skills-text-container {
      margin-left: 3vw; /* Adjust margins for iPhone 12 */
      margin-right: 10vw;
      font-size: 13px; /* Adjust font size for readability */
      margin-top: 1vh;
    }
  
    .skills-header {
      flex-direction: column; /* Stack content vertically */
      align-items: center; /* Center content */
      text-align: center; /* Center text */
    }
  
    .skill-set {
      margin-bottom: 13px; /* Adjust space between skill sets */
    }
  
    .skills-description {
      font-size: 0.75em; /* Slightly smaller font size */
      max-width: 85%; /* Adjust max width */
    }
  }
  
  /* Custom Media Query for iPhone XR and Similar Devices */
  @media only screen and (max-width: 414px) {
    .skills-text-container {
      margin-left: 2vw; /* Adjust margins for iPhone XR */
      margin-right: 12vw;
      font-size: 13px; /* Adjust font size for readability */
      margin-top: 1vh;
    }
  
    .skills-header {
      flex-direction: column; /* Stack content vertically */
      align-items: center; /* Center content */
      text-align: center; /* Center text */
    }
  
    .skill-set {
      margin-bottom: 12px; /* Adjust space between skill sets */
    }
  
    .skills-description {
      font-size: 0.75em; /* Slightly smaller font size */
      max-width: 85%; /* Adjust max width */
    }
  }
  
  /* Custom Media Query for iPhone SE and Small Phones */
  @media only screen and (max-width: 375px) {
    .skills-text-container {
      margin-left: 0vw; /* Reduce margins for small phones */
      margin-right: 15vw;
      font-size: 12px; /* Adjust font size for readability */
      margin-top: 0vh;
    }
  
    .skills-header {
      flex-direction: column; /* Stack content vertically */
      align-items: center; /* Center content */
      text-align: center; /* Center text */
    }
  
    .skill-set {
      margin-bottom: 12px; /* Adjust space between skill sets */
    }
  
    .skills-description {
      font-size: 0.7em; /* Adjust font size */
      max-width: 90%; /* Adjust max width */
    }
  }
  
  /* Custom Media Query for Very Small Phones */
  @media only screen and (max-width: 330px) {
    .skills-text-container {
      margin-left: 0vw; /* Reduce margins for very small phones */
      margin-right: 10vw;
      font-size: 11px; /* Smaller font size */
      margin-top: 0vh;
    }
  
    .skills-header {
      flex-direction: column; /* Stack content vertically */
      align-items: center; /* Center content */
      text-align: center; /* Center text */
    }
  
    .skill-set {
      margin-bottom: 10px; /* Add space between skill sets */
    }
  
    .skills-description {
      font-size: 0.65em; /* Slightly smaller font size */
      max-width: 85%; /* Adjust max width */
    }
  }
  

/* Custom Media Query for Surface Duo */
@media only screen and (max-width: 540px) {
    .skills-text-container {
      margin-left: 3vw; /* Adjust margins for Surface Duo */
      margin-right: 10vw;
      font-size: 13px; /* Adjust font size for readability */
      margin-top: 2vh;
    }
  
    .skills-header {
      flex-direction: column; /* Stack content vertically */
      align-items: center; /* Center content */
      text-align: center; /* Center text */
    }
  
    .skill-set {
      margin-bottom: 15px; /* Adjust space between skill sets */
    }
  
    .skills-description {
      font-size: 0.8em; /* Adjust font size for readability */
      max-width: 85%; /* Ensure full width on smaller screens */
    }
  
    .skills-number {
      font-size: 3vw; /* Smaller font size for Surface Duo */
      position: relative;
      top: -4vh;
      color: #888888;
    }
  
    .skills-list li {
      font-size: 1.4vw; /* Slightly larger font size for better readability */
      padding: 1.5vh 0; /* Responsive padding */
      border-top: 0.2vh solid #333;
    }
  
    .custom-line {
      width: 120%; /* Adjust width to match the container */
      margin: 2vh 0vh 5vh -15vh; /* Adjust margins */
    }
}

/* Custom Media Query for Samsung Galaxy S20 FE */
@media only screen and (max-width: 1080px) {
    .skills-text-container {
      margin-left: 2vw; /* Adjust margins for S20 FE */
      margin-right: 10vw; /* Adjust margins for S20 FE */
      font-size: 13px; /* Adjust font size for readability */
      margin-top: 2vh; /* Adjust top margin for spacing */
    }
  
    .skills-header {
      flex-direction: column; /* Stack content vertically */
      align-items: center; /* Center content */
      text-align: center; /* Center text */
    }
  
    .skill-set {
      margin-bottom: 14px; /* Adjust space between skill sets */
    }
  
    .skills-description {
      font-size: 0.8em; /* Adjust font size for readability */
      max-width: 85%; /* Ensure full width */
    }
  
    .skills-number {
      font-size: 3.5vw; /* Responsive font size */
      position: relative;
      top: -4vh; /* Slight adjustment for positioning */
      color: #888888;
    }
  
    .skills-list li {
      font-size: 1.4vw; /* Adjusted font size for readability */
      padding: 1.5vh 0; /* Adjusted padding */
      border-top: 0.2vh solid #333;
    }
  
    .custom-line {
      width: 125%; /* Ensure width matches container */
      margin: 2vh 0 5vh -18vw; /* Adjust margins */
    }
  }