body {
    margin: 0;
    padding: 0;
    height: auto;
    font-family: "Ubuntu", sans-serif;
    background-color: rgb(255, 255, 255);
}

/* Navbar Section */
nav {
    background-color: rgb(0, 0, 0);
    color: white;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 3px 5px grey;
    padding: 0px 25px;
}

#person-img {
    width: fit-content;
    height: 75%;
}

nav h1 a {
    color: white;
    text-decoration: none;
}

nav h1 a:hover {
    color: #5B2130;
}

#nav-items {
    display: flex;
    gap: 25px;
    font-size: 18px;
    list-style-type: none;
}

#nav-items a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

#nav-items a:hover {
    color: #5B2130;
}

/* About Section */
#about {
    height: 537px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 50px;
    background-color: rgb(227, 173, 173);
}

#about img {
    object-fit: cover;
    text-align: center;
}

#content h2 {
    font-size: 46px;
    margin: 0px;
}

#content h4 {
    font-size: 26px;
    margin: 0px 0px 1.5rem 0px;
}

#content p {
    font-size: 20px;
    margin: 0px 0px 1.5rem 0px;
}

#social-media img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

span {
    color: #5B2130;
}

/* Skills Section */
#skills {
    background-color: rgb(255, 255, 255);
    color: white;
    height: auto;
    padding: 2rem 50px;
}


#skills-title {
    margin-bottom: 1rem;
}

#skills h2 {
    display: flex;
    justify-content: center;
    gap: 25px;
    align-items: center;
    font-size: 46px;
    color: black;
}

#skills h3 {
    font-size: 26px;
    color: black;
}

#skills h2 img {
    width: 50px;
    height: 50px;
}

#frontend-stack {
    display: flex;
    gap: 25px;
    align-items: center;
    margin: 0px 0px 2rem 0px;
    color: black;
}

#frontend-stack img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}


#backend-stack img {
    width: 60px;
    height: 60px;
}

#ui {
    display: flex;
    gap: 25px;
    align-items: center;
    object-fit: contain;
    color: black;
}

#ui img {
    width: 60px;
    height: 60px;
}

#skills-img img {
    width: 400px;
    height: 400px;
    object-fit: contain;
}

#skills #content {
    display: flex;
    justify-content: space-evenly;
    margin-top: 5rem;
}

/* Contact Section */


#contact-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 3rem;
}

#contact-img img {
    width: 100%;
    height: 100%;
    /* object-fit: ; */
    /* border-radius: 50%; */
    /* background-color: blue; */
}

#social-img img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}


#link-container ul {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    padding: 0px;
}

#link-container ul li a {
    color: grey;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
}

#link-container ul li a:hover {
    color: black;
}

#contact-content h2 {
    font-size: 26px;
    margin: 0px;
}


#social-container h2 {
    margin-bottom: 16px;
}


footer {
    background-color: white;
    color: white;
    font-weight: bold;
    padding: 1rem 0px;
}

footer p {
    text-align: center;
}

#education {
    height: 100vh;
    width: 100%;
    /* background-color: red; */
}
#education h1 img {
    width: 50px;
    align-content: baseline;
    height: 50px;
}

#title {
    margin-bottom: 2rem;
}

#heading h1 {
    background-color: rgb(227, 173, 173);
    display: flex;
    align-items:baseline;
    justify-content: center;
    font-size: 46px;
    gap: 25px;
    padding-top: 20px;

}

#college {
    background-color: rgb(227, 173, 173);
    /* Light green background */
    padding: 10px;
    border-radius: 10px;
    margin: 8px auto;
    width: 80%;
}
#oldedu {
    background-color: rgb(227, 173, 173);
    padding: 10px;
    border-radius: 10px;
    margin: 8px auto;
    width: 80%;
}
#education{
    background-color: rgb(227, 173, 173);
    
}


table {
    width: 60%;
    border-collapse: collapse;
    margin: 0 auto;
}

table,
th,
td {
    border: 2px solid #333;
}

th,
td {
    padding: 10px;
    text-align: center;
}

th {
    background-color: #b97562;
}

td {
    background-color: #b97562;
}

tr:nth-child(even) td {
    background-color: #ffffff;
}

/* contact */
#Experi {
    background-color: rgb(255, 255, 255);
    color: white;
    height: auto;
    padding: 2rem 50px;
}


#Experi-title {
    margin-bottom: 1rem;
}

#Experi h2 {
    display: flex;
    justify-content: center;
    gap: 25px;
    align-items: center;
    font-size: 46px;
    color: black;
}
#Experi h2 img {
    width: 50px;
    height: 50px;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 300px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: #ffffff;
    color: black;
    border: 2px solid black;
}

/* Style the back side */
.flip-card-back {
    color: #B36E5A;
    background-color:#B36E5A;
    color: rgb(0, 0, 0);
    transform: rotateY(180deg);
}

.flip-card-back p{
    margin:20px;
    padding:15px;
}


.card-container {
    display: flex;
    justify-content:space-around;
    /* center the row */
    gap: 20px;
    /* spacing between cards */
    flex-wrap: wrap;
    /* wrap to next line on small screens */
    padding: 1rem;
}

.contact-container{
    padding: 0px 100px 0px 140px;
}
#data {
    font-size: large;
    margin-bottom: 0px;
    margin-right:20px ;
}

.contact-container li{
    padding-bottom: 8px;
    margin-bottom: 8px;
}

#footer{
display:flex;
justify-content: flex-end;
font-size: smaller;
font-style: italic;
}

    #heading h2 {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            font-weight: bold;
            font-size: 2rem;
        }

        #heading h1{
            padding-top: 60px;
        }