/* dark color code 1c1c24 or 1b1b22 */
/* grey color code 28242c or 24242c */


:root {
    --primary: #1b1b22;
    --secondary: #222228;
    --color: rgb(132, 0, 255);
}

/* NavBar Section */

span {
    font-weight: bold;
    color: var(--color);
}
header {
    backdrop-filter: blur(20px);
    z-index: 1;
    position: fixed;
    inline-size: 100%;
}
header h2 {
    font-weight: 700;
    padding-inline-start: 5%;
    cursor: pointer;
}
ul {
    inline-size: 100%;
    justify-content: space-evenly;
}
.navbar {
    inline-size: 100%;
    justify-content: space-evenly;
}
.navbar-light .navbar-toggler-icon {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28132, 0, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-light .navbar-toggler {
    border: 2px solid var(--color);
}

/* Home Section */

.home {
    background-color: var(--primary);
    padding-inline-start: 10px;
    padding-inline-end: 10px;
}
.home p {
    padding-block-start: 10em;
    
}
.home h1 {
    font-size: 55px;
}
.home .para {
    margin-block-start: -9em;
    opacity: 70%;
}
.span-btn {
    background: var(--color);
    border: none;
    border-radius: 5px;
    inline-size: 150px;
    block-size: 50px;
    color: rgb(191, 183, 183);
    font-weight: 700;
    margin-block-start: 5%;
    font-size: 1.1rem;
}
.logo {
    block-size: 39em;
    padding-block-start: 3em;
}

/* Projects Section */

.projects {
    background-color: var(--secondary);
    padding-inline-start: 10px;
    padding-inline-end: 10px;
}
.projects p {
    padding-block-start: 4em;
}
.projects h2 {
    font-size: 45px;
}
.projects .card-parent {
    padding-block-end: 4em;
}
.projects .card-parent p {
    opacity: 70%;
}
.projects a {
    text-decoration: none;
    color: white;
}
.h-project {
    block-size: 13em;
}
.about {
    background: var(--primary);
    padding-inline-start: 10px;
    padding-inline-end: 10px;
}
.about .details {
    padding-inline-start: 3em;
    padding-inline-end: 3em;
}
.about h1 {
    font-size: 50px;
}
.about p {
    opacity: 70%;
}
.skill {
    inline-size: 80px;
    block-size: 30px;
    background: #6c6c89;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    padding: 3px;
}
.skills {
    display: flex;
    justify-content: space-around;
    inline-size: 100%;
}
.my {
    padding-block-end: 30px;
}
.j {
    inline-size: 80px;
}

/* Contact Me Section */
.contact {
    background-color: var(--secondary);
    padding-inline-start: 10px;
    padding-inline-end: 10px;
}
.contact p {
    font-size: 24px;
    text-align: center;
    padding-block-start: 2em;
}
.contact h2 {
    text-align: center;
    font-size: 44px;
    padding-block-start: 1em;
}
.contact form {
    padding: 5%;
    background-color: #ffffff10;
    backdrop-filter: blur(50px);
    border-radius: 10px;
}
.contact .contact-form {
    block-size: 32em;
}
.error {
    color: red;
}
.valid {
    color: green;
}

/* Footer */

footer {
    background-color: var(--color);
    text-align: center;
}
footer a {
    color: white;
    text-decoration: none;
}
footer ul {
    list-style: none;
    text-align: start;
    padding: 15px;
    padding-left: 3em;
    font-size: large;
    opacity: 80%;
}

footer .container .row p {
    text-align: start;
    padding: 15px;
    opacity: 80%;
}