@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 {
  figure {
    .overlay {
      background-color: $primary;
      bottom: 1rem;
      color: $white;
      padding: 0 1rem 0 0.4rem;
      position: absolute;
      right: -0.5rem;
      z-index: 1000;
    }
  }

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

}