/* *{
    overflow-x: hidden;
} */
body {
    /* font-family: 'Cutive Mono', monospace;     */
    margin: 0;
    padding: 0;
    background-color: white;
    color: #333;
}


nav {
    background-color: #090909;
    overflow: hidden;
    box-shadow: 20px 10px 20px 10px #363434; /* Add box shadow here */
    position: fixed;
    width: 100%;
    z-index: 1;
}

nav a{
    float: left;
    /* display: block; */
    color: white;
    text-align: center;
    padding: 18px 26px;
    margin-top: 10px;
    text-decoration: none;
}

nav a:hover {
    background-color: white;
    color: #333;
    transition: .8s;
}

nav p{
    /* display: block; */
    float: left;
    text-align: center;
    padding: 0px 0px;
    margin-top: 26px;
    color: white;
}

.name{
    margin-left: 20px;
    display: flex;
    float: left;
}

.links{
    float: right;
    margin-right: 40px;
}
.menu-icon {
    display: none;
}

@media only screen and (max-width: 600px) {
    nav a {
        display: none;
    }

    .menu-icon {
        display: block;
        float: right;
        cursor: pointer;
        padding: 14px 16px;
    }

    .menu-icon:hover {
        background-color: #ddd;
    }

    .menu-items {
        display: none;
        clear: both;
    }

    .menu-items a {
        display: block;
    }
}
/* a{
    color: white;
} */
footer {
    background-color: #343a40;
    color: #FDFFFC;
    text-align: center;
    padding: 20px 0;
}
footer a {
    color: white;
}
.line{
    /* border: 1px solid #1a1c26;*/
    width: 65%;
 
 }
 
 
 #logo{
     height: 50px;
     padding: 10px;
     margin-right: 10px;
 }
 
 .top{
    padding: 40px;
    margin-left: 40px;
    margin-right: 40px;
    font-size: 24px;
 }

 .top a{
    color: black;
 }

 .card{
    display: flex;
     /* padding: 40px; */
     margin-left: 150px;
     margin-right: 150px;
    /* margin-right: 60px;  */
    /* width: 80%;*/
    height: 400px;
    /* border: 1px solid black;  */
    /* margin: auto; */
    border-radius: 10px 10px 10px 10px;
    justify-content: center;
    font-size: 24px; 
    /* background-color: #500800; */
    color: black;
    transition: .6s;
 }
 
 .card:hover{
    cursor: pointer;
    transform: scale(1.01);
 }
 .right{
    width: 70%;
    padding: 20px;
    justify-content: center;
    text-align: center;
        border: 1px solid black; 

 }



.left{
    border-right: 1px solid black; 
    /* background-color: #1A1C26; */
    /* color: white; */
    border: 1px solid black; 
    border-radius: 10px 0px 0px 0px;



}
.shape{
    /* height: 350px; */
    /* background-color:#1a1c26; */

    text-align: center;
    margin: 10px; 
     /* padding: 15px;  */
     /* border-right: 1px solid #500800;  */
    /* border-radius: 10px 10px; */
    /* box-shadow:10px 0px 10px gray;
    transition: .7s ease; */

}

/* .shape:hover{
    transform: scale(1.02);
} */
/* 
.shape h2,a{
color:white;
} */

/* .shape button{
    width: 150px;
    height: 50px;
    border: none;
    outline: none;
    transition: .6s;
    background-color: #1a1c26;
    color: white; */
    /* border-radius: 10px 10px; */
/* padding: 3px;;
} */
/* 
.shape button:hover{
    cursor: pointer;
    color: #1a1c26;
    background-color: white;
} */
.shape img{
    height: 250px;
    margin: -10px;
    border-radius: 10px 0px 0px 0px;
    border-bottom:1px solid black;
    /* opacity: 0.7; */
}

.card_text{
    padding: 30px;
}

.desc{
    padding: 10px;
    margin-right: 30px;
    margin-left: 30px;
    height: 40%;
    text-align: center;
    justify-content: center;
}
.desc p{
    font-size: 18px;
}
.right hr{
    margin-bottom: 50px;
    width: 70%;
}
.chips{
    padding: 10px;
    margin-right: 0px;
    margin-left: 0px;
    height: 50%;
    text-align: center;
    justify-content: center;
}

.chip{
    color: white;
    padding: 10px;
    font-size: 16px;
    margin: 5px;
    /* border-radius: 10px 10px 10px 10px; */
}

.chip:nth-child(1) {
    background-color: #e74c3c; /* Red for HTML/CSS */
}

.chip:nth-child(2) {
    background-color: #2ecc71; /* Green for JavaScript */
}

.chip:nth-child(3) {
    background-color: #f39c12; /* Orange for React */
}

.chip:nth-child(4) {
    background-color: #9b59b6; /* Purple for NodeJS */
}

.chip:nth-child(5) {
    background-color: #e67e22; /* Orange for Firebase */
}

.chip:nth-child(6) {
    background-color: #27ae60; /* Green for Testing */
}