html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
}
/* Backgrounds */
.bg-black {
    background-color: #000000;
}
.bg-black-subtle {
    background-color: #121212;
}
.bg-blue-gradient {
    background: linear-gradient(90deg, #1d243e 0%, #182848 100%);
}
/* Blend modes */
.mix-blend-difference {
    mix-blend-mode: difference;
}
/* Images */
.img-smaller {
    width: 70%;
    height: auto;
}
.img-medium {
    width: 80%;
    height: auto;
}
.img-circle {
    border-radius: 50%;
}
/* Font sizes */
.fs-smaller {
    font-size: 0.75rem;
}
/* media query from small devies */
@media (max-width: 576px) {
    .fs-smaller {
        font-size: 1rem;
    }
    #about > .lead {
        font-size: 1.1rem;
    }
    #web-dev > .lead {
        font-size: 1rem;
    }
}
.vh-100 {
    height: 100svh !important;
}


/* 100 view height
#intro > .row,
#home > .row > :nth-child(1), #home > .row > :nth-child(2),
#web > .row ,
#photography > .row > :nth-child(1), #photography > .row > :nth-child(2),
#graphics-design > .row > :nth-child(1), #graphics-design > .row > :nth-child(2),
#video > .row > :nth-child(1), #video > .row > :nth-child(2),
#music > .row {
    height: 100svh;
} */
/* delay the animation */
#intro {
    transition: all 1s ease-in-out;
    --animate-delay:2.5s;
}
#intro, #home, #web, #photography, #graphics-design, #video, #music {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}
.error-code {
    text-decoration: underline;
    text-decoration-color: red;
    text-decoration-style: dotted;
}
#graphics-design > .row > :nth-child(1) {
    background-image: url(../img/graphics_design-min.jpg);
    background-size: cover;
    background-blend-mode: multiply;
}
#graphics-design-gallery > div > img:hover, #graphics-design-gallery > div > img:focus {
    transform: scale(1.4);
    transition: all 1s ease-in-out;
}
#video > .row > :nth-child(2) {
    background-image: linear-gradient(
        -25deg,
        transparent 75%,
        #121212 75%
      ),
      linear-gradient(45deg, transparent 75%, #121212 75%),
      linear-gradient(-135deg, transparent 75%, #121212 75%),
      linear-gradient(135deg, transparent 75%, #121212 75%);
    background-size: 10rem 10rem;
    background-position: 2rem 0, 2rem 0, 0 0, 0 0;
}

/* #intro {
    background-color: #e5e5f7;
    opacity: 0.8;
    background: repeating-linear-gradient( 45deg, #444cf7, #444cf7 5px, #e5e5f7 5px, #e5e5f7 25px );
    z-index: 1;
    animation: Gradient 10s ease infinite;
    
} */
#music {
    background-size: 200% 200%;
    background-image: linear-gradient(45deg, #121212 50%, #2a2a2a 100%, #121212 100%);
    animation: Gradient 10s ease infinite;
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;

    }
}