/* Global Reset */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* Body and HTML Setup */
    html {
        font-size: 80%; /* Reduce default font size to 80% */
    }

    body, html {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        overflow-x: hidden;
    }

    /* Fixed Navigation Menu */
    #menu {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: rgba(34, 34, 34, 0.95); /* Dark background with slight transparency */
        z-index: 1000;
        padding: 3px 0; /* Add padding to increase menu height */
        overflow-x: auto; /* Allow horizontal scrolling */
        white-space: nowrap; /* Prevent items from wrapping to the next line */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        text-align: center; /* Center-align the menu container */
    }

    /* Table Setup */
    #menu table {
        margin: 0 auto; /* Center the table */
        border-collapse: collapse;
        width: auto; /* Allow table to be as wide as its content */
        white-space: nowrap; /* Prevent wrapping of table cells */
    }

    #menu td {
        padding: 4px 6px; /* Padding inside each cell */
        white-space: nowrap; /* Prevent individual items from wrapping */
    }

    /* Navigation Links */
    #menu a {
        color: #fff; /* White text */
        text-decoration: none;
        font-size: 16px;
        padding: 6px 8px;
        border-radius: 6px;
        transition: background-color 0.3s ease, color 0.3s ease;
        display: inline-block; /* Ensure links remain inline */
    }

    /* Hover Effects */
    #menu a:hover {
        color: #fff;
        background-color: #0071e3; /* Blue hover effect */
    }

    /* Active Link Style */
/*    #menu a.active {*/
/*        background-color: #005bb5;*/ /* Darker blue to indicate active section */
/*    }*/



/* Section Styles */
.section {
    background-color: rgb(54, 54, 54); /* Set the background color */
    color: rgb(54, 54, 54); /* Set the text color */
    font-size: 0px; /* Set the font size to 0px */
    height: 100vh;
    background-size: contain; /* Ensure the entire image is visible */
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 60px; /* Account for fixed menu bar */
    padding-left: 5px; /* Adjust the value to increase or decrease the space */
    border: 1px solid black; /* Optional: to visualize sections */
    will-change: transform;
}

/* Adjust Section0 to be behind the menu */
#section0 {
    background-image: url('bapng/byeokam_0.png');
    height: 0; /* Set height to 0 so it doesn't take up space */
    padding-top: 0; /* Remove padding */
    background-position: top; /* Ensure the background image starts from the top */
}

/* Ensure section1 starts just below the menu */
#section1 {
    background-image: url('bapng/byeokam_1.png');
    background-size: contain; /* Ensure the entire image is visible */
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 60px; /* Adjust padding to account for the menu height */
    height: calc(100vh - 60px); /* Full viewport height minus the menu bar height */
}


/* Ensure all sections after section0 have the correct padding */
.section:not(#section0) {
    padding-top: 60px;
    height: calc(100vh - 60px); /* Adjust height for other sections as well */
}




#section2 {
    background-image: url('bapng/byeokam_2.png');
}
#section3 {
    background-image: url('bapng/byeokam_3.png');
}
#section4 {
    background-image: url('bapng/byeokam_4.png');
}
#section5 {
    background-image: url('bapng/byeokam_5.png');
}
#section6 {
    background-image: url('bapng/byeokam_6.png');
}
#section7 {
    background-image: url('bapng/byeokam_7.png');
}
#section8 {
    background-image: url('bapng/byeokam_8.png');
}
#section9 {
    background-image: url('bapng/byeokam_9.png');
}
#section10 {
    background-image: url('bapng/byeokam_10.png');
}
#section11 {
    background-image: url('bapng/byeokam_11.png');
}
#section12 {
    background-image: url('bapng/byeokam_12.png');
}
#section13 {
    background-image: url('bapng/byeokam_13.png');
}
#section14 {
    background-image: url('bapng/byeokam_14.png');
}
#section15 {
    background-image: url('bapng/byeokam_15.png');
}
#section16 {
    background-image: url('bapng/byeokam_16.png');
}
#section17 {
    background-image: url('bapng/byeokam_17.png');
}
#section18 {
    background-image: url('bapng/byeokam_18.png');
}
#section19 {
    background-image: url('bapng/byeokam_19.png');
}
#section20 {
    background-image: url('bapng/byeokam_20.png');
}
#section21 {
    background-image: url('bapng/byeokam_21.png');
}
#section22 {
    background-image: url('bapng/byeokam_22.png');
}
#section23 {
    background-image: url('bapng/byeokam_23.png');
}
#section24 {
    background-image: url('bapng/byeokam_24.png');
}
#section25 {
    background-image: url('bapng/byeokam_25.png');
}
#section26 {
    background-image: url('bapng/byeokam_26.png');
}
#section27 {
    background-image: url('bapng/byeokam_27.png');
}
#section28 {
    background-image: url('bapng/byeokam_28.png');
}
#section29 {
    background-image: url('bapng/byeokam_29.png');
}
#section30 {
    background-image: url('bapng/byeokam_30.png');
}
#section31 {
    background-image: url('bapng/byeokam_31.png');
}
#section32 {
    background-image: url('bapng/byeokam_32.png');
}
#section33 {
    background-image: url('bapng/byeokam_33.png');
}
#section34 {
    background-image: url('bapng/byeokam_34.png');
}
#section35 {
    background-image: url('bapng/byeokam_35.png');
}
#section36 {
    background-image: url('bapng/byeokam_36.png');
}
#section37 {
    background-image: url('bapng/byeokam_37.png');
}
#section38 {
    background-image: url('bapng/byeokam_38.png');
}
#section39 {
    background-image: url('bapng/byeokam_39.png');
}
#section40 {
    background-image: url('bapng/byeokam_40.png');
}
#section41 {
    background-image: url('bapng/byeokam_41.png');
}
#section42 {
    background-image: url('bapng/byeokam_42.png');
}
#section43 {
    background-image: url('bapng/byeokam_43.png');
}
#section44 {
    background-image: url('bapng/byeokam_44.png');
}
#section45 {
    background-image: url('bapng/byeokam_45.png');
}
#section46 {
    background-image: url('bapng/byeokam_46.png');
}
#section47 {
    background-image: url('bapng/byeokam_47.png');
}
#section48 {
    background-image: url('bapng/byeokam_48.png');
}
#section49 {
    background-image: url('bapng/byeokam_49.png');
}
#section50 {
    background-image: url('bapng/byeokam_50.png');
}
#section51 {
    background-image: url('bapng/byeokam_51.png');
}
#section52 {
    background-image: url('bapng/byeokam_52.png');
}
#section53 {
    background-image: url('bapng/byeokam_53.png');
}
#section54 {
    background-image: url('bapng/byeokam_54.png');
}
#section55 {
    background-image: url('bapng/byeokam_55.png');
}
#section56 {
    background-image: url('bapng/byeokam_56.png');
}
#section57 {
    background-image: url('bapng/byeokam_57.png');
}
#section58 {
    background-image: url('bapng/byeokam_58.png');
}
#section59 {
    background-image: url('bapng/byeokam_59.png');
}
#section60 {
    background-image: url('bapng/byeokam_60.png');
}
#section61 {
    background-image: url('bapng/byeokam_61.png');
}
#section62 {
    background-image: url('bapng/byeokam_62.png');
}
#section63 {
    background-image: url('bapng/byeokam_63.png');
}
#section64 {
    background-image: url('bapng/byeokam_64.png');
}
#section65 {
    background-image: url('bapng/byeokam_65.png');
}
#section66 {
    background-image: url('bapng/byeokam_66.png');
}
#section67 {
    background-image: url('bapng/byeokam_67.png');
}
#section68 {
    background-image: url('bapng/byeokam_68.png');
}
#section69 {
    background-image: url('bapng/byeokam_69.png');
}
#section70 {
    background-image: url('bapng/byeokam_70.png');
}
#section71 {
    background-image: url('bapng/byeokam_71.png');
}
#section72 {
    background-image: url('bapng/byeokam_72.png');
}
#section73 {
    background-image: url('bapng/byeokam_73.png');
}
#section74 {
    background-image: url('bapng/byeokam_74.png');
}
#section75 {
    background-image: url('bapng/byeokam_75.png');
}
#section76 {
    background-image: url('bapng/byeokam_76.png');
}
#section77 {
    background-image: url('bapng/byeokam_77.png');
}
#section78 {
    background-image: url('bapng/byeokam_78.png');
}
#section79 {
    background-image: url('bapng/byeokam_79.png');
}
#section80 {
    background-image: url('bapng/byeokam_80.png');
}
#section81 {
    background-image: url('bapng/byeokam_81.png');
}
#section82 {
    background-image: url('bapng/byeokam_82.png');
}
#section83 {
    background-image: url('bapng/byeokam_83.png');
}
#section84 {
    background-image: url('bapng/byeokam_84.png');
}
#section85 {
    background-image: url('bapng/byeokam_85.png');
}
#section86 {
    background-image: url('bapng/byeokam_86.png');
}
#section87 {
    background-image: url('bapng/byeokam_87.png');
}
#section88 {
    background-image: url('bapng/byeokam_88.png');
}
#section89 {
    background-image: url('bapng/byeokam_89.png');
}
#section90 {
    background-image: url('bapng/byeokam_90.png');
}
#section91 {
    background-image: url('bapng/byeokam_91.png');
}
#section92 {
    background-image: url('bapng/byeokam_92.png');
}
#section93 {
    background-image: url('bapng/byeokam_93.png');
}
#section94 {
    background-image: url('bapng/byeokam_94.png');
}
#section95 {
    background-image: url('bapng/byeokam_95.png');
}
#section96 {
    background-image: url('bapng/byeokam_96.png');
}
#section97 {
    background-image: url('bapng/byeokam_97.png');
}
#section98 {
    background-image: url('bapng/byeokam_98.png');
}
#section99 {
    background-image: url('bapng/byeokam_99.png');
}
#section100 {
    background-image: url('bapng/byeokam_100.png');
}
#section101 {
    background-image: url('bapng/byeokam_101.png');
}
#section102 {
    background-image: url('bapng/byeokam_102.png');
}
#section103 {
    background-image: url('bapng/byeokam_103.png');
}
#section104 {
    background-image: url('bapng/byeokam_104.png');
}
#section105 {
    background-image: url('bapng/byeokam_105.png');
}
#section106 {
    background-image: url('bapng/byeokam_106.png');
}
#section107 {
    background-image: url('bapng/byeokam_107.png');
}
#section108 {
    background-image: url('bapng/byeokam_108.png');
}
#section109 {
    background-image: url('bapng/byeokam_109.png');
}
#section110 {
    background-image: url('bapng/byeokam_110.png');
}
#section111 {
    background-image: url('bapng/byeokam_111.png');
}
#section112 {
    background-image: url('bapng/byeokam_112.png');
}

/* Responsive Design for Small Screens */
@media (max-width: 768px) {
    #menu ul {
        flex-direction: column; /* Stack menu items vertically on small screens */
        align-items: center;
    }

    #menu ul li {
        margin: 10px 0;
    }

    #menu {
        padding: 20px 0;
    }
}