/* line 1, website/static/website/css/__common__/root.scss */
body {
  margin: 0 !important;
  padding: 0 !important; }

/* line 6, website/static/website/css/__common__/root.scss */
.pages_container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; }

/* line 13, website/static/website/css/__common__/root.scss */
.page, .page-25, .page-50, .page-75, .page-100 {
  position: relative;
  width: 100%;
  z-index: 99; }

/* line 19, website/static/website/css/__common__/root.scss */
.page-100 {
  height: 100vh; }

/* line 24, website/static/website/css/__common__/root.scss */
.page-75 {
  height: 75vh; }

/* line 29, website/static/website/css/__common__/root.scss */
.page-50 {
  height: 50vh; }

/* line 34, website/static/website/css/__common__/root.scss */
.page-25 {
  height: 25vh; }

/* line 44, website/static/website/css/__common__/root.scss */
code {
  color: #f5f5f5 !important; }
  /* line 47, website/static/website/css/__common__/root.scss */
  code .variable {
    color: #36a3f0; }
  /* line 51, website/static/website/css/__common__/root.scss */
  code .str {
    color: #FF4500;
    font-weight: 600; }
  /* line 56, website/static/website/css/__common__/root.scss */
  code .brackets {
    color: #ffc813; }
  /* line 60, website/static/website/css/__common__/root.scss */
  code .function {
    color: #dccd79; }
  /* line 64, website/static/website/css/__common__/root.scss */
  code .class {
    color: #4ebb7d; }

/* Desktop - 1024px */
/* Mobile - 1023px */
/* line 5, website/static/website/css/home/projects.scss */
.projects {
  background-color: #1d1d1d;
  --color: rgba(114, 114, 114, 0.3);
  background-image: linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%, transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%, transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%, transparent);
  background-size: 70px 70px; }
  /* line 13, website/static/website/css/home/projects.scss */
  .projects .transition {
    position: absolute;
    width: 100%;
    height: 10vh;
    background: #1d1d1d;
    background: linear-gradient(180deg, #1d1d1d 0%, rgba(255, 255, 255, 0) 90%); }
  /* line 22, website/static/website/css/home/projects.scss */
  .projects .holder {
    position: relative;
    width: 100%;
    height: 100vh;
    padding: 0vw; }
  /* line 29, website/static/website/css/home/projects.scss */
  .projects .carousel {
    position: relative;
    width: 100%;
    height: 100%; }
    /* line 34, website/static/website/css/home/projects.scss */
    .projects .carousel .carousel-inner {
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: max-content;
      justify-content: center;
      padding: 3vw; }
    /* line 48, website/static/website/css/home/projects.scss */
    .projects .carousel .carousel-item .content_holder {
      position: relative;
      left: 50%;
      transform: translate(-50%, 0%);
      width: max-content;
      background-color: #0a1d26;
      border-radius: 2.5vw;
      height: 61vh;
      width: 60vw;
      border: 0.2vw #f5f5f5 solid;
      filter: drop-shadow(0vh 0vh 1.5vw #000000);
      overflow: hidden; }
      /* line 62, website/static/website/css/home/projects.scss */
      .projects .carousel .carousel-item .content_holder .img_holder {
        position: absolute; }
        /* line 65, website/static/website/css/home/projects.scss */
        .projects .carousel .carousel-item .content_holder .img_holder .overlay {
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 2.5vw;
          background-color: #1d1d1d;
          opacity: 0.5;
          z-index: 2; }
        /* line 75, website/static/website/css/home/projects.scss */
        .projects .carousel .carousel-item .content_holder .img_holder img {
          position: absolute;
          left: 50%;
          transform: translate(-50%);
          max-height: 60vh;
          z-index: 1; }
      /* line 86, website/static/website/css/home/projects.scss */
      .projects .carousel .carousel-item .content_holder .text_holder a {
        transition: 0.1s all ease-in-out;
        color: #ffc857;
        text-transform: lowercase;
        text-decoration: none; }
        /* line 89, website/static/website/css/home/projects.scss */
        .projects .carousel .carousel-item .content_holder .text_holder a:hover {
          color: #e6b14c; }

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  /* line 109, website/static/website/css/home/projects.scss */
  .projects .title {
    position: absolute;
    top: 16%;
    left: 50%;
    transform: translate(-50%, -16%);
    color: #f5f5f5;
    font-size: 3vw;
    display: none; }
  /* line 119, website/static/website/css/home/projects.scss */
  .projects .content_holder {
    width: 60vw; }
    /* line 122, website/static/website/css/home/projects.scss */
    .projects .content_holder .img_holder {
      width: 100%;
      height: 100%; }
    /* line 127, website/static/website/css/home/projects.scss */
    .projects .content_holder .text_holder {
      position: relative;
      top: 100%;
      transform: translate(0%, -100%);
      background: #1d1d1d;
      background: linear-gradient(0deg, #0a1d26 25%, rgba(10, 29, 38, 0) 100%);
      padding: 1.2vw;
      padding-bottom: 0.2vw;
      border-radius: 0vw 0vh 2.5vw 2.5vw;
      color: #f5f5f5;
      z-index: 3; }
      /* line 139, website/static/website/css/home/projects.scss */
      .projects .content_holder .text_holder a {
        font-size: 3vw; }
      /* line 143, website/static/website/css/home/projects.scss */
      .projects .content_holder .text_holder p {
        font-size: 1.1vw; }
        /* line 146, website/static/website/css/home/projects.scss */
        .projects .content_holder .text_holder p:nth-child(2) {
          font-size: 0.9vw; } }

/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  /* line 160, website/static/website/css/home/projects.scss */
  .projects .title {
    position: absolute;
    top: 12.5%;
    left: 50%;
    transform: translate(-50%, -12.5%);
    color: #f5f5f5;
    font-size: 7vw;
    width: 100%;
    text-align: center; }
  /* line 173, website/static/website/css/home/projects.scss */
  .projects .carousel .carousel-inner {
    top: 60%;
    left: 50%;
    transform: translate(-50%, -60%); }
  /* line 181, website/static/website/css/home/projects.scss */
  .projects .carousel .carousel-item .content_holder {
    width: 70vw; }
    /* line 184, website/static/website/css/home/projects.scss */
    .projects .carousel .carousel-item .content_holder .img_holder {
      position: relative;
      width: 100%; }
      /* line 189, website/static/website/css/home/projects.scss */
      .projects .carousel .carousel-item .content_holder .img_holder .overlay {
        display: none; }
      /* line 193, website/static/website/css/home/projects.scss */
      .projects .carousel .carousel-item .content_holder .img_holder img {
        position: relative;
        border-radius: 2.5vw;
        width: 100%;
        max-height: unset; }
    /* line 202, website/static/website/css/home/projects.scss */
    .projects .carousel .carousel-item .content_holder .text_holder {
      position: relative;
      padding: 2vh;
      color: #f5f5f5;
      z-index: 3;
      width: 100%; }
      /* line 209, website/static/website/css/home/projects.scss */
      .projects .carousel .carousel-item .content_holder .text_holder a {
        font-size: calc(1vw + 1em);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        text-align: center; }
      /* line 218, website/static/website/css/home/projects.scss */
      .projects .carousel .carousel-item .content_holder .text_holder p {
        font-size: 3vw; } }