/*
 * Main css file for the index page
 */

/* Html body element */
body {
  /* Page background color */
  background-color: #f4fafd;
  /* Main font */
  font-family: "Roboto", system-ui, sans-serif;
  /* Remove space at the top */
  margin: 0;
  /* Expand the body element to the bottom */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Main page element */
main {
  /* White text on dark background */
  color: white;
  background-color: #040b14;
  /* Center in the middle of the page */
  min-width: 800px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  /* Inner padding */
  padding: 20px;
  /* Outer shadow */
  box-shadow: 0px 0px 30px 30px rgba(0, 0, 0, 0.2);
  /* Expand the main element to the bottom of the body */
  flex: 1;
}

/* Main profile image */
.profile-img {
  /* Center image */
  margin: 15px auto;
  display: block;
  /* Image border */
  border: 8px solid color-mix(in srgb, white, transparent 85%);
  /* Rounded image */
  border-radius: 50%;
}

/* Name under the profile image */
.profile-name {
  text-align: center;
  font-weight: 600;
}

/* General paragraphs */
p {
  /* Darker color */
  color: #a8a9b4;
  /* Text size and alignment */
  text-align: center;
  font-size: 18px;
  /* Spacing between the text and the edge of the page */
  padding-left: 40px;
  padding-right: 40px;
}

/* Main page lists */
.section-list {
  /* Remove list dots */
  list-style: none;
  padding-left: 0px;
}

/* Main page list items */
.section-list li {
  /* Center items */
  text-align: center;
  /* List item font */
  color: #a8a9b4;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 200;
  /* Spacing between list items*/
  padding-top: 15px;
  padding-bottom: 15px;
}

/* Icons in lists */
.section-list svg {
  /* Add spacing between icons and text */
  margin-left: 10px;
  margin-right: 10px;
  /* Animate the transition when a link is hovered */
  transition: 0.3s;
}

/* Title of a section */
.section-title {
  /* Hide overflow of horizontal lines */
  overflow: hidden;
  /* Center text */
  text-align: center;
}

/* Use a span to add lines before and after the section title */
.section-title > span {
  position: relative;
  display: inline-block;
}

/* Add lines before and after the section title **/
.section-title > span:before, .section-title > span:after {
  content: '';
  position: absolute;
  top: 50%;
  border-bottom: 2px solid;
  width: 100vw;
  margin: 0 20px;
}

/* Expand the line before the title */
.section-title > span:before {
  /* Move line to the left */
  right: 100%;
  /* Left to right gradient */
  border-image: linear-gradient(to left, white, transparent 300px);
  border-image-slice: 1;
}

/* Expand the line after the title */
.section-title > span:after {
  /* Move line to the right */
  left: 100%;
  /* Right to left gradient */
  border-image: linear-gradient(to right, white, transparent 300px);
  border-image-slice: 1;
}

/* Links inside section lists */
.section-list a {
  /* No underline */
  text-decoration: none;
  /* Don't use blue link color */
  color: inherit;
  /* Animate transition to hovered */
  transition: 0.3s;
}

/* Hovered links inside section lists */
.section-list a:hover {
  /* Highlight link when hovered */
  color: white;
}

/* Icons inside hovered links inside section lists */
.section-list a:hover svg {
  /* Blue color for icons */
  color: #149ddd;
  /* Space icons away from the text */
  margin-left: 20px;
  margin-right: 20px;
}

/* Links for socials and other contacts at the bottom of the page */
.contact-links {
  text-align: center;
}

/* Links inside contact links section */
.contact-links a {
  /* Circle thing */
  margin: 2px;
  border-radius: 50%;
  /* Fixed size */
  display: inline-flex;
  font-size: 22px;
  width: 50px;
  height: 50px;
  /* Center icon inside circle */
  align-items: center;
  justify-content: center;
  /* Circle background color */
  background: color-mix(in srgb, white, transparent 90%);
  /* Don't use link color */
  color: inherit;
  /* Add space below when on very small screens */
  margin-bottom: 8px;
  /* Animate transition to hovered link */
  transition: 0.3s;
}

/* Hovered links inside contact links section */
.contact-links a:hover {
  /* Fade the background to blue */
  background: #149ddd;
}

/* Elements that fade in are hidden at the start */
.fade-in {
  opacity: 0;
}

/* Copyright section */
.copyright-section {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
  color: #a8a9b4;
}

/* Handle small screens */
@media (max-width: 840px) {
  /* Resize main page element */
  main {
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }
}