:root {
    /*---------- colors ------------ */
    --custom-blue-gradient:
        linear-gradient(90deg, rgba(2, 0, 36, 1) 0%,
            rgba(116, 116, 194, 1) 0%,
            rgba(0, 212, 255, 1) 100%);
    --clr-black: rgba(0, 0, 0, .5);


}

nav {
    /* border-style: solid;
    border-width: 2px; */
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5);
    padding-left: 1rem;
    padding-right: 1rem;
}


/* --------------------------------------------------------------------------------  */
/* This style block is used to modify the profile pic image  */
/* --------------------------------------------------------------------------------  */
#profile {
    width: 100%;
    height: 100%;
    max-width: 400px;
    max-height: 400px;
    border-radius: 70%;
}


/* --------------------------------------------------------------------------------  */
/* This style block is used to modify the div the profile images lives in 
that provides the background */
/* --------------------------------------------------------------------------------  */
#image {
    width: 400px;
    height: 400px;
    border-radius: 70%;
    background: rgb(2, 0, 36);
    background: var(--custom-blue-gradient);
    box-shadow: 0px 0px 30px 10px rgb(15, 53, 89) inset;
    margin: 0;
    padding: 0;
}



/* --------------------------------------------------------------------------------  */
/* This style block is used to modify the container that holds the profile pic  */
/* --------------------------------------------------------------------------------  */
#shadow {
    /* border-style: solid;
    border-width: 2px; */
    display: flex;
    justify-content: center;    
}

.fade-up-animation {
    animation: fade-up 0.4s;
}
 
@keyframes fade-up {
    0% {
        opacity: 0;
        transform: 
            translateY(30px)
            scale(0.9);
    }

    100% {
        opacity: 1;
        transform: 
            translateY(0px)
            scale(1);
    }
    
}


/* --------------------------------------------------------------------------------  */
/* This style block is used to modify the certification images sizes */
/* --------------------------------------------------------------------------------  */
.cert_pic {
    width: 150px;
    height: 150px;
    padding: 10px;
    animation: floating 2s ease-in-out infinite;
    /* Adjust animation duration and timing function as needed */
}


/* ----------------------------------------------------------------------------------------  */
/* This style block is used to modify the container that holds all the certification badges  */
/* ----------------------------------------------------------------------------------------  */
#credentials {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}


/* --------------------------------------------------------------------------------  */
/* This style block for the "comptia" class modifies all the comptia badges */
/* --------------------------------------------------------------------------------  */
.comptia {
    border-radius: 70%;
}


.prof {
    width: 100%;
    /* background-color: white; */
}

/* --------------------------------------------------------------------------------  */
/* These style block for the diagrams*/
/* --------------------------------------------------------------------------------  */
.lab_diagrams {
    max-width: 100%;
    height: auto;
}

.diagram_box {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ----------------------------------------------------------------  */
/* This class is used to add the gredient color to 
the background of the head articles  */
/* ----------------------------------------------------------------  */
.gradient_color {
    background: var(--custom-blue-gradient)
}



/* ----------------------------------------------------------------  */
/* These follow lines help to style the order list elements that make
 up the scrolling skills 
---------------------------------------------------------------- */
.tag-list {
    margin: 0;
    padding-inline: 0;
}

.tag-list li {
    padding: 1rem;
    background: var(--clr-black);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem -0.25rem var(--clr-black);
    list-style-type: none;
}


.tag-list-icon li {
    list-style-type: none;
}

.tag-list-icon img {
    max-height:80px;
    max-width: 80px;
}


/* ------------------------------------------------------------------------  */
/* The following lines create the horizontal scrolling effect for the skills 
------------------------------------------------------------------------ */
.scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask:
        linear-gradient(90deg,
            transparent,
            white 20%,
            white 80%,
            transparent);
    mask:
        linear-gradient(90deg,
            transparent,
            white 20%,
            white 80%,
            transparent);
}

.inner_scroll {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}


/* This selector sets the animation parameters if data-animted is set to "True" */
.scroller[data-animated="true"] .inner_scroll {
    width: max-content;
    flex-wrap: nowrap;
    animation: 
        scroll 
        var(--_animation-duration, 40s)
        var(--_animation-direction, forwards) 
        linear infinite;
}

/* ********************************************************************* */
/* This is experimental as it adjusts the direction of the animation */
/* .scroller[data-direction="right"] {
    --_animation-direction: reverse;
} */



/* ********************************************************************* */
/* This is experimental as it adjusts the speed of the animation */
/* .scroller[data-speed="fast"] {
    --_animation-duration: 10s;
} */


/* ------------------------------------------------------------------------- */
/* This sets the animation to have the elements within the scroller move 
-positive to go right and negative to go left */
/* ------------------------------------------------------------------------- */
@keyframes scroll {
    to{
        transform: translate(calc(-50% - 0.5rem));
    }
    
}



/* ----------------------------------------------------------------  */
/* This style block will modify the footer  */
/* ----------------------------------------------------------------  */
footer {
    width: 100%;
    background-color: black;
    list-style-type: none; 
}

.lists li {
    display: inline;
    padding: 0;
    margin: 0.3rem;
}

.lists ul {
    justify-content: right;
    padding: 0;
    margin: 0;
}

.foot {
    margin: 0;
    padding: 0px;
    display: flex;
}



/* --------------------------------------------------------------------------------  */
/* This keyframes block provides the animation for the certification bagdes  */
/* --------------------------------------------------------------------------------  */
@keyframes floating {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}


/* --------------------------------------------------------------------------------  */
/* The folloing media queries modies the size and aligments of the following:
- Profile pic 
- Badges and their alignment
- Header of the badges container  */
/* --------------------------------------------------------------------------------  */
@media (1100px >=width) {
    #image {
        width: 330px;
        height: 330px;
    }

}

/* This media query places the heading for the certification section in the center  */
@media (900px >= width) {
    #creds {
        text-align: center;
    }
}

/* This media query changes the size of the profile pic  */
@media (370px >= width) {
    #image {
        width: 250px;
        height: 250px;
    }
}

/* This media query allow the div in the footer that contains text to be aligned to the right  */
@media (768px <= width) {
    .findme {
        justify-content: right;   
    }
}

/* This media query put the footer at the center in mobile view  */
@media (765px >= width) {
    .foot {
        justify-content: center;
    }
}

/* This media query puts the profile pic's div above bio on mobile view  */
@media (765px >= width) {
    #shadow {
        order: -1;
    }
}