@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

$pink50: #fce4ec;
$purple200: #ce93d8;

.App {
  text-align: center;
  header {
    background-color: $purple200;
    display: flex;
    align-items: center;
    border-bottom: 1px solid black;
    font-family: 'Open Sans', sans-serif;
    a {
      transition: color 150ms ease;
      color: black;
      font-weight: 900;
      font-size: 2rem;
      padding-left: 1rem;
      border-right: 1px solid black;
      padding-right: 1rem;
      text-decoration: none;
      &:visited {
        color: inherit;
      }
      &:hover {
        color: purple;
        transition: color 150ms ease;
      }
    }
    h2 {
      font-weight: 400;
      position: relative;
      padding-left: 1rem;
    }
  }
}

.technologies-page {
  .tech-scrollbar {
    height: 5rem;
    min-width: 60rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: 0;
    overflow-x: hidden;
    animation: 30s linear tech-scroll infinite;
    .tech-bar-item {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      left: 0;
      top: 0.3rem;
      font-size: 1.2rem;
      font-weight: 700;
      margin: 0 0.3rem;
      padding: 1rem;
      background-color: $purple200;
      height: 5rem;
      width: 20rem;
    }

    @keyframes hide-until-start {
      from {
        opacity: 0;
      }
      99% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    
    @keyframes tech-scroll {
      from {
        left: -60rem;
      }
      100% {
        left: 60rem;
      }
    }
    
    @keyframes from-right {
      from {
        left: 60rem;
      }
      100% {
        left: -60rem;
      }
    }
  }
  
  .backup-bar {
    bottom: 5rem;
    animation: 30s linear 15s tech-scroll infinite, 15s hide-until-start;
  }
  
  .from-right {
    animation: 30s linear from-right infinite;
  }
  .backup-from-right {
    bottom: 5rem;
    animation: 30s linear 15s from-right infinite, 15s hide-until-start;
  }
  
  .variant-2 {
    background-color: #62286d !important;
    color: white !important;
  }
}

.about-me-page {
  a {
    color: white;
    border-radius: 12px;
    transition: color 0.3s linear;
    text-decoration: none;
    &:hover {
      color: $purple200;
      transition: color 0.3s linear;
    }
  }
  .card-title {
    text-transform: uppercase;
  }
  
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @mixin staggered-entry($interval) {
    animation: 0.5s fade-in #{$interval}s linear forwards;
  }
  
  .fade {
    opacity: 0;
    transition: 0.5s transform ease;
    &:hover {
      transform: scale(115%) translateY(-1.5rem);
      transition: 0.5s transform ease;
    }

    &.one {
      @include staggered-entry(0);
    }
    &.two {
      @include staggered-entry(0.6);
    }
    &.three {
      @include staggered-entry(1.2);
    }
  }
}

.projects-page {
  .MuiPaper-root {
    padding: 1rem;
    width: 75%;
    height: 15rem;
    margin-top: 3rem;
  }
}