@charset "utf-8";

@mixin square-shadow {
  -moz-box-shadow: 0px 0px 10px -4px rgba(0,0,0,1);
  -webkit-box-shadow: 0px 0px 10px -4px rgba(0,0,0,1);
  box-shadow: 0px 0px 10px -4px rgba(0,0,0,1);
}

a.navbar-item,
.navbar-link {
  &.is-active,
  &:hover,
  &:focus,
  &:focus-within {
    background-color: transparent;
  }
}

hr {
  background-color: $grey-lightest;
}

main {
  min-height: 100vh;

  .contacts,
  .projects,
  .resume,
  .error {
    background-color: $primary-invert;
    color: $primary;
    margin: 0;
    min-height: 100vh;
    padding: 8rem 0;
  }

  .container.page {
    @include square-shadow;
    background-color: $white;
    margin-top: -8rem;
    padding: 4rem;

    &.page-resume {
      padding: 0;

      .columns {
        margin: 0;
        padding: 0;

        .column {
          padding: 4rem;

          &.resume-profile {
            background-color: $primary;
            color: $primary-invert;

            h1 {
              margin-top: 1rem;
            }
          }

          &.resume-info {
            margin-left: 5rem;
            overflow-wrap: break-word;

            .info {
              position: relative;
              top: -1.5rem;
            }

            .years {
              border-top: 4px solid $primary-invert;
              left: -6rem;
              position: relative;
              text-align: right;
              text-overflow: clip;
              width: 5rem;
            }
          }
        }
      }
    }
  }

  .page-head {
    background-color: $primary;
    color: $primary-invert;
    margin: 0;
    padding: 8rem;
  }

  .projects {
    .columns {
      padding: 1rem;
    }
  }

  .container .columns {
    padding-bottom: 5rem;
  }

  & > .section:nth-child(even) {
    background-color: $white;
  }

  & > .section:nth-child(odd) {
    background-color: $grey-lighter;
  }
}

ul:not(.task-list) {
  list-style: square inside;
}

.button {
  &.is-link {
    background-color: $primary-invert;
    color: $primary;
  }

  &.is-primary:hover,
  &.is-primary.is-hovered,
  &.is-primary:active,
  &.is-primary.is-active,
  &.is-primary:focus,
  &.is-primary.is-focused, {
    background-color: $primary-invert;
    color: $primary;
  }
}

.button,
.file-cta,
.file-name,
.input,
.pagination-ellipsis,
.pagination-link,
.pagination-next,
.pagination-previous,
.select select,
.textarea{
  border-radius: 0;
}

.buttons {
  padding: 1rem 0;
}

.categories {
  span {
    background-color: $grey-lightest;
    margin: 2px 0;
    padding: 4px;
  }
}

.centered {
  margin: auto;
}

.column.contact {
  @include square-shadow;
  background-color: $primary;
  color: $primary-invert;
  height: 100%;
  margin-right: 3rem;
  padding: 1rem;

  .links {
    line-height: 5rem;
    padding: 1rem;

    .link {
      margin: 1rem;
    }
  }
}

.grid {
  .card {
    height: max-content;
    margin-bottom: 1.5rem;
  }

  .column {
    .card:last-child {
      margin-bottom: 0;
    }
  }
}

.has-text-pink {
  color: $pink;
}

.hero {
  &-background {
    -webkit-filter: opacity(20%);
    filter: opacity(20%);
    height: 100%;
    left: 0;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0;
    transition: ease 1s;
    width: 100%;
  }

  &.has-background {
    overflow: hidden;
    position: relative;
  }

  &:hover {
    .hero-background {
      height: 120%;
      left: -10%;
      max-width: 120%;
      top: -10%;
      width: 120%;
    }
  }
}

.image.project {
  background-color: $primary;
}

.navbar {
  @include square-shadow;

  &-brand {
    padding-left: 3rem;
    position: relative;
  }

  &-burger {
    position: absolute;
    right: 3rem;
    top: calc(50% - 1.625rem);
  }

  &-dropdown {
    background-color: $info;
    border-radius: 0;
    border: none;

    .navbar-item {
      a {
        &:hover,
        &:focus,
        &:focus-within {
          background-color: transparent;
        }
      }
    }
  }

  &-menu {
    background-color: $primary;
    padding-right: 3rem;
  }
}

.navbar-item {
  img {
    max-height: 3rem;
  }
}

.post-body {
  margin: 1.5rem 0;

  .task-list-item-checkbox {
    margin: 0.5rem;
  }
}

.progress {
  background-color: $progress-bar-background-color; // Bulma bug fix (not released yeet)
  border: 4px solid $primary-invert;
}

.project {
  @include square-shadow;

  .hover {
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.75);
    bottom: 0;
    display: none;
    font-size: 2rem;
    font-weight: bold;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;

    span {
      margin: 1rem;
    }
  }

  &:hover {
    .hover {
      display: flex;
    }
  }
}

.resume {
  .skill {
    margin: 1rem;
    margin-left: 3rem;

    .icon {
      position: relative;
      top: 1.6rem;
      left: -2.5rem;
    }
  }
}

.section.section-card {
  background-color: inherit;
  margin-top: 10rem;

  h1 {
    font-weight: bold;
  }
}

.navbar-link:not(.is-arrowless)::after,
.select:not(.is-multiple):not(.is-loading)::after {
  border-radius: 0;
}

.paper:not(:last-child) {
  margin-bottom: 1rem;
}

.timeline {
  margin: 0 auto;
  max-width: 1000px;
  position: relative;

  .left {
    left: 0;

    &::before {
      right: 33px;
    }
  }

  .right {
    left: 50%;

    &::after {
      left: -10px;
    }

    &::before {
      left: 33px;
    }
  }

  &-card {
    padding: 10px 40px;
    position: relative;
    width: 50%;

    .timeline-content {
      background-color: $primary;
      color: $primary-invert;
      padding: 20px 30px;
      position: relative;
      transition: ease 0.5s;
    }

    &::after {
      background-color: $primary-invert;
      border: 4px solid $primary;
      content: "";
      height: 20px;
      position: absolute;
      right: -10px;
      top: 22px;
      transform: rotate(45deg);
      transition: ease 0.5s;
      width: 20px;
      z-index: 1;
    }

    &:hover {
      font-size: larger;

      &::after {
        transform: rotate(90deg);
      }
    }
  }

  .left::before,
  .right::before {
    background-color: $primary;
    content: "";
    height: 15px;
    position: absolute;
    top: 25px;
    transform: rotate(45deg);
    width: 15px;
    z-index: 1;
  }

  &::after {
    background-color: $primary;
    bottom: 0;
    content: "";
    left: 50%;
    margin-left: -3px;
    position: absolute;
    top: 0;
    width: 6px;
  }
}

@media screen and (min-width: 1px) {
  .navbar.is-primary .navbar-start .navbar-link,
  .navbar.is-primary .navbar-end .navbar-link {
    &::after {
      border-color: $primary-invert transparent transparent transparent;
      border-style: solid;
      border-width: 10px 5px 0 5px;
      height: 0;
      margin-top: -0.275em;
      transform: none;
      width: 0;
    }
  }
}

@media screen and (max-width: 500px) {
  .timeline {
    .right {
      left: 0%;
    }

    &-card {
      padding: 5px 0 5px 70px;
      width: 100%;

      &::before {
        left: 60px;
      }
    }

    .left::after,
    .right::after {
      left: 26px;
    }

    .left::before,
    .right::before {
      left: 62px;
    }

    &::after {
      left: 36px;
    }
  }
}

@media screen and (min-width: 1000px) {
  .column.contact {
    margin-left: -8rem;
  }

  .contacts .section.section-card {
    margin-left: 10rem;
    margin-right: 5rem;
  }
}