body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f7f7f7;
}

a:hover {
    opacity: .65;
    transition: all 0.3s ease;
}

h1 a:hover {
    color: #0071e3;
}

h1 a {
    transform: scale(0.98);
    color: #000000;
    transition: all 0.3s ease;
}

p a {
    transform: scale(0.98);
    color: #666;
    transition: all 0.3s ease;
}

p a:hover {
    color: #0071e3;
}

.cv-container {
    max-width: 50rem; /* 800px */
    margin: 1rem auto 1rem;
    background-color: #fff;
    padding: 2rem;
    box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1); /* 10px */
    display: none;
}

.cv-content {
    padding: 1.25rem; /* 20px */
}

.cv-content h1 {
    font-size: 2.25rem; /* 36px */
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.cv-content p {
    font-size: 1rem; /* 16px */
    color: #666;
    transition: all 0.3s ease;
}

.cv-content section {
    margin-top: 1rem;
}

.cv-content section h2 {
    font-size: 1.5rem; /* 24px */
    color: #333;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.cv-content section p {
    font-size: 1.125rem; /* 18px */
    color: #666;
    line-height: 1.5;
    margin: 0.25rem 0;
}

.cv-content ul {
    list-style-type: disc;
}

.cv-content li {
    font-size: 0.9375rem; /* 15px */
    color: #333;
    margin-bottom: 0.25rem;
    transition: all 0.3s ease;
}

.icons-container {
    text-align: center;
    margin-top: 0rem;
}

.icons-container a {
    display: inline-block;
    margin-right: 0.3125rem; /* 5px */
    width: 2.5rem; /* 40px */
    height: 2.5rem;
    background-size: cover;
}

.icons-container i {
    font-size: 1.5625rem; /* 25px */
}

.contact-info {
    display: flex;
    flex-direction: column; /* adjust for smaller screens */
    align-items: flex-start;
    gap: 0.3125rem; /* 5px */
}

.copy-icon {
    border: none;
    background: none;
    font-size: 0.75rem; /* 12px */
    cursor: pointer;
    color: #777;
}

.copy-icon:hover {
    color: #333;
    transition: all 0.3s ease;
}

#skills {
    font-size: 0.9375rem; /* 15px */
    color: #333;
    margin-bottom: 0.3125rem; /* 5px */
}

/* grid styles */
.course-container {
    display: grid;
    grid-template-columns: 1fr 0.5fr 0.25fr; /* three columns */
    grid-gap: 0.625rem; /* 10px */
    overflow-x: auto; /* enable horizontal scrolling */
    white-space: nowrap; /* prevent wrapping */
}

.course-container > div {
    display: inline-block; /* ensure items respect horizontal scrolling */
}

.label {
    font-weight: bold;
    transition: all 0.3s ease;
}

.course,
.technologies,
.grade {
    font-size: 1rem; /* 16px */
    color: #333;
    padding: 0.625rem; /* 10px */
    border: 0.0625rem solid #ccc; /* 1px */
    transition: all 0.3s ease;
}

.grade {
    text-align: center;
    transition: all 0.3s ease;
}

.technologies {
    text-align: center;
}

/* center align ban icon */
.technologies i.fa-ban {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* term styling */
.term1 {
    background-color: #e0f7fa;
    border: 0.0625rem solid #ccc; /* 1px */
}

.term2 {
    background-color: #f0f4c3;
    border: 0.0625rem solid #ccc; /* 1px */
}

.term3 {
    background-color: #ffe0b2;
    border: 0.0625rem solid #ccc; /* 1px */
}

.term4 {
    background-color: #f8bbd0;
    border: 0.0625rem solid #ccc; /* 1px */
}

.term5 {
    background-color: #aceadd;
    border: 0.0625rem solid #ccc; /* 1px */
}

/* key styling */
.key {
    display: flex;
    flex-wrap: wrap;
}

.key-item {
    display: flex;
    align-items: center;
    margin-right: 1.25rem; /* 20px */
    margin-bottom: 0.625rem; /* 10px */
}

.key-color {
    width: 1.25rem; /* 20px */
    height: 1.25rem;
    margin-right: 0.625rem; /* 10px */
    border-radius: 50%;
}

.key-label {
    font-size: 1rem; /* 16px */
}

/* back button */
.back-button {
    top: 1.25rem; /* 20px */
    left: 1.25rem; /* 20px */
    text-decoration: none;
    color: #000000;
    font-size: 2.5rem; /* 40px */
}

/* profile pic */

/* Container sizing and centering */
.profile-pic-container {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 20px auto;
    cursor: pointer;
}

/* Base style for both images */
.profile-pic-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%; /* Makes it a circle */
    object-fit: cover; /* Prevents stretching */
    transition: opacity 0.5s ease-in-out; /* Smooth Apple-like fade */
    border: 2px solid #f2f2f2; /* Subtle minimalist border */
}

/* The top image fades out on hover/tap */
.profile-pic-container:hover .img-top,
.profile-pic-container:active .img-top {
    opacity: 0;
}

/* Bottom image stays visible underneath */
.img-bottom {
    z-index: 1;
}

.img-top {
    z-index: 2;
}

/* responsive styles */
@media (max-width: 768px) {
    .course,
    .technologies,
    .grade,
    .key-label,
    .cv-content p,
    .cv-content li,
    .cv-content section p {
        font-size: 0.875rem !important; /* 14px */
    }
    .cv-content h1 {
        font-size: 1.5rem !important; /* 24px */
    }
    .cv-content section h2,
    h2 {
        font-size: 1.25rem !important; /* 20px */
    }
    .cv-container {
        margin: 1rem 1rem;
    }
    .course-container {
        grid-template-columns: 1fr 1fr 1fr; /* keep three columns */
        overflow-x: auto; /* allow scrolling for smaller screens */
        padding: 1rem; /* add some padding for scrollable area */
    }
    
    .course-container::-webkit-scrollbar {
        height: 0.5rem; /* customize scrollbar height */
    }

    .course-container::-webkit-scrollbar-thumb {
        background: #ccc; /* scrollbar thumb color */
        border-radius: 0.25rem; /* Rounded edges */
    }

    .course-container::-webkit-scrollbar-track {
        background: #f0f0f0; /* scrollbar track color */
    }
}

@media (max-width: 480px) {
    .course,
    .technologies,
    .grade,
    .key-label,
    .cv-content p,
    .cv-content li,
    .cv-content section p {
        font-size: 0.75rem !important; /* 12px */
    }
    .cv-content h1 {
        font-size: 1.25rem !important; /* 20px */
    }
    .cv-content section h2,
    h2 {
        font-size: 1rem !important; /* 16px */
    }
    .cv-container {
        margin: .75rem .75rem;
    }
    .course-container {
        grid-template-columns: 1fr 1fr 1fr; /* keep three columns */
        overflow-x: auto;
        padding: 0.5rem;
    }
}