@font-face {
    font-family: 'The Neue';
    src: url("TheNeue-Black.woff") format('woff');
}

@font-face {
    font-family: 'Montserrat';
    src: url("Montserrat-Black.woff") format('woff');
}

:root {
    font-variant-ligatures: none;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    /*background-color: #222222;*/
    background-image: linear-gradient(90deg, #FF00F6, #00C6FF);
}

.fw-900 {
    font-weight: 800!important;
}

.fw-600 {
    font-weight: 600!important;
}

.display-3 {
    font-weight: 900;
}

body {
    margin: 0;
    /*color: #f1f1f1;*/
    color: #222222;
    /*background-color: #222222;*/
    /*background-color: #fffdfd;*/
    background-image: linear-gradient(90deg, #FF00F6, #00C6FF);
    background-size: 100%;
    font-family: "Montserrat", sans-serif;
}

nav {
    color: #f1f1f1;
}

.nav-gradient-bar {
    height: 5px;
}

#navbar-toggler {
    border: 0;
}

.bg-dark {
    background-color: #fffdfd !important;
}

.gradient-text {
    background-image: linear-gradient(90deg, #FF00F6, #00C6FF);
    background-size: 100%;
    color: white;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.svg-blue {
    fill: #666666;
    height: 1.5em;
    -webkit-transition: fill 0.2s;
}

.svg-blue:hover {
    fill: #00C6FF;
}

.blue {
    fill: #00C6FF;
    color: #00C6FF;
    -webkit-transition: color 0.2s, fill 0.2s;
}

.bluehover {
    fill: white;
    color: white;
    -webkit-transition: color 0.2s, fill 0.2s;
}

.bluehover:hover {
    fill: #00C6FF;
    color: #00C6FF;
    -webkit-transition: color 0.2s, fill 0.2s;
}

.greyhover {
    fill: white;
    color: white;
    -webkit-transition: color 0.2s, fill 0.2s;
}

.greyhover:hover {
    fill: #cacaca;
    color: #cacaca;
    -webkit-transition: color 0.2s, fill 0.2s;
}

p {
    /*font-size: large;*/
    /*font-family: 'Source Sans Pro', sans-serif;*/
    /*font-weight: bold;*/
}

h1, h2, h3, h4, h5 {
    font-family: "The Neue", sans-serif;
}

header .container {
    position: relative;
    z-index: 2;
}

@media (min-width: 577px) {
    .scroll-snap-container {
        scroll-padding-top: 45px;
        overflow-y: scroll;
        /*scroll-snap-type: y proximity;*/
        height: calc(100vh);;
    }

    .filter-container {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .header {
        padding: 45px 5px 0px 5px;
        width: 100%;
        background-image: linear-gradient(90deg, #00C6FF, #FF00F6);
    }

    .bottom-gradient-line {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        height: 5px;
        background-image: linear-gradient(90deg, #00C6FF, #FF00F6);
        z-index: 1000;
    }
}

@media (max-width: 577px) {
    .filter-container {
        position: sticky;
        top: 42px;
        z-index: 1000;
    }

    .header {
        padding: 45px 2px 0px 2px;
        width: 100%;
        background-image: linear-gradient(90deg, #00C6FF, #FF00F6);
    }

    .bottom-gradient-line {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background-image: linear-gradient(90deg, #00C6FF, #FF00F6);
        z-index: 1000;
    }
}

.scroll-snap {
    scroll-snap-align: start;
}

header {
    padding: 45px 5px 0px 5px;
    position: relative;
    /*height: 100vh;*/
    /*height: calc(100vh - 45px); */
    width: 100%;
    /*overflow: hidden;*/
    /*object-fit: cover;*/
    /*top: 45px;*/
    background-image: linear-gradient(90deg, #00C6FF, #FF00F6);
}

.tag {
    display: inline-block;
    color: #00C6FF;
    cursor: pointer;
    -webkit-transition: color 0.2s, fill 0.2s;
}

.tag:hover {
    color: #00C6FF;
}

footer {
    color: #666666;
    background-color: #222222;
}

footer a {
    color: #666666;
}

a {
    color: #00C6FF;
    -webkit-transition: color 0.2s, fill 0.2s;
}

a:active {
    color: #FF00F6;
    /*color: #00C6FF;*/
}

a:hover {
    color: #FF00F6;
    /*fill: #00C6FF;*/
}

a, u {
    text-decoration: none;
}

.hr-gradient, .nav-gradient-bar {
    background-image: linear-gradient(90deg, #00C6FF, #FF00F6);
}

.hr-gradient {
    height: 1px;
}

nav .nav-item {
    background-color: #fffdfd;
    margin-top: 0;
    margin-bottom: 0;
    -webkit-transition: background-color 0.2s;
    color: #222222;
}

nav .nav-item:hover {
    background-color: rgba(27, 27, 27, 0);
    color: #fffdfd!important;
}

.underline-highlight {
    cursor: pointer;
    height: 2px;
    width: 100%;
    background-image: linear-gradient(90deg, #00C6FF, #FF00F6);
    -webkit-transition: width 0.2s ease;
}

.tab {
    width: 100%;
    position: relative;
    min-height: calc(100vh - 45px);
    -webkit-transition: width 0.5s ease-in-out, height 0.5s ease;
}

.zero-width {
    width: 0;
}

.transparent-background {
    background-color: transparent!important;
    color: #fffdfd!important;
}

.brand-centered {
    transform: translateX(-50%);
    left: 50%;
    position: absolute;
}

.navbar-brand {
    max-height: 40px;
    color: #222222;
}

.navbar-nav .nav-link {
    cursor: pointer;
    font-family: "The Neue";
    scale: 0.9;
    text-transform: lowercase;
    /*color: #f1f1f1;*/
    color: unset;
}

nav .navbar-brand {
    padding: 0;
    /*font-size: 1.75rem;*/
}

.navbar {
    padding: 0;
}

.technologies {
    font-size: 1rem;
    color: #00C6FF;
}

.navbar-container {
    padding: 0;
    background-image: linear-gradient(90deg, #00C6FF, #FF00F6);
    background-size: 100vw;
    background-position: center;
}

.navbar-title {
    font-size: 25px;
    font-weight: bold;
    text-transform: lowercase;
    font-family: 'The Neue';
}

.main-header {
    background-image: linear-gradient(90deg, #00C6FF, #FF00F6);
    overflow: hidden;
}

.header-content {
    color: white;
    text-align: center;
    overflow: scroll;
    margin-top: -10%;
}

.about-tab {
    display: inline-block;
    justify-content: center;
    align-items: center;
    min-width: 100vw;
    height: 100vw;
}

.about-content {
    white-space: nowrap;
}

.index-title, .contact-info {
    margin-bottom: 2rem;
}

.title-hi, .title-dot {
    display: inline;
    font-size: 4rem;
}

.name-container {
    display: inline-block;
}

.title-name {
    margin: 0;
    font-size: 4rem;
    line-height: 0.8;
}

.name-underline {
    background-image: linear-gradient(90deg, #00C6FF, #FF00F6);
    height: 2px;
}

.intro-text {
    font-weight: 900;
}

.contact-info h6 {
    font-weight: 900;
}

.list-container {
    /*overflow-y: scroll;*/
}

.filter-button {
    cursor: pointer;
    margin-top: .5rem;
}

.cutout-text {
    color: transparent;
    background: linear-gradient(90deg, #00C6FF, #FF00F6);
    -webkit-background-clip: text;
    background-clip: text;
}

.grey {
    color: #696969;
}

.text-justify {
    text-align: justify;
    text-justify: inter-word;
}

.sentinel {
    position: absolute;
    top: 50vh;
    left: 0;
    width: 100%;
    height: 1px;
    pointer-events: none;
}