/* Universal Styles */

/* Asterisk wildcard selector to override default styles added by the browser */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* General styles */
body {
  font-family: 'Kanit', sans-serif;
  background: url("../assets/whitebackground.jpg") no-repeat center center fixed !important;
  background-size: cover;
  margin: 0;
  padding: 0;
  height: auto;
  overflow-y: scroll;

  display: flex;
  height: 100%;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  margin-top: 100px;
  margin-bottom: 100px;
  min-height: 100vh;
  padding-bottom: 80px;
  flex-direction: column;
  flex: 1;
}

/* 404 Page Styles */

.pagenotfound {
  overflow: hidden;
  /* Ensures no extra scrollbars are displayed */
}

.pagenotfound main {
  text-align: center;
  padding-top: 20vh;
  min-height: 80vh;
}

h2 a:hover {
  color: blue !important;
}

/* Nav Bar Styles */

.navbar {
  font-size: x-large;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

nav a {
  color: white !important;
  font-weight: 400 !important;
}

nav button {
  color: white !important;
  font-weight: 400 !important;
}

nav a:hover {
  color: blue !important;
}

nav button:hover {
  color: blue !important
}


/* Main Content */

#title {
  font-size: 100%;
  padding-bottom: 50px;
}

#title h1 {
  font-size: 400%;
}

.code img {
  width: 10%;
}


.accordion {
  width: 50%;
}

.accordion-button {
  color: white !important;
  background-color: #333;

}

.accordion-button:not(.collapsed) {
  background-color: #333;
}

.collapsed {
  background-color: #333;
}

.accordion .accordion-button::after {
  color: white;
  /* Change the arrow color to white */
  filter: brightness(0) invert(1);
  /* Ensure the arrow is visible against the dark background */
}

/* Progress Bars - Currently being controlled by Javascript */

.skills {
  text-align: center;
}

.progress-container {
  display: flex;
  flex-direction: column;
  max-width: 90%;
  margin: 0 auto;
  border: #333;
}

.skill {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.skill-label {
  width: 30%;
  min-width: 100px;
  text-align: left;
  font-size: 1rem;
}

.progress-bar-background {
  flex-grow: 1;
  height: 25px;
  background-color: #f3f3f3;
  border-radius: 5px;
  border: 1px solid #333;
  position: relative;
  margin-left: 10px;
}

.progress-bar {
  height: 100%;
  background-color: #ffd700;
  border-radius: 5px;
}

.progress-value {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #333;
}

/* Project Cards */
.card-footer {
  display: flex;
  justify-content: center;
  /* Center the button horizontally */
  align-items: center;
  /* Center the button vertically */
}

/* Style the button with black and white colors */
.card-footer .btn-primary {
  background-color: black;
  /* Black background */
  color: white;
  /* White text */
  border: 1px solid white;
  /* White border */
}

.card-footer .btn-primary:hover {
  background-color: white;
  /* White background on hover */
  color: black;
  /* Black text on hover */
  border: 1px solid black;
  /* Black border on hover */
}

/* Contact Page Styles */
.small-box {
  background-color: black;
  padding: 20px;
  /* Adjust padding to control spacing around the text */
  max-width: 550px;
  /* Set max-width to control the width of the box */
  margin: 0 auto;
  /* Center the box within the container */
  border-radius: 10px;
  /* Optional: add rounded corners */
}

.contactname {
  color: white;
}

.contacttitle1,
.contacttitle2 {
  display: inline;
  /* This keeps them on the same line */
  margin: 0;
  /* Removes default margin */
}

.contacttitle1 {
  color: green;
}

.contacttitle2 {
  color: blue;
}

.code2 {
  display: block;
  /* Make the image occupy its own line */
  margin: 20px auto;
  /* Space above and below the image, centered */
}

.dotted-line {
  border: none;
  border-top: 1px solid white;
  /* Main line color */
  position: relative;
  margin: 20px 0;
  /* Space above and below the line */
}

.dotted-line::before,
.dotted-line::after {
  content: "•";
  /* Unicode dot character */
  position: absolute;
  font-size: 20px;
  /* Size of the dots */
  top: -8px;
  /* Adjust position vertically */
  color: white;
  /* Dot color */
}

.dotted-line::before {
  left: 0;
  /* Dot on the left */
}

.dotted-line::after {
  right: 0;
  /* Dot on the right */
}


.contacttext {
  color: white;
}

.mobile {
  display: inline;
  color: green;
}

.email {
  display: inline;
  color: orange
}

.mobile, .email, .contacttext {
  font-size: 18px; /* Adjust font size as needed */
  line-height: 1.5; /* Optional: Adjust line spacing */
  text-decoration: none; /* Remove underline from links */
}

/* Footer Styles */

footer {
  text-align: center;
  position: fixed;
  background-color: black;
  width: 100%;
  bottom: 0;
  padding: 0em;
  z-index: 1000;
}

#social-networks {
  text-align: center;
  padding: 20px 0;
  display: flex;
  justify-content: space-evenly;
  list-style-type: none;
  text-decoration: none !important;
  color: inherit;
  align-items: center;
}

#social-networks i {
  font-size: 160%;
  padding: 5%;
  color: white;
}

#social-networks span {
  font-size: 14px;
  color: white;
  text-decoration: none;
}

li a {
  text-decoration: none;
}

li i:hover {
  color: blue !important;
}

li span:hover {
  color: blue !important;
}

/* Hover Effects */
.links a:hover {
  text-decoration: underline;
}

#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  /* Ensures it stays behind content */
}

/* Media Queries */

@media (max-width: 768px) {
  .accordion {
    width: 100%;
  }

  .skill-label {
    width: 100%;
    /* Make the label full width */
    margin-bottom: 5px;
    /* Space below the label */
    text-align: center;
    /* Center-align the label */
    font-size: 0.9rem;
    /* Slightly reduce font size on mobile */
  }

  .progress-bar-background {
    width: 100%;
    /* Make the progress bar full width */
    margin-left: 0;
    /* Remove the margin on smaller screens */
  }

  .progress-value {
    font-size: 12px;
    /* Adjust font size for smaller screens */
  }
}