body {
    font-family: 'Roboto Mono', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-image: url('../img/background.png');
    background-size: cover; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
	margin-bottom: 80px;
}
header {
    background-color: #333;
    color: #fff;
    padding: 1em;
    text-align: center;
}

p, li, h3 {
    color: #fff !important;
    font-family: 'Roboto Mono', sans-serif;
}
h1, h2 {
    color: black;
    font-family: 'Roboto Mono', sans-serif;
}

.container2 {
    margin: 300px;
}


.project {
    margin-bottom: 1em;
}

footer {
    background-color: #f8f9fa; 
    padding: 20px;
    text-align: center;
    position: static; 
    bottom: 0; 
    width: 100%; 
}
.navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,120,1) 0%, rgba(6,72,163,1) 0%, rgba(9,9,121,1) 0%, rgba(7,17,149,1) 0%, rgba(67,143,255,1) 37%, rgba(86,176,194,1) 100%);
    width: 100%;
}

.welcome-container {
    padding-top: 80px;
}
.welcome-text {
    align-items: center;
}
.logo {
    height: 70px;
}
.welcome-pic  {
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: cover;
}
#contact {
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,120,1) 0%, rgba(9,9,121,1) 0%, rgba(7,17,149,1) 0%, rgba(84,170,201,1) 0%, rgba(86,176,194,1) 0%, rgba(67,124,255,1) 0%, rgba(69,179,200,1) 0%, rgba(67,131,255,1) 53%, rgba(67,124,255,1) 62%, rgba(0,56,134,1) 95%);
}
#about {
    margin-top: 300px;
}
#skills {
    margin-top: 300px;
    margin-bottom: 300px;
} 
#contact {
    margin-top: 300px;
}    
.progress {
    margin: 50px;
}
.skill-logo {
    max-height: 12rem;
    max-width: 12rem;
}
.project img {
    max-width: 100%;
    height: auto;
}

a {
    color: white !important;
}
a:hover {
    color: black !important;
}
@media (max-width: 767px) {
    .navbar {
        padding: 0;
    }
}

@media (max-width: 767px) {
    .progress {
        margin: 3.5rem;
    }
}

@media (max-width: 767px) {
    .skill-logo {
        max-height: 8rem;
        max-width: 8rem;
    }
}


@media (max-width: 767px) {
    #skills {
        margin-top: 100px;
    }
}
@media (max-width: 767px) {
    #skills {
        padding-right: 2rem;
    }
}
@media (max-width: 767px) {
    .welcome-container {
        text-align: center;
    }
}
@keyframes floatAnimation {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}
@media (max-width: 768px) {
    
    .skill-item {
       
        margin-right: 5rem;
    }
    .progress {

        margin-left: 5rem; 
    }
    
}
@media (max-width: 767px) {

    .container {
        width: 100%; 
    }
}
.sky-overlay {
    position: absolute;
    bottom: -200rem;
    right: 0;
    width: 400px; 
    height: auto; 
    z-index: -1;
}

.sky-overlay2 {
    position: absolute;
    bottom: -160rem;
    left: 0;
    width: 400px; 
    height: auto; 
    z-index: -1;
}
.project img {
    transition: transform 0.3s ease;
}

.project img:hover {
    transform: scale(1.1); 
}
@media (max-width: 767px) {
    .project p {
        color: black !important;
    }
}
.project {
    border-radius: 10px
}