body {
    --bs-font-sans-serif: "Raleway", sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    color: var(--bs-body-color);
    --bs-body-color: #0e1d2a;
}

.grain {
    z-index: -10;
    opacity: .03;
    background-image: url(../img/grain.gif);
    background-position: 0 0;
    background-size: auto;
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    inset: 0%;
}

.menu a {
    color: #0e1d2a;
    font-weight: 500;
    font-size: 0.875rem;
}

.menu a.hover-gray:hover {
    color: var(--hover-gray)
}

.menu a.hover-blue.active,
.menu a.hover-blue:hover {
    color: var(--hover-blue)
}

.menu a.hover-red.active,
.menu a.hover-red:hover {
    color: var(--hover-red)
}

.menu a.hover-yellow.active,
.menu a.hover-yellow:hover {
    color: var(--hover-yellow)
}

.menu a.hover-green.active,
.menu a.hover-green:hover {
    color: var(--hover-green)
}

.reserved {
    font-size: 0.688rem;
}

.skills .progress-bar {
    background-image: linear-gradient(90deg, #a3ceff, #64adff);
}

.works .img-holder {
    margin-bottom: -3rem;
}

.works .img-holder img.screenshot {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    box-shadow: -25px 42px 135px -15px rgba(44, 59, 72, 0.1);
    -webkit-box-shadow: -25px 42px 135px -15px rgba(44, 59, 72, 0.1);
    -moz-box-shadow: -25px 42px 135px -15px rgba(44, 59, 72, 0.1);
}

.works .img-holder img.screenshot.shadow-right {
    box-shadow: 49px 42px 135px -15px rgba(44, 59, 72, 0.1);
    -webkit-box-shadow: 49px 42px 135px -15px rgba(44, 59, 72, 0.1);
    -moz-box-shadow: 49px 42px 135px -15px rgba(44, 59, 72, 0.1);
}

@media (max-width: 767.98px) {

    main > .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .min-vh-100.min-sm {
        min-height: auto !important;
    }

    .min-vh-100.home {
        min-height: calc(100vh - 65px) !important;
    }
    
    .home .header {
        margin-top: -3rem !important;
    }

    .works .img-holder {
        margin-bottom: -1.5rem;
    }
}


:root {
    --hover-gray: #333333;
    --hover-blue: #46ade1;
    --hover-red: #ee3069;
    --hover-yellow: #f6c300;
    --hover-green: #34b666;
}

/*Animate Arrow Down mobile*/
img.arrow-down {
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

/*Animate Font Mask*/
.mask-text {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    color: #ffffff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    -ms-background-clip: text;
    -ms-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-animation: animation 60s infinite ease-in-out;
    -moz-animation: animation 60s infinite ease-in-out;
    -ms-animation: animation 60s infinite ease-in-out;
    animation: animation 60s infinite ease-in-out;
}

.mask-text:before,
.mask-text:after {
    position: absolute;
    content: '';
}

.mask-text:before {
    z-index: -2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*background-image: inherit;*/
    background-image: none;
    background-size: cover;
    -webkit-animation: animation 10s infinite ease-in;
    -moz-animation: animation 10s infinite ease-in;
    -ms-animation: animation 10s infinite ease-in;
    animation: animation 10s infinite ease-in;
}

.mask-text:after {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*background-color: #ffffff;*/
}

.mask-text_home {
    background-image: url(../img/mask-home.svg);
}

.mask-text_about {
    background-image: url(../img/mask-about.svg);
}

.mask-text_expertise {
    background-image: url(../img/mask-expertise.svg);
}

.mask-text_work {
    background-image: url(../img/mask-work.svg);
}

.mask-text_contact {
    background-image: url(../img/mask-contact.svg);
}

@-webkit-keyframes animation {
    0% {
        background-position: top right;
        background-size: 100%;
    }

    25% {
        background-position: bottom left;
        background-size: 130%;
    }

    50% {
        background-position: top left;
        background-size: 100%;
    }

    75% {
        background-position: bottom right;
        background-size: 130%;
    }

    100% {
        background-position: top right;
        background-size: 100%;
    }
}

@-moz-keyframes animation {
    0% {
        background-position: top right;
        background-size: 100%;
    }

    25% {
        background-position: bottom left;
        background-size: 130%;
    }

    50% {
        background-position: top left;
        background-size: 100%;
    }

    75% {
        background-position: bottom right;
        background-size: 130%;
    }

    100% {
        background-position: top right;
        background-size: 100%;
    }
}

@-ms-keyframes animation {
    0% {
        background-position: top right;
        background-size: 100%;
    }

    25% {
        background-position: bottom left;
        background-size: 130%;
    }

    50% {
        background-position: top left;
        background-size: 100%;
    }

    75% {
        background-position: bottom right;
        background-size: 130%;
    }

    100% {
        background-position: top right;
        background-size: 100%;
    }
}

@keyframes animation {
    0% {
        background-position: top right;
        background-size: 100%;
    }

    25% {
        background-position: bottom left;
        background-size: 130%;
    }

    50% {
        background-position: top left;
        background-size: 100%;
    }

    75% {
        background-position: bottom right;
        background-size: 130%;
    }

    100% {
        background-position: top right;
        background-size: 100%;
    }
}