:root {
    --font: Menlo;
    --chartreuse: #ff5e00;
    /* --red: #ff3c00; */
    --red: #ff5e00;
    --dk-red: #a83e00;
    --lt-grey: rgb(209, 209, 209);
    --black: rgb(46, 46, 46);
    --dk-grey: rgb(82, 82, 82);
}

body {
    overflow: hidden;
}

.devicon {
    font-size: 4rem;
}

.project-name {
    padding: 1rem;
    background-color: pink;
    text-align: center;
    height: 100%;
}

.hover-bg {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: hidden;
}

.intro {
    background: url("/img/qr2.svg");
    /* background: url("/assets/1000_F_391793360_oQS7i4Jzoxzbm5f4BRXnM0SvdGiKTLV8.jpeg"); */
    /* background: url("/https://as1.ftcdn.net/v2/jpg/03/23/09/38/1000_F_323093848_tC9lLtx3ssVYmCRJLFXrt8eIZfraMuK5.jpg"); */
    background-size: 200px; 
    color:  rgb(255, 255, 255);
    border: 20px solid rgb(255, 255, 255);
    
}

.intro-inner {
    background: url("/assets/barcode.jpg");
    /* background: url("/assets/1280px-Checkerboard_Pattern_8x6.svg.png"); */
    background-size: 200px;
    margin: 0 20%;
    /* border: 4px solid white; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* opacity: 80%; */
    /* border-radius: 9999px; */
}

.intro-inner-inner {
    /* background-color: blueviolet; */
    background-color: rgba(129, 129, 129, 0.39);

    padding-top: 4rem;
    width: 100%;
    height: 100%;
    /* backdrop-filter: blur(1px); */
}


.intro-name {
    font-family: Menlo;
}

.header {
    background-color: black;
}

.header-btn {
    background: var(--red);
    background-size: contain;
    color: rgb(255, 255, 255);
    font-family: Menlo;
    font-weight: 600;
    margin: 2rem 2rem 2rem 0;
    border: 2px solid white;
}

.header-btn:hover {
    background-color: var(--dk-red);
    border: 2px solid white;
}

.name {
    /* padding: 0 2rem; */
    color: var(--red);
    letter-spacing: .01em;
    width: auto;
}
.fname, .lname {
    background-color: rgba(238, 238, 238, 0.877);
}
.fname {
    padding-left: 2rem;
}
.lname {
    padding-right: 2rem;
}
@media all and (max-width: 548px) {
    .fname {
        padding-right: 2rem;
    }
    .lname {
        padding-left: 2rem;
    }
    
}


.title {
    background-color: rgba(238, 238, 238, 0.877);
    /* text-decoration: underline; */
    padding: .5rem 2rem;
    color: var(--red);
    width: 100%;
}

.header-con {
    /* background-color: rgba(255, 255, 255, 0.219); */
    width: 100%;
}

.img {
    width: 100px;
}

.navbar-custom {
    background-color: rgb(0, 0, 0);
    /* background: url(/assets/barcode.jpg); */
    /* background-size: 20%; */
}


.page-scroll {
    font-family: Menlo;
}


.nav {
    font-weight: 600;
}

.me {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

#about {
    background: url("/assets/optical (2).svg") fixed;
    /* background: url("/assets/AdobeStock_342511744_Preview.svg"); */
    
    background-size: 25%;
    /* background-size: cover; */
    background-color: black;
}

.about-con {
    background: rgba(82, 82, 82, 0.856);
    font-family: Menlo;
    color: white;
	backdrop-filter: blur(1.5px);
    padding: 5rem;
    /* color: black; */
    /* border-radius: 1.5rem; */
}

.about-me {
    color: rgb(255, 255, 255);
    font-weight: 600;
}

#skills {
    /* background: url("/assets/1280px-Checkerboard_Pattern_8x6.svg.png") fixed; */
    background-color: rgb(59, 59, 59);
	/* background-size: 80px; */
    font-family: Menlo;
    color: var(--dk-red);
}

#skills-hr {
    background-color: var(--red);
    color: var(--red);
}

.portfolio-items {
    /* background-color: green; */
    margin: 1.5rem 1rem;
    /* padding-bottom: 5rem; */
    border-bottom: 2px solid rgb(88, 88, 88);
    /* background-color: green; */
}

#contact {
    background-color: var(--red);
}

#footer {
    /* background: url("/assets/barcode.jpg");
    background-size: 100px; */
    color: black;
}

.contact-title {
    color: white
}

.port-img {
    width: 100%;
}

.porfolio-title {
    color: white;
}

.project-text {
    /* background-color: green; */
    padding: 0 5rem;
}

/* .first-port {
    border-top: 2px solid rgb(155, 155, 155);
} */

.categories {
    border-bottom: 2px solid rgb(156, 156, 156);
}

.hover-bg {
    /* padding-bottom: 2rem; */
}

.app, .web {
    padding-bottom: 3rem;
}

.porfolio-con {
    background-color: rgba(29, 29, 29, 0.966);
    padding: 5rem;
	backdrop-filter: blur(5px);
    
}

/* #porfolio {
    background: url("/assets/bliur.jpeg");
} */

.port-con-con {
    width: 100%;
    height: 100%;
    backdrop-filter: blur(4px);
    padding: 100px 0;
    /* background-color: rgba(128, 128, 128, 0.507); */
}
.port-img {
    border: 2px solid rgb(172, 172, 172);
    /* border-radius: 1rem; */
}

.intro-screen {
    background-color: rgba(114, 114, 114, 0.164);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* backdrop-filter: blur(1px); */
}

.skills-con {
    /* background-color: rgba(37, 37, 37, 0.952);
    padding: 20px 0; */
    /* backdrop-filter: blur(10px); */
}
.skills-con-con {
    padding: 100px 0;
	backdrop-filter: blur(2.5px);
}

p {
    color: var(--lt-grey);
}

h3 {
    color: white;
}

.cyms {
    color: white;
}

.port-title-con {
    border-bottom: 2px solid rgb(88, 88, 88);
}

.project-link {
    color: white;
    /* padding: .5rem; */
    /* min-width: 500px; */
}

.project-link:focus {
    color: white;
}
.project-link:hover {
    color: var(--red);
}

.cyms-item .portfolio-item {
    padding-bottom: 3rem;
}

.pinterplay-row {
    margin-top: 1rem;
}