@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap");
body {
  scroll-behavior: smooth;
}

#home-name {
  font-family: "Comic Neue", cursive;
}

.role-shadow {
  text-shadow: 1px 1px 5px;
  -webkit-text-stroke: 0.3px white;
}

#my-pro-image img {
  filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 white);
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}




.bg-html {

    background-color: #feaa85;
}

.bg-css {

    background-color: #64dfdf;
}

.bg-javascript {

    background-color: #fdf5c4;
}

.bg-java {
    background-color: #cde8fa;
}

.bg-bootstrap {
    background-color: #caa3fd;
}

.bg-reactjs {
    background-color: #d8f7ff;
}

.bg-php {
    background-color: #b4b8eb;
}

.bg-sql {
    background-color: #ffe6ba;
}

.bg-excel {
    background-color: #52cc89;
}

.bg-psd {
    background-color: #31a8ff;
}

.bg-ai {
    background-color: #ff9a00;
}

.bg-pr {
    background-color: #8c8cff;
}

.bg-canva {
    background-color: #89dffc;
}

.bg-figma {
    background-color: #a259ff;
}

.bg-tableau {
    background-color: #ffd6db;
}

.bg-arduino {
    background-color: #00eefa;
}

.bg-word {
    background-color: #6fa7f9;
}


.html {
    background-color: #e44d26;
}

.css {
    background-color: #1673b6;
}

.javascript {
    background-color: #d6be00;
}

.bootstrap {
    background-color: #7911f7;
}

.reactjs {
    background-color: #02ccff;
}

.java {
    background-color: #5382a1;
}

.php {
    background-color: #787cb4
}

.sql {
    background-color: #00608c;
}

.excel {
    background-color: #097c3d;
}

.psd {
    background-color: #03365b;
}

.ai {
    background-color: #330000;
}

.pr {
    background-color: #000049;
}

.canva {
    background-color: #1aa3d1;
}

.figma {
    background-color: #1e1e1e;
}

.tableau {
    background-color: #c72236;
}

.arduino {
    background-color: #12999f;
}

.word {
    background-color: #4068a4;
}
.html-progress {
    background-color: #feaa85;
    color: #8b3e22; /* dark coral */
}

.css-progress {
    background-color: #64dfdf;
    color: #026666; /* deep teal */
}

.javascript-progress {
    background-color: #ffde00;
    color: #665c00; /* mustard brown */
}

.bootstrap-progress {
    background-color: #caa3fd;
    color: #5b2c82; /* deep purple */
}

.reactjs-progress {
    background-color: #02657e;
    color: #a0f0ff; /* light cyan */
}

.java-progress {
    background-color: #66b4e7;
    color: #003c64; /* navy blue */
}

.php-progress {
    background-color: #b4b8eb;
    color: #3a3d82; /* indigo */
}

.sql-progress {
    background-color: #f7ae30;
    color: #5e3c00; /* brownish gold */
}

.excel-progress {
    background-color: #52cc89;
    color: #004d2d; /* forest green */
}

.psd-progress {
    background-color: #31a8ff;
    color: #003f63; /* navy blue */
}

.ai-progress {
    background-color: #ff9a00;
    color: #5e3500; /* burnt orange */
}

.pr-progress {
    background-color: #8c8cff;
    color: #282890; /* royal blue */
}

.canva-progress {
    background-color: #89dffc;
    color: #007891; /* cool blue */
}

.figma-progress {
    background-color: #a259ff;
    color: #3f007a; /* deep violet */
}

.tableau-progress {
    background-color: #ff99a5;
    color: #801e2d; /* wine red */
}

.arduino-progress {
    background-color: #3ef4fd;
    color: #004f52; /* deep aqua */
}

.word-progress {
    background-color: #6fa7f9;
    color: #002c71; /* deep blue */
}



.po {
    transition: all .3s ease-in-out;
    bottom: -58px;
}

.skill:hover .po {
    bottom: 0px;
    transition: all .3s ease-in-out;
}


.skill:hover .skills-images {
    opacity: .4;
    transition: all 0.2s ease;
}

.skills-images{
  transition: all 0.2s ease;
}





.project-img {
    overflow: scroll;
    border-bottom: 1px solid rgb(143, 142, 142);
    white-space: normal;

}



.project-logo {
    margin-right: 10px;

}

.project-logo img {
    width: 15px;

}

.project-overlay {
    bottom: 0;
    transform: translateY(100%);
    transition: all .5s ease-in-out;
    padding-bottom: 20px;

}

.project-card:hover .project-overlay {
    transform: translateY(0%);
}