:root {
  --primary: #ffffff;
  /* This is the primary color. */
  --secondary: #00ff33;
  /* This is the secondary color. */
  --bg: #930000;
  /* This is the background color. */
  --heading: #000000;
  /* This is the color for headings. */
  --text: #fff644;
  /* This is the color for text. */
}

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

html {
  scroll-behavior: smooth;
}

.port_about,
.port_glossary,
.port_skills,
.port_heading,
.port_contact,
.port_contri,
.port_projects {
  display: inline-block;
  position: relative;
  color: var(--primary);
}

.port_about::after,
.port_glossary::after,
.port_heading::after,
.port_contact::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--primary);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.port_about:hover::after,
.port_glossary:hover::after,
.port_heading:hover::after,
.port_contact:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}


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. */
}

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

h3 {
  font-size: 2rem;
  /* This sets the font size for h3 headings. */
}

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_syn {
  transition: transform .7s ease-in-out;
  max-width: 200px;
  /* This sets the maximum width for the Profile Picture. */
  border-radius: 100px;
  /* This adds rounded corners to the Profile Picture. */
}

.logo_syn:hover {
  transform: rotate(360deg);
}

/* 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: 200%;
  border-radius: 100rem;
}

.about_nav,
.glossary_nav,
.contact_nav {
  transition: box-shadow .3s;
}

.about_nav:hover,
.glossary_nav:hover,
.contact_nav:hover {
  box-shadow: 0 0 100px #89b4fa85;
  background: var(--primary);
  color: var(--bg);
  border-radius: 100rem;
}

/* 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;
  font-size: 1.7rem;
  text-align: center;
}


#about a {
  display: inline-block;
  position: relative;
  color: #0080fe;
  text-decoration: none;
}

#about a::after
 {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0080fe;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

#about a:hover::after
 {
  transform: scaleX(1);
  transform-origin: bottom left;
}


#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;
}

/* 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 h3 {
  text-align: left;
  align-self: flex-start;
  width: 100%;
  padding: 0;
}


#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;
  color: var(--secondary); 
  text-decoration: none
}

#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;
}


.last-contact-item,
.footer {
  padding-bottom: 20px;
}
#glossary p {
  text-align: left;
  align-self: flex-start;
}

/* 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;
  }
}