:root {
  --primary: #8a63ff; /* This is the primary color. */
  --secondary: #A591FF; /* This is the secondary color. */
  --bg: #1F1D36; /* This is the background color. */
  --heading: #E0DEF4; /* This is the color for headings. */
  --text: #D5D4F0; /* This is the color for text. */
}

body {
  font-family: system-ui, sans-serif; /* This sets the font family. */
  line-height: 1.5; /* This sets the line height. */
  background-color: var(--bg); /* This sets the background color. */
  color: var(--text); /* This sets the text color. */
}

h1, h2, h3 {
  color: var(--heading); /* This sets the color for headings. */
}

h1 {
  font-size: 5.5rem; /* This sets the font size for h1 headings. */
  margin-bottom: 20px; /* This sets the margin for h1 headings. */
}

h2 {
  font-size: 4rem; /* This sets the font size for h2 headings. */
  width: 100%; /* This sets the width for h2 headings. */
  align-self: center; /* This centers the h2 headings vertically. */
  text-align: center; /* This centers the h2 headings horizontally. */
}

h3 {
  font-size: 2.5rem; /* This sets the font size for h3 headings. */
  margin-bottom: 10px; /* This sets the margin for h3 headings. */
}

section {
  padding: 60px 20px; /* This sets the padding for sections. */
}

img {
  max-width: 100%; /* This sets the maximum width for images. */
  border-radius: 10px; /* This adds rounded corners to images. */
  border: 2px solid var(--primary); /* This adds a border around images. */
}

.logo_csi {
  max-width: 200px; /* This sets the maximum width for the CSI logo. */
  border-radius: 100px; /* This adds rounded corners to the CSI logo. */
  outline: none; /* This removes the outline from the CSI logo. */
}
/* Header */

header {
  /* The header will have a background color of var(--bg). */
  background-color: var(--bg);

  /* The text in the header will be centered. */
  text-align: center;

  /* There will be padding of 20px at the top and bottom of the header. */
  padding: 20px 0;
}

nav a {
  /* The nav links will have a margin of 10px, padding of 8px 15px, a border radius of 5px, no text decoration, and a color of var(--text). */
  margin: 10px;
  padding: 8px 15px;
  border-radius: 5px;
  text-decoration: none;
  color: var(--text);
  font-size: 250%;
}

nav a:hover {
  /* When the nav links are hovered over, they will change to a background color of var(--primary). */
  background: var(--primary);
}

/* Sections */

section {
  /* The sections will be displayed in a flex container with a flex direction of column and align-items of center. This means that the children of the sections will be displayed one after the other, and the items will be centered vertically. */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* About */

#about p {
  /* The about page paragraph will have a max-width of 800px, a margin of 20px 0, a font size of 1.7rem, and will be text-aligned to the center. */
  max-width: 800px;
  margin: 20px 0;
  font-size: 1.7rem;
  text-align: center;
}

#about ul {
  /* The about page unordered list will be displayed in a flex container with justify-content of center, no list-style, and no padding. This means that the list items will be displayed one after the other, and there will be no bullets or spaces between them. */
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}

#about li {
  /* The about page list items will have a margin of 0 10px. This means that there will be no margin to the left and right of the list items, but there will be a margin of 10px to the bottom. */
  margin: 0 10px;
}

/* Skills */

.skill-icons {
  /* The skill icons will have a font size of clamp(2rem, 5vw, 5rem), a margin of 30px 0, and a color of var(--primary). */
  font-size: clamp(2rem, 5vw, 5rem);
  margin: 30px 0;
  color: var(--primary);
}

/* This code defines the style for the education section. */

#education {
  /* The education section will have a max-width of 100% and will be centered on the page. */
  max-width: 100%;
  text-align: center;
  align-items: center;

  /* The margin attribute has been commented out because it is not necessary. */
  /* margin: 0 auto; */
}

#education h2 {
  /* The h2 headings in the education section will have a margin-bottom of 30px and will be displayed full-width. */
  margin-bottom: 30px;
  max-width: 100%;
}

#education h3 {
  /* The h3 headings in the education section will have a margin-bottom of 10px and will be displayed full-width. */
  margin-bottom: 10px;
  max-width: 100%;
}

#education p {
  /* The paragraphs in the education section will have a line-height of 1.6, will be displayed full-width, and will have a font size of 180%. */
  line-height: 1.6;
  max-width: 100%;
  font-size: 180%;
}

#education ul {
  /* The unordered lists in the education section will have no list-style and will be displayed full-width. */
  list-style: none;
  max-width: 100%;

  /* The padding-left attribute has been commented out because it is not necessary. */
  /* padding-left: 0; */
}

#education li {
  /* The list items in the education section will have a line-height of 1.8 and will be displayed full-width. */
  line-height: 1.8;
  max-width: 100%;
}

/* This media query defines the style for the education section when the screen width is less than 600px. */

@media (max-width: 600px) {

  /* The education section will have padding of 20px. */
  #education {
    padding: 20px;
  }

  /* The h2 headings in the education section will have a font size of 28px. */
  #education h2 {
    font-size: 28px;
  }

  /* The h3 headings in the education section will have a font size of 20px. */
  #education h3 {
    font-size: 20px;
  }

}

 /* This code defines the style for the projects section. */

/* Projects Container */

.projects {
  /* The projects container will have overflow-x: auto, overflow-y: hidden, and white-space: nowrap. This will allow the projects to scroll horizontally if they are too wide to fit on the screen. */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;

  /* The projects container will be centered on the page and will have a max-width of 1000px. */
  margin: 0 auto;
  max-width: 1000px;

  /* The projects container will have padding of 20px. */
  padding: 20px;
}

/* Individual Projects */

.project {
  /* Each project will be displayed as an inline-block element with a width of 300px and a vertical alignment of top. It will also have a margin-right of 20px, a background color of #38355c, and rounded borders with a radius of 10px. */
  display: inline-block; 
  width: 300px;
  vertical-align: top;
  margin-right: 20px;
  background-color: #38355c;
  border-radius: 10px;

  /* The project will have padding of 20px between the content. */
  padding: 20px;
}

/* Remove margin from last project */

.project:last-child {
  /* The last project will not have a margin-right of 20px. */
  margin-right: 0;
}

/* Project Content Styling */

.project h3 {
  /* The h3 headings for each project will have a margin-top of 10px and a font size of 1.3rem. */
  margin-top: 10px;
  font-size: 1.3rem;
}

.project p {
  /* The paragraphs for each project will have a color of #8c87a2. */
  color: #8c87a2;
}

/* This code defines the style for the contact section. */

/* Contact */

#contact p {
  /* The paragraphs in the contact section will have a margin of 10px 0 and a font size of 1.4rem. */
  margin: 10px 0;
  font-size: 1.4rem;
}

#contact a {
  /* The links in the contact section will be aligned to the center and will have text-align: center. */
  align-items: center;
  text-align: center;
}

#contact i {
  /* The icons in the contact section will have a color of var(--secondary) and will have a margin-right of 10px. */
  color: var(--secondary);
  margin-right: 10px;
}

/* Media Queries */

@media (max-width: 600px) {

  /* The header will change to a flex direction of column when the screen width is less than 600px. */
  header {
    flex-direction: column;
  }

  /* The about image will change to a width of 180px and will be aligned to the center when the screen width is less than 600px. */
  #about img {
    width: 180px;
    align-self: center;
  }

}