@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600&display=swap');

$tablet: 768px;
$tabletEnd: 1024px;
$desktop: 1230px;
$desktopHome: 1330px;

@import './../node_modules/bulma/sass/utilities/_all.sass';
@import './../node_modules/bulma/sass/grid/_all.sass';
@import './mixins.scss';
@import './reset.scss';
@import './containers.scss';
@import './animations.scss';

@import './components/header.scss';
@import './components/footer.scss';
@import './components/work-list.scss';
@import './components/mouse-pointer.scss';

@import './pages/home.scss';
@import './pages/work-detail.scss';
@import './pages/personal.scss';
@import './pages/biography.scss';
@import './pages/contact.scss';


html
body {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
}

.main-content {
  max-width: 1152px;
  width: 100%;
  margin: 0 auto;
}

.columns {
  margin: 0;
  flex-wrap: wrap;

  &:not(:last-child) {
    margin: 0;
  }
  
  &:last-child {
    margin-bottom: 0;
  }
}

.column {
  padding: 0 0.75rem;
}

body.menu-open {
  overflow: hidden;
}

.custom-404-header-link {
  @extend .header-logo;
  
  position: fixed;
  top: 40px;
  left: 40px;
  color: $gray-004;

  @include mobile {
    top: 24px;
    left: 24px;
  }
}

.custom-404 {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .custom-404-link {
    @extend .navigation;
    margin-top: 77px;

    a {
      display: flex;
      align-items: center;
      text-decoration: none;
      color: $black;
    }

    .icon {
      position: relative;
      top: -1px;
      width: 12px;
      height: 19px;
      margin-left: 8px;

      svg path {
        fill: $gray-002;
      }
    }

    @include mobile {
      margin-top: 40px;
    }
  }

  & > div {
    @extend .h2;
    color: $gray-004;

    span {
      display: block;

      @include mobile {
        line-height: 1.5;
      }
    }

    .bold {
      @extend .h1;

      color: $gray-002;
    }
  }
}