/* Basic reset for margin and padding */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif; /* Simple, clean font */
  background-color: #7389AE; 
}

/* Navbar styling */
.navbar {
  background: #B5BAD0;
  background: linear-gradient(180deg,rgba(181, 186, 208, 1) 0%, rgba(116, 139, 168, 1) 82%, rgba(65, 103, 136, 1) 100%);
  top: 0px;
  width: 18%;
  left: 0px;
  height: 100%;
  position: fixed;
}
.navbar h3 {
  font-size: 1.5em;
  color: #22181C;
  text-align: left;
  padding-left: .5em;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-right: .5em;
  font-family: Verdana, sans-seri;
  /* border-bottom: 1px solid #ccc; */
}
.navbar a {
  display: block;
  color: #22181C;
  padding-left: 1em;
  padding-top: .5em;
  padding-bottom: .5em;
  font-family: Verdana, sans-serif;
  text-decoration: none;
}
.navbar a:hover {
  text-decoration: underline;
  font-weight: bold;
}

/* Center the main container and add padding */
.container {
  margin-top: 2%; /* Centers the container */
  margin-left: 20%; /* Adjust for navbar */
  margin-right: 2%;
  margin-bottom: 2%;
  width: 76.5%;
  padding: 20px;
  background: #B5BAD0; /* White background for content */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Soft shadow for depth */
}

/* Section headings */
h1, h2 {
  color: #416788; /* Dark text for contrast */
  margin-bottom: 10px;
}

#about p{
  margin-top: 50px;
  background-color: #416788;
  color: #B5BAD0;
  border-radius: 10px;
  padding: 2%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25); /* More prominent shadow for depth */
}

#about img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  clip-path: circle(40%);
  margin-bottom: 20px; /* Space below the image */
}

#about h1 {
  font-size: 2.5em;
  text-align: center;
}

#about h3 {
  font: 1em;
  text-align: center;
  color: #416788;
}

/* Socials section styling */
#skills {
  background-color: #E0E0E2; /* Light gray background */
  border-radius: 15px;        /* Rounded edges */
  padding: 16px;              /* Space inside the box */
  margin-top: 200px;           /* Space above the section */
  box-shadow: 0 4px 16px rgba(0,0,0,0.25); /* More prominent shadow for depth */
}

#skills h2 {
  text-align: center;
  margin-bottom: 10px;
}

/* Center images in the skills section */
#skills img {
  display: inline;        /* Make images block elements so they can be centered */
  margin-left: auto;     /* Center images horizontally */
  margin-right: auto;
  width: 100%;           /* Images will scale down if needed */
  height: auto;          /* Keep the image's aspect ratio */
  margin-bottom: 10px;   /* Space below each image */
}

#skills svg {
  margin: 20px;
}

/* Make skill images appear left to right */
.skills-images {
  text-align: center; /* Center the images horizontally in the container */
}
.skills-images img {
  display: inline; /* Show images side by side */
  max-width: 20%;
  max-height: 20%;
  margin: 0 2%;       /* Space between images */
  vertical-align: middle; /* Align images vertically */
}

/* Make the HTML skill image a bit smaller */
#html {
  max-width: 16.9%; /* The HTML image will not be wider than 18% of its container */
  padding-right: 10%;
}

/*Make the Java skill image a bit bigger*/
#java {
  max-width: 25%; 
  padding-right: 5%;
}

#skills h3 {
  display: inline;
  font-family: Verdana, sans-serif;
  color: #7389AE;
  margin: 10%;
}

.skills-names {
  margin-left: 21.5%;
}

#skills p {
  text-align: center;
}

#nopad {
  padding: 0;
}

/* Paragraphs and lists */
p, ul {
  color: #416788;
  line-height: 1.6;
}

/* List style */
ul {
  padding-left: 20px;
}

/* Achievements section styling */
#achievements {
  background: #81D2C7;
  background: linear-gradient(-10deg, rgba(129, 210, 199, 1) 0%, rgba(184, 218, 215, 1) 10%, rgba(224, 224, 226, 1) 100%);
  border-color: #416788;
  border-style: outset;
  border-width: 10px;
  padding: 16px;             /* Space inside the box */
  margin-top: 200px;          /* Space above the section */
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25); /* More prominent shadow for depth */
}

#achievements h2 {
  font-size: 2em;
  display: inline;
}

#interests {
  background-image: url("img/xivBackground.png");
  border-radius: 15px;        /* Rounded edges */
  padding: 16px;              /* Space inside the box */
  margin-top: 200px;           /* Space above the section */
  box-shadow: 0 4px 16px rgba(0,0,0,0.25); /* More prominent shadow for depth */
}

#interests h2 {
  color: #B5BAD0;
  margin-bottom: 10px;
}

#interests p {
  color: #B5BAD0;
  margin-right: 60%;
}

#interests button {
  display: block;
  background-color: #B5BAD0;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  margin-top: 30px;
  font-size: 1em;
}

#interests a {
  color: #22181C;
}

.mote {
  max-width: 20px;
  max-height: 20px;
  padding-left: 0px;
  margin-left: 0px;
  margin-right: 15px;
}


/* Social links styling */

#socials {
  text-align: center;
  margin-top: 150px;
}

#socials a {
  color: #0077cc;
  text-decoration: none;
  margin-right: 10px;
}

#socials svg {
  margin: 20px;
}

#socials a {
  margin: 50px;
}

#socials a:hover {
  text-decoration: underline;
}