/*
 * Main CSS file
 */

/* Global variables */
:root {
  /* Colors */
  --white: white;
  --text-color: #272829;
  --dark-background-color: #040b14;
  --light-background-color: #f4fafd;
  --accent-color: #149ddd;
}

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

/* Dark background color */
.dark-background {
  /* White text on dark background */
  background-color: var(--dark-background-color);
  color: var(--white);
}

/* Make the header stick to the side */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  transition: all ease-in-out 0.3s;
  overflow-y: auto;
  z-index: 997;
}

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

/* Name under the profile image */
.profile-name {
  font-family: "Raleway", sans-serif;
  text-align: center;
  font-weight: 700;
  font-size: 24px;
}

/* Move the main section past the sidebar */
@media (min-width: 1200px) {
  .sidebar~main {
    margin-left: 300px;
    padding-left: 12px;
  }
  .sidebar~footer {
    margin-left: 300px;
  }
}

/* Hide the sidebar on smaller screens */
@media (max-width: 1199px) {
  .sidebar-hide {
    left: -100%;
  }
}

/* Table of content list */
.table-of-contents {
  list-style: none;
  padding-left: 0;
  margin-top: 32px;
  text-align: center;
}

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

/* Items in the table of contents */
.table-of-contents li {
  /* Center items */
  text-align: center;
  /* List item font */
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 200;
  /* Spacing between list items*/
  padding-top: 15px;
  padding-bottom: 15px;
}

/* Links in the table of contents */
.table-of-contents a {
  /* No underline */
  text-decoration: none;
  /* Don't use blue link color */
  color: #a8a9b4;
  /* Animate transition to hovered */
  transition: 0.3s;
}

/* Hovered links in the table of contents */
.table-of-contents a:hover {
  /* Highlight link when hovered */
  color: var(--white);
}

/* Icons inside hovered links inside the table of contents */
.table-of-contents a:hover svg {
  /* Blue color for icons */
  color: var(--accent-color);
  /* Space icons away from the text */
  margin-left: 20px;
  margin-right: 20px;
}

/* Same as hover when this class is added form script */
.toc-active {
  /* Highlight link */
  color: var(--white) !important;
}

/* Icon when link is active */
.toc-active svg {
  /* Blue color for icons */
  color: var(--accent-color);
  /* Space icons away from the text */
  margin-left: 20px;
  margin-right: 20px;
}

/* Main section block */
section {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Section title */
.section-title {
  /* Title font */
  font-family: "Raleway", sans-serif;
  font-size: 32px;
  font-weight: 700;
  /* Title margin */
  margin-bottom: 20px;
  margin-top: 0px;
  padding-bottom: 20px;
  position: relative;
}

/* Center divs */
.centered {
  margin-left: auto;
  margin-right: auto;
}

/** Center elements depending on screen size */
@media (min-width: 1400px) {
  .centered {
    max-width: 1300px;
  }
}

@media (max-width: 1200px) {
  .centered {
    max-width: 960px;
  }
}

@media (max-width: 990px) {
  .centered {
    max-width: 690px;
  }
}

/* There is probably a better way to do this but I don't care */
@media (max-width: 700px) {
  .centered {
    max-width: 540px;
  }
}

/* Make it as small as it is allowed for the last one */
@media (max-width: 580px) {
  .centered {
    max-width: 100%;
    margin-left: 12px;
    margin-right: 12px;
  }
}

/* General class used for icon buttons */
.icon-button {
  /* Circle thing */
  margin: 2px;
  border-radius: 50%;
  /* Fixed size */
  display: inline-flex;
  font-size: 22px;
  width: 40px;
  height: 40px;
  /* Center icon inside circle */
  align-items: center;
  justify-content: center;
  /* Override the blue and purple color */
  color: var(--white);
  /* Transition to hover */
  transition: 0.3s;
}

/* The button that makes the sidebar appear again on small screens */
.sidebar-toggle {
  /* White icon on a blue background */
  color: white;
  background-color: var(--accent-color);
  /* Button thing */
  cursor: pointer;
  /* Fixed position on the top right */
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 9999;
}

/* When hovered */
.sidebar-toggle:hover {
  background-color: color-mix(in srgb, var(--accent-color) 90%, white 15%);
}

/* Hide the toggle button when the sidebar is visible */
@media (min-width: 1200px) {
  .sidebar-toggle {
    display: none;
  }
}

/* Bar below section title */
.section-title:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  bottom: 0;
}

/* Subtitle below a section title */
.section-subtitle {
  /* Title font */
  font-family: "Raleway", sans-serif;
  font-size: 24px;
  font-weight: 700;
}

/* Give the same style to all paragraphs */
p {
  line-height: 24px;
}

/* Give a background to certain sections */
.light-background {
  background-color: var(--light-background-color);
}

/* Container of a project in the projects section */
.project {
  /* Display text next to image */
  display: flex;
  /* Add spacing in between the projects */
  margin-top: 16px;
  /* Background with shadow for visual cohesion */
  background: var(--white);
  padding: 16px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  /* Very small round corners */
  border-radius: 4px;
}

/* The cover image for a project */
.project-image {
  /* Give a fixed with to all images */
  width: 512px;
  /* Very small round corners */
  border-radius: 4px;
}

/* Make the images smaller on smaller screens */
@media (max-width: 1200px) {
  .project-image {
    width: 384px;
  }
}

/* The text part of a project */
.project-right {
  /* Separate from the image */
  margin-left: 24px;
}

/* Title of a project in the projects section */
.project-right > h3 {
  margin-top: 0px;
  /* Title font */
  font-family: "Raleway", sans-serif;
  font-size: 32px;
  font-weight: 700;
}

/* Links below a project */
.project-links {
  padding-left: 16px;
  padding-top: 16px;
}

/* Show the project image above the description on small screens */
@media (max-width: 990px) {
  .project {
    display: block;
  }
  .project-image {
    width: 100%;
  }
  .project-right {
    margin-left: 0;
    margin-top: 16px;
  }
  .project-links {
    padding-top: 0;
    padding-bottom: 16px;
  }
}

/* Override the color of all links */
a {
  /* Don't show the blue underline */
  color: var(--accent-color);
  text-decoration: none;
  /* Animate the transition to hover */
  transition: 0.3s;
}

/* Hovered links */
a:hover {
  /* Make the color lighter */
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
}

/* Links inside project links section */
.icon-button-dark {
  /* Make the logo white inside a black circle */
  background: var(--dark-background-color);
  /* A little larger */
  width: 50px;
  height: 50px;
}

/* Hovered links inside project links section */
.icon-button-dark:hover {
  /* Fade the background to blue */
  background: var(--accent-color);
  /* Text must be white and not the same color as the background */
  color: var(--white);
}

/* Project images container */
.project-images {
  display: inline-block;
  position: relative;
}

/* Slideshow buttons */
.slideshow-button {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  -ms-transform: translate(-0%, -50%);
  /* Make them circles */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* White text on dark bacground */
  color: var(--white);
  background-color: var(--dark-background-color);
  /* Remove default button border */
  border: 0;
  /* Make buttons invisible by default */
  opacity: 0;
  /* Animate the transition to visible */
  transition: 0.3s;
}
.slideshow-button-left {
  left: 1%;
}
.slideshow-button-right {
  right: 1%;
}

/* Make the button lighter when hovered */
.slideshow-button:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
}

/* This class is added from the script */
.slideshow-button-visible {
  opacity: 1;
}

/* Flow container */
.flow-container {
  display: flex;
  justify-content: space-between;
}

/* Disable flex on small screens */
@media (max-width: 990px) {
  .stop-flow {
    display: block;
  }
}

/* Whole column in the resume section */
.resume-column {
  max-width: 50%;
  padding-right: 32px;
}

/* Make the resume full width when there is only one per line */
@media (max-width: 990px) {
  .resume-column {
    max-width: 100%;
  }
}

/* One thing in the resume section */
.resume-item {
  padding: 0 0 20px 20px;
  margin-top: -2px;
  border-left: 2px solid var(--accent-color);
  position: relative;
}

/* Title of a resume item */
.resume-item h4 {
  line-height: 18px;
  font-family: "Raleway", sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-color), transparent 20%);
  margin-bottom: 10px;
  margin-top: 0;
}

/* Dates under a resume item */
.resume-item h5 {
  font-family: "Raleway", sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 5px 15px;
  margin-bottom: 10px;
}

/* Circle before resume item */
.resume-item::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50px;
  left: -11px;
  top: 0;
  background: var(--white);
  border: 2px solid var(--accent-color);
}

/* Spacing between list items in the resume section */
.resume-item li {
  padding-bottom: 10px;
}

/* List that show things instead of dots */
.styled-list {
  /* Don't show dots */
  list-style: none;
  padding: 0;
}

/* List items inside styled lists */
.styled-list li {
  /* Add spacing between list items */
  margin-bottom: 20px;
}

/* Icons inside lists */
.styled-list svg {
  /* Color the icon */
  color: var(--accent-color);
  /* Add spacing after the icon */
  margin-right: 4px;
}

/* List item header */
.styled-list strong {
  /* Make it bolder */
  font-weight: 700;
  /* Add spacing after the header */
  margin-right: 4px;
}

/* Links in the contacts section */
.social-links {
  /* Center the buttons */
  text-align: center;
  flex-grow: 100;
}

/* Make the contacts flow container smaller on smaller screens */
@media (max-width: 990px) {
  .social-links {
    text-align: left;
    padding-left: 16px;
  }
}

/* Button to scroll to the top */
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background: var(--accent-color);
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/* This class is added from script */
.scroll-top-active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/* Global footer */
footer {
  font-size: 14px;
  text-align: center;
  padding: 40px 0;
  position: relative;
  border-top: 1px solid color-mix(in srgb, var(--text-color), transparent 90%);
}

/* Text in footer */
footer p {
  margin-top: 4px;
  margin-bottom: 0;
}