body {
    font-family: 'Charter', sans-serif;
    margin: 0;
    padding: 0;
    margin-bottom: 80px;
    background-color: #f4f4f4;
}

iframe {
    width: 100%;  /* Takes up 100% of the width of the parent container */
    max-width: 600px;  /* Restrict the maximum width */
    height: auto;  /* Height adjusts based on aspect ratio */
    aspect-ratio: 3 / 2; /* Optional: Set an aspect ratio for better control */
    border: 1px solid black;
}

header {
    text-align: center;
    padding: 50px;
    background-color: #333;
    color: white;
}

.profile-pic {
    width: 150px;
    height: 150px;
    margin-top: -20px; /* move image up 20 pixels */
    border-radius: 50%; /* Circular image */
    object-fit: cover;
}

.social-links img {
    width: 30px;  /* Adjust the width */
    height: 30px; /* Adjust the height to match */
}

@media only screen and (max-width: 768px) {
    /* Hamburger Menu Styling */
    .menu-icon {
        font-size: 30px;
        color: #3498db;
        cursor: pointer;
        display: block;
        position: fixed;  /* Stays fixed at the top-right corner */
        top: 15px;
        right: 15px;  /* Aligns to the right side of the screen */
        z-index: 1001;  /* Keeps it above other content */
    }
    
    .menu-links {
        position: fixed;  /* Fixes the menu so it overlays other content */
        top: 60px;  /* Adjust position below the hamburger icon */
        right: 15px;
        width: 200px;
        padding: 15px;
        background-color: rgba(0, 0, 0, 0.8);  /* Semi-transparent background */
        border-radius: 5px;
        z-index: 1000;
        text-align: right;
        visibility: hidden;  /* Initially hidden */
        opacity: 0;  /* Initially transparent */
        transition: visibility 0s, opacity 0.3s ease-in-out;  /* Smooth transition */
        width: auto;
        white-space: nowrap;
    }
    
    .menu-links.active {
        visibility: visible;  /* Show menu */
        opacity: 1;  /* Fade in */
    }

    .menu-links a {
        display: block;  /* Makes links stack vertically */
        color: #3498db;  /* Sets text color */
        padding: 10px 0;  /* Adds spacing around the links */
        text-decoration: none;  /* Removes underline */
        font-size: 18px;
    }
    
    .menu-links a:hover {
        background-color: #575757;  /* Changes background color on hover */
    }
}


/* Show Full Menu on PC */
@media only screen and (min-width: 769px) {
    .menu-icon {
        display: none;  /* Hide hamburger icon on larger screens */
    }

    .menu-links {
        display: flex;  /* Show full menu as a horizontal bar */
        justify-content: flex-end;
        background-color: #333;
        width: 100%;
        position: relative;  /* Normal positioning */
        padding: 10px;
    }

    .menu-links a {
        color: white;
        padding: 10px 20px;
        text-decoration: none;
        text-align: center;
    }

    .menu-links a:hover {
        background-color: #575757;
    }
}

section {
    margin: 20px;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
}

h2 {
    color: #333;
}

footer {
    background-color: #333; /* Dark gray background */
    color: white;           /* Text color */
    padding: 1px 0;
    position: fixed;        /* Fixes the footer to the bottom of the screen */
    bottom: 0;              /* Aligns the footer at the bottom */
    left: 0;                /* Ensures the footer spans the full width */
    width: 100%;
    display: flex;          /* Flexbox to center elements */
    flex-direction: column;
    align-items: center;    /* Centers the donut and text horizontally */
    z-index: 1000;          /* Ensures the footer stays above other content */
}

#donut-container 
{
    width: 60px;
    height: 60px;
    margin-top: 0.1px;
}

/* Skill bar container */
.skill-bar {
    background-color: #e0e0e0;   /* Light gray background */
    border-radius: 10px;         /* Rounded corners */
    width: 100%;                 /* Full width of the container */
    height: 20px;                /* Bar height */
    margin: 10px 0;              /* Space between skill bars */
    overflow: hidden;            /* Prevents inner bar from overflowing */
}

/* The skill level bar inside the container */
.skill-level {
    background-color: #3498db;   /* C++ skill bar color (blue) */
    height: 100%;                /* Full height of the bar */
    border-radius: 10px 0 0 10px;/* Rounded corners on the left */
    transition: width 0.4s ease; /* Smooth transition effect */
}

/* Text label for the skill */
.skill span {
    font-size: 16px;
    font-weight: bold;
}