Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header>
      <div class="topHeader">
        <a href="#"
          ><svg width="124" height="87" viewBox="0 0 124 87" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M47.9942 15.7777C47.7266 16.1343 47.459 16.4017 47.1913 16.6691C39.5194 15.0646 30.5093 12.3013 23.8187 9.09225C23.9079 9.04768 23.9748 9.00312 24.0417 8.95855L24.0417 8.95854C24.1086 8.91397 24.1755 8.8694 24.2647 8.82483C24.7108 8.55741 25.1568 8.28999 25.6029 8.11171C25.7367 8.06714 25.8482 8.00029 25.9597 7.93343C26.0712 7.86658 26.1827 7.79972 26.3165 7.75515L27.9223 6.9529C28.0115 6.90833 28.123 6.86376 28.2345 6.81919C28.346 6.77462 28.4575 6.73005 28.5467 6.68548C28.9348 6.49158 29.3229 6.34454 29.677 6.21039C29.8113 6.15953 29.9407 6.11051 30.0633 6.0615C30.4076 5.99268 30.6988 5.87074 31.0189 5.73669C31.1134 5.6971 31.2105 5.65645 31.3122 5.6158C31.669 5.43752 32.0259 5.25924 32.3827 5.1701C38.7165 2.76333 45.4072 1.24796 52.2762 0.534838L54.9525 0.267419C55.2201 0.178279 55.577 0.178279 55.8446 0.178279C56.1568 0.178279 56.469 0.155994 56.7813 0.13371C57.0935 0.111425 57.4057 0.0891397 57.718 0.0891397C58.0748 0 58.5208 0 58.8777 0H61.1971H61.7323H61.8216C64.9439 0 68.0662 0.178279 71.01 0.534838C71.1885 0.623978 71.2777 0.623978 71.4561 0.623978C72.3482 0.713118 73.1511 0.802257 73.9539 0.891397C74.0764 0.891397 74.1988 0.901893 74.3177 0.91208C74.5452 0.931581 74.7594 0.949949 74.9352 0.891397C75.2474 0.935951 75.5372 0.980504 75.827 1.02506L75.8273 1.0251C76.1172 1.06967 76.4072 1.11424 76.7194 1.15882L78.0575 1.42624C78.2806 1.47081 78.5259 1.51538 78.7712 1.55994C79.0165 1.60451 79.2618 1.64908 79.4849 1.69365C79.7079 1.73822 79.9532 1.78279 80.1985 1.82736C80.4439 1.87193 80.6892 1.9165 80.9122 1.96107C81.3583 2.13935 81.8043 2.22849 82.2503 2.31763C82.4734 2.3622 82.6964 2.42906 82.9194 2.49591C83.1424 2.56276 83.3654 2.62962 83.5885 2.67419C83.8561 2.76333 84.1014 2.83019 84.3467 2.89704C84.5921 2.9639 84.8374 3.03075 85.105 3.11989L86.1755 3.38731C86.6015 3.49372 87.0274 3.63188 87.4344 3.7639C87.7093 3.85306 87.9756 3.93942 88.2273 4.01129C88.3165 4.05586 88.3834 4.07814 88.4503 4.10043C88.5172 4.12271 88.5842 4.145 88.6734 4.18957C93.4014 5.70494 97.5942 7.66601 101.073 9.62709C101.118 9.67166 101.163 9.69394 101.207 9.71623C101.252 9.73851 101.296 9.7608 101.341 9.80537C101.386 9.84994 101.43 9.87222 101.475 9.89451C101.519 9.91679 101.564 9.93908 101.609 9.98365C95.0964 13.5492 86.5323 16.2234 78.1467 17.4714C78.0838 17.3285 78.0176 17.1644 77.9443 16.9826C76.8743 14.3304 74.2945 7.93574 58.4316 9.27053L55.9338 3.29817L53.3467 4.18957L53.9712 10.2511C53.9712 10.2511 49.0647 12.3013 47.459 13.371C47.5482 13.9949 47.8158 15.0646 47.9942 15.7777ZM42.4504 21.7024C40.1851 24.06 37.5012 26.8532 36.6647 28.079C21.4101 25.7614 12.4 23.1763 8.11798 21.661C8.20718 21.5273 8.29638 21.4159 8.38558 21.3044L8.3856 21.3044L8.38562 21.3044C8.47482 21.193 8.56403 21.0816 8.65323 20.9479C8.74243 20.8587 8.83163 20.7473 8.92083 20.6359L8.92085 20.6359C9.01006 20.5244 9.09927 20.413 9.18848 20.3239C9.36689 20.1456 9.54531 19.945 9.72372 19.7445C9.90214 19.5439 10.0806 19.3433 10.259 19.1651C10.3482 18.9868 10.5266 18.8085 10.705 18.6302C10.8834 18.452 11.0841 18.2737 11.2848 18.0954L11.2849 18.0954L11.2849 18.0954C11.4856 17.9171 11.6863 17.7388 11.8647 17.5605L12.4 17.0257C12.6229 16.8475 12.8458 16.647 13.0687 16.4466L13.0688 16.4466L13.0688 16.4465L13.0688 16.4465L13.0688 16.4465L13.0689 16.4465L13.0689 16.4464L13.0689 16.4464L13.0689 16.4464L13.069 16.4464L13.069 16.4464L13.069 16.4463L13.069 16.4463C13.2921 16.2457 13.5151 16.0452 13.7381 15.8669L14.095 15.5103C16.0575 13.8167 18.1093 12.3904 20.0719 11.1425C20.1165 11.1425 20.1388 11.1202 20.1611 11.0979C20.1834 11.0756 20.2057 11.0533 20.2504 11.0533L21.0532 10.5185C24.3539 12.0339 33.6316 16.0452 45.5856 18.3628C45.017 19.0312 43.809 20.2884 42.4504 21.7024ZM79.0388 29.7726C96.9698 28.7921 111.511 25.1374 117.042 23.1763C116.952 23.0872 116.886 22.998 116.819 22.9089C116.752 22.8197 116.685 22.7306 116.596 22.6415C116.551 22.5969 116.506 22.53 116.462 22.4632C116.417 22.3963 116.373 22.3295 116.328 22.2849L114.99 20.6804L114.901 20.5912C114.455 20.0565 114.009 19.6109 113.474 19.0762L113.474 19.0761L113.473 19.0759L113.027 18.6302L111.957 17.5605C111.689 17.2931 111.422 17.0257 111.154 16.8474C111.02 16.7139 110.864 16.5803 110.709 16.4468L110.709 16.4468L110.708 16.4468L110.708 16.4467L110.708 16.4467L110.708 16.4466L110.708 16.4466L110.708 16.4466L110.708 16.4465L110.708 16.4465L110.708 16.4464L110.708 16.4463L110.708 16.4462L110.708 16.4462L110.708 16.4461L110.708 16.4461L110.708 16.4461L110.708 16.446L110.708 16.446L110.708 16.4459L110.707 16.4459L110.707 16.4459L110.707 16.4458C110.551 16.3122 110.395 16.1787 110.262 16.0451C110.128 15.9114 109.994 15.8 109.86 15.6886C109.727 15.5771 109.593 15.4657 109.459 15.332L109.459 15.3318C108.924 14.8861 108.388 14.4405 107.764 13.9949L107.675 13.9058C106.426 12.9252 105.177 12.0338 103.928 11.3207C100.806 13.0144 92.4201 16.9365 78.682 18.9867C80.1093 22.4632 79.0388 29.7726 79.0388 29.7726ZM56.7367 32.4468C56.7367 32.4468 49.3324 36.1016 46.0317 41.8065H0C0 41.3608 0 41.0042 0.0892086 40.7368V40.6477C0.133814 40.2911 0.178419 39.9568 0.223024 39.6226C0.267628 39.2883 0.312231 38.954 0.356835 38.5975V38.5083C0.395834 38.2745 0.451883 38.0237 0.510075 37.7632C0.584992 37.4279 0.66346 37.0767 0.713669 36.7255C0.802878 36.6364 0.802878 36.5473 0.802878 36.4581C0.892086 35.9233 0.981295 35.3884 1.15971 34.8536V34.6753C1.24892 34.4079 1.33813 34.1182 1.42734 33.8285L1.42738 33.8284C1.51658 33.5387 1.60577 33.249 1.69496 32.9817C2.58705 30.2183 3.92518 27.3659 5.97698 24.4243C6.02158 24.3797 6.04388 24.3351 6.06619 24.2906C6.08849 24.246 6.11079 24.2014 6.1554 24.1568C6.18861 24.1237 6.20945 24.0781 6.23175 24.0294C6.26933 23.9473 6.31103 23.8562 6.42302 23.8003C14.1842 26.2962 26.7626 29.1487 37.0216 30.4858C41.6368 37.9483 46.0942 34.2899 48.4633 32.3455C48.6128 32.2228 48.7539 32.107 48.8863 32.0011C51.8302 32.1794 56.7367 32.4468 56.7367 32.4468ZM76.6302 41.8065H124C124 41.45 124 41.0043 123.911 40.6477C123.732 37.8844 123.108 35.0319 122.037 32.1794V32.0903C121.859 31.5555 121.591 30.9315 121.324 30.3966C121.279 30.3521 121.257 30.2852 121.235 30.2184C121.212 30.1515 121.19 30.0847 121.145 30.0401C121.053 29.8559 120.972 29.6823 120.893 29.5157L120.893 29.5155L120.893 29.5155L120.893 29.5145L120.892 29.5136L120.892 29.5129L120.892 29.5123C120.743 29.1962 120.607 28.905 120.432 28.6138L120.164 28.079C120.036 27.7581 119.861 27.4833 119.673 27.1883L119.673 27.1882C119.6 27.0735 119.525 26.9558 119.45 26.8311C119.361 26.6973 119.294 26.5636 119.227 26.4299L119.227 26.4298C119.16 26.2961 119.093 26.1625 119.004 26.0288C118.915 25.9397 118.915 25.8505 118.915 25.8505C118.774 25.8912 118.616 25.9376 118.439 25.9892C114.362 27.181 100.743 31.1615 78.682 32.3577C78.4447 33.5434 78.1301 34.7934 77.8165 36.0394C77.3049 38.0719 76.7961 40.0934 76.6302 41.8065ZM0 44.2133H44.6043C43.623 46.0852 42.8201 50.3639 42.9986 52.5033C20.4888 54.5026 9.74387 57.9811 5.66679 59.301C5.38122 59.3934 5.12837 59.4753 4.90647 59.5453C4.81727 59.5453 4.81727 59.4562 4.81727 59.4562C4.81727 59.367 4.72806 59.1888 4.63885 59.0996C4.50503 58.8768 4.37122 58.6316 4.2374 58.3865L4.23733 58.3864C4.10355 58.1413 3.96976 57.8962 3.83597 57.6734L3.56835 57.1385C3.30072 56.6928 3.03309 56.158 2.76547 55.6232C2.72086 55.5786 2.69856 55.534 2.67626 55.4895C2.65396 55.4449 2.63165 55.4003 2.58705 55.3557C2.45324 55.0438 2.34173 54.7318 2.23022 54.4198C2.11871 54.1078 2.00719 53.7958 1.87338 53.4838V53.3947C1.79735 53.1288 1.70512 52.8629 1.61049 52.59C1.48307 52.2227 1.35131 51.8428 1.24892 51.4336V51.3445C1.0705 50.8096 0.892086 50.1856 0.713669 49.5617C0.713669 49.5171 0.691367 49.4502 0.669065 49.3834C0.646763 49.3165 0.62446 49.2497 0.62446 49.2051C0.579855 48.9823 0.53525 48.7371 0.490645 48.492C0.446041 48.2468 0.401438 48.0017 0.356835 47.7789C0.267626 47.5114 0.178417 47.1549 0.178417 46.8875C0.178417 46.7092 0.156115 46.5309 0.133813 46.3526C0.111511 46.1744 0.0892086 45.9961 0.0892086 45.8178C0.0892086 45.5949 0.0669064 45.3944 0.0446042 45.1938C0.0223021 44.9933 0 44.7927 0 44.5698V44.2133ZM76.3626 44.2133C76.0057 48.0463 77.7007 51.3445 78.7712 52.6816C100.122 54.6443 114.278 58.9762 118.03 60.1244L118.227 60.1848L118.353 60.2232L118.469 60.2584C119.54 58.6539 120.699 56.5146 121.77 54.0187C121.77 53.9295 121.77 53.9295 121.859 53.8404L121.859 53.8402C122.037 53.3946 122.216 52.9489 122.305 52.5033C122.355 52.4032 122.377 52.3031 122.403 52.1872C122.422 52.0967 122.444 51.9966 122.483 51.8793C122.573 51.5227 122.662 51.1662 122.84 50.8096C122.885 50.6314 122.929 50.4754 122.974 50.3194C123.019 50.1634 123.063 50.0074 123.108 49.8291C123.152 49.6954 123.175 49.5617 123.197 49.428C123.219 49.2943 123.242 49.1605 123.286 49.0268C123.465 48.4029 123.554 47.7789 123.643 47.1549V46.9766C123.732 46.3526 123.822 45.6395 123.822 45.0155V44.7481V44.1242C122.305 44.2133 78.1467 44.2133 76.3626 44.2133ZM79.3957 59.7236C81.0906 57.8517 80.1985 55.1775 80.1985 55.1775C95.8912 56.339 111.584 60.6665 116.344 61.9791C116.698 62.0768 116.992 62.1578 117.22 62.2195C117.176 62.3087 117.109 62.3755 117.042 62.4424C116.975 62.5092 116.908 62.5761 116.863 62.6652C116.774 62.9326 116.596 63.1109 116.417 63.2892L116.417 63.2892C116.239 63.512 116.06 63.7126 115.882 63.9132C115.704 64.1137 115.525 64.3143 115.347 64.5371L114.811 65.072C114.633 65.2502 114.477 65.4284 114.321 65.6067L114.321 65.6068L114.321 65.607C114.165 65.7852 114.009 65.9634 113.83 66.1417L113.027 66.9439L112.224 67.7462C112.046 67.8799 111.89 68.0359 111.734 68.1919C111.578 68.3479 111.422 68.5039 111.243 68.6376L111.243 68.6376C110.975 68.905 110.708 69.1724 110.351 69.4398C110.217 69.5735 110.083 69.685 109.95 69.7964C109.816 69.9078 109.682 70.0192 109.548 70.1529C109.102 70.5986 108.656 70.9552 108.121 71.3118L107.853 71.5792C106.604 72.5597 105.266 73.4511 103.928 74.2534C103.839 74.2979 103.772 74.3425 103.705 74.3871C103.638 74.4316 103.571 74.4762 103.482 74.5208L102.947 74.7882C102.461 74.6015 101.891 74.3737 101.241 74.114L101.241 74.1138C95.6846 71.8935 84.287 67.3387 69.6719 66.1417C71.2219 63.9733 76.3403 63.2851 78.71 62.9664C79.068 62.9183 79.3633 62.8786 79.5741 62.8435V60.4367H44.2475V62.8435C44.2475 62.8435 51.741 62.9326 53.6144 65.9634C33.364 67.657 22.8374 74.1642 21.4993 75.0556C21.2316 74.9665 20.964 74.7882 20.6964 74.6099C20.5627 74.5209 20.4513 74.454 20.3398 74.3872L20.3396 74.3871L20.3393 74.3869C20.2279 74.3201 20.1164 74.2533 19.9827 74.1642L18.377 73.0946C18.2878 73.05 18.2209 73.0054 18.1539 72.9608C18.087 72.9163 18.0201 72.8717 17.9309 72.8271L17.9308 72.827C17.3956 72.4705 16.8604 72.114 16.3252 71.6683C16.1467 71.49 16.0575 71.4009 15.8791 71.3118C15.6116 71.089 15.3663 70.8884 15.121 70.6879L15.1209 70.6878C14.8755 70.4872 14.6302 70.2867 14.3626 70.0638C14.2734 70.0192 14.2065 69.9524 14.1396 69.8855C14.0727 69.8187 14.0057 69.7518 13.9165 69.7072C13.4705 69.3507 12.9352 68.905 12.4892 68.4593C12.427 68.335 12.3214 68.254 12.233 68.1862C12.1946 68.1567 12.1594 68.1297 12.1324 68.1027C11.5971 67.657 11.0619 67.1222 10.6158 66.6765L10.4374 66.4982C9.90215 65.9634 9.3669 65.4285 8.92085 64.8937C8.5498 64.5229 8.22161 64.1093 7.90658 63.7123L7.90644 63.7121L7.9064 63.7121L7.90625 63.7119C7.76696 63.5363 7.63024 63.364 7.49351 63.2001C7.3151 63.0218 7.22589 62.9326 7.13668 62.7543L6.3338 61.6847C8.74244 60.7933 22.3021 56.3363 43.2662 54.8209C43.4446 57.1385 44.1583 59.7236 44.1583 59.7236H79.3957ZM68.7799 68.1027C68.6015 68.9941 68.6907 70.7769 70.3856 71.9357C71.3669 72.6489 72.5266 73.0054 73.954 73.1837L73.9543 73.1838C74.8463 73.2729 75.7383 73.362 76.8979 73.362C77.5321 73.362 78.0254 73.3444 78.5735 73.3248H78.5736H78.5739H78.5739C79.2592 73.3004 80.0301 73.2728 81.2691 73.2728V83.2565C84.5698 82.5434 87.9597 81.4737 91.2605 80.3149C91.2605 80.3149 91.3497 80.3149 91.3497 80.2257C91.7511 80.0475 92.1748 79.8915 92.5985 79.7355C93.0223 79.5795 93.446 79.4235 93.8475 79.2452H93.9367C95.6317 78.5321 97.2374 77.819 98.6648 77.0167C98.7126 76.9928 98.754 76.9689 98.7924 76.9468C98.8974 76.8862 98.9802 76.8384 99.1108 76.8384C99.2446 76.7939 99.3784 76.727 99.5122 76.6602C99.646 76.5933 99.7799 76.5265 99.9137 76.4819C99.5569 76.3036 86.354 69.7073 68.7799 68.1027ZM24.0417 76.7047C23.9079 76.6379 23.7741 76.571 23.6403 76.4819C28.9928 72.8271 39.787 68.7267 54.5065 67.7462C54.5957 68.3701 54.7741 70.7769 52.9007 72.0249C51.8302 72.738 49.6892 73.0946 47.5482 73.1837C44.6043 73.362 41.5712 73.1837 41.5712 73.1837V83.3456C41.4539 83.3065 41.3537 83.2846 41.2631 83.2647C41.1471 83.2393 41.047 83.2174 40.9468 83.1673C40.5899 83.0782 40.2331 82.9891 39.9655 82.8999C39.5111 82.799 39.0853 82.6696 38.6719 82.5439L38.6717 82.5438C38.3547 82.4475 38.045 82.3533 37.7353 82.2759C37.6906 82.2759 37.646 82.2537 37.6014 82.2314C37.5568 82.2091 37.5122 82.1868 37.4676 82.1868C32.8288 80.7606 28.4576 79.0669 24.8 77.1058C24.7318 77.0718 24.6767 77.0508 24.6296 77.0328C24.5534 77.0037 24.4983 76.9827 24.4432 76.9276C24.3093 76.8384 24.1755 76.7716 24.0417 76.7047ZM45.7639 76.1251H52.2761V78.0862H48.1725V80.493H52.0085V82.454H48.1725V86.7327H45.7639V76.1251ZM56.5581 86.8219V76.1251H54.1495V86.8219H56.5581ZM58.6991 76.2143C59.5912 76.036 60.7509 76.036 61.9998 76.036C64.0516 76.036 65.3898 76.3925 66.3711 77.1948C67.4416 77.9971 68.1552 79.3342 68.1552 81.2061C68.1552 83.2563 67.4416 84.6825 66.3711 85.5739C65.2113 86.5545 63.5164 87.0002 61.4646 87.0002C60.2157 87.0002 59.3236 86.911 58.6991 86.8219V76.2143ZM61.1077 85.0391C61.2862 85.1282 61.643 85.1282 61.9106 85.1282C64.1408 85.1282 65.5682 83.9694 65.5682 81.3844C65.5682 79.1559 64.3193 77.9971 62.1782 77.9971C61.839 77.9971 61.5714 78.0329 61.3755 78.0591L61.3754 78.0591C61.2623 78.0743 61.173 78.0862 61.1077 78.0862V85.0391ZM72.1696 82.2758H76.0056V80.3147H72.0804V78.0862H76.2732V76.1251H69.6718V86.8219H76.5409V84.8608H72.1696V82.2758Z" fill="white"/>
</svg>
</a>
        <a href="#"><h1>FIDE LAWS of CHESS</h1></a>
      </div>
      <div class="hamburger">
        <i class="fas fa-bars"></i>
        <!-- <div class="line line_1"></div>
        <div class="line line_2"></div>
        <div class="line line_3"></div> -->
      </div>
    </header>
    <div class="container">
      <nav id="navbar">
        <header class="one_header">One header</header>
        <ul>
          <li>
            <a
              href="#the_nature_and_objectives_of_the_game_of_chess"
              class="nav-link"
              >The nature and objectives of the game of chess</a
            >
          </li>
          <li>
            <a
              href="#the_initial_position_of_the_pieces_on_the_chessboard"
              class="nav-link"
              >The initial position of the pieces on the chessboard</a
            >
          </li>
          <li>
            <a href="#the_moves_of_the_pieces" class="nav-link"
              >The moves of the pieces
            </a>
          </li>
          <li>
            <a href="#the_act_of_moving_the_pieces" class="nav-link"
              >The act of moving the pieces</a
            >
          </li>
          <li>
            <a href="#the_completion_of_the_game" class="nav-link"
              >The completion of the game</a
            >
          </li>
          <li>
            <a href="#the_chess_clock" class="nav-link">The chess clock</a>
          </li>
          <li>
            <a href="#irregularities" class="nav-link">Irregularities</a>
          </li>
          <li>
            <a href="#the_recording_of_the_moves" class="nav-link"
              >The recording of the moves</a
            >
          </li>
          <li>
            <a href="#the_drawn_game" class="nav-link">The drawn game</a>
          </li>
          <li>
            <a href="#quickplay_finish" class="nav-link">Quickplay finish</a>
          </li>
          <li>
            <a href="#points" class="nav-link">Points</a>
          </li>
          <li>
            <a href="#the_conduct_of_the_players" class="nav-link"
              >The conduct of the players</a
            >
          </li>
          <li>
            <a href="#the_role_of_the_arbiter" class="nav-link"
              >The role of the arbiter</a
            >
          </li>
          <li>
            <a href="#fide" class="nav-link">FIDE</a>
          </li>
          <li>
            <a href="#reference" class="nav-link">Reference</a>
          </li>
        </ul>
      </nav>

      <main id="main-doc">
        <button class="scrollUp" title="Go to top">
          <i class="fas fa-angle-up"></i>
        </button>
        <section class="main-section" id="the_nature_and_objectives_of_the_game_of_chess">
          <header>The nature and objectives of the game of chess</header>
          <hr />
          <article>
            <p>
              The game of chess is played between two opponents who move their
              pieces alternately on a square board called a ‘chessboard’. The
              player with the white pieces commences the game. A player is said
              to ‘have the move’, when his opponent’s move has been ‘made’.
            </p>
            <p>
              The objective of each player is to place the opponent’s king
              ‘under attack’ in such a way that the opponent has no legal move.
              The player who achieves this goal is said to have ‘checkmated’ the
              opponent’s king and to have won the game. Leaving one’s own king
              under attack, exposing one’s own king to attack and also
              ’capturing’ the opponent’s king are not allowed. The opponent
              whose king has been checkmated has lost the game.
            </p>
            <p>
              If the position is such that neither player can possibly
              checkmate, the game is drawn.
            </p>
          </article>
        </section>

        <section class="main-section" id="the_initial_position_of_the_pieces_on_the_chessboard">
          <header>The initial position of the pieces on the chessboard</header>
          <hr />
          <article>
            <p>
              The chessboard is composed of an 8 x 8 grid of 64 equal squares
              alternately light (the ‘white’ squares) and dark (the ‘black’
              squares). The chessboard is placed between the players in such a
              way that the near corner square to the right of the player is
              white.
            </p>
            <p>
              At the beginning of the game one player has 16 light-coloured
              pieces (the ‘white’ pieces); the other has 16 dark-coloured pieces
              (the ‘black’ pieces).
            </p>
            <div class="pieces_symbols">
              <p>These pieces are as follows:</p>
              <div>
                <span>A white king</span>
                <span class="chessPieces">&#9812;</span>
              </div>
              <div>
                <span>A white queen</span>
                <span class="chessPieces">&#9813;</span>
              </div>
              <div class="two_rooks">
                <span>Two white rooks</span>
                <span class="chessPieces">&#9814;</span>
              </div>
              <div>
                <span>Two white bishops</span>
                <span class="chessPieces">&#9815;</span>
              </div>
              <div>
                <span>Two white knights</span>
                <span class="chessPieces">&#9816;</span>
              </div>
              <div>
                <span>Eight white pawns</span>
                <span class="chessPieces">&#9817;</span>
              </div>
              <div>
                <span>A black king</span>
                <span class="chessPieces">&#9818;</span>
              </div>
              <div>
                <span>A black queen</span>
                <span class="chessPieces">&#9819;</span>
              </div>
              <div>
                <span>Two black rooks</span>
                <span class="chessPieces">&#9820;</span>
              </div>
              <div>
                <span>Two black bishops</span>
                <span class="chessPieces">&#9821;</span>
              </div>
              <div>
                <span>Two black knights</span>
                <span class="chessPieces">&#9822;</span>
              </div>
              <div>
                <span>Eight black pawns</span>
                <span class="chessPieces">&#9823;</span>
              </div>
            </div>
            <p>
              The initial position of the pieces on the chessboard is as
              follows:
            </p>
            <img
              class="oneImage"
              src="https://i.imgur.com/sBbGGXo.png"
              alt="chessboard"
            />
            <p>
              The eight vertical columns of squares are called ‘files’. The
              eight horizontal rows of squares are called ‘ranks’. A straight
              line of squares of the same colour, running from one edge of the
              board to an adjacent edge, is called a ‘diagonal’.
            </p>
          </article>
        </section>

        <section class="main-section" id="the_moves_of_the_pieces">
          <header>The moves of the pieces</header>
          <code>a</code>
          <code>b</code>
          <code>c</code>
          <code>d</code>
          <code>e</code>
          <hr />
          <article>
            <p>
              It is not permitted to move a piece to a square occupied by a
              piece of the same colour. If a piece moves to a square occupied by
              an opponent’s piece the latter is captured and removed from the
              chessboard as part of the same move. A piece is said to attack an
              opponent’s piece if the piece could make a capture on that square
              according to the Articles 3.2 to 3.8. A piece is considered to
              attack a square, even if such a piece is constrained from moving
              to that square because it would then leave or place the king of
              its own colour under attack.
            </p>
            <p>
              The bishop may move to any square along a diagonal on which it
              stands.
            </p>
            <img class="oneImage" src="https://i.imgur.com/pGUy9V8.png" alt="bishop" />
            <p>
              The rook may move to any square along the file or the rank on
              which it stands.
            </p>
            <img class="oneImage" src="https://i.imgur.com/Rndj2cf.png" alt="rook" />
            <p>
              The queen may move to any square along the file, the rank or a
              diagonal on which it stands.
            </p>
            <img class="oneImage" src="https://i.imgur.com/nQKoKj2.png" alt="queen" />
            <p>
              When making these moves the bishop, rook or queen may not move
              over any intervening pieces.
            </p>
            <p>
              The knight may move to one of the squares nearest to that on which
              it stands but not on the same rank, file or diagonal.
            </p>
            <img class="oneImage" src="https://i.imgur.com/1Kied6L.png" alt="knight" />
            <p>
              The pawn may move forward to the unoccupied square immediately in
              front of it on the same file, or on its first move the pawn may
              move as in 3.7.a or alternatively it may advance two squares along
              the same file provided both squares are unoccupied, or the pawn
              may move to a square occupied by an opponent’s piece, which is
              diagonally in front of it on an adjacent file, capturing that
              piece.
            </p>
            <img class="oneImage" src="https://i.imgur.com/EEKl6nR.png" alt="pawns" />
            <p>
              A pawn attacking a square crossed by an opponent’s pawn which has
              advanced two squares in one move from its original square may
              capture this opponent’s pawn as though the latter had been moved
              only one square. This capture is only legal on the move following
              this advance and is called an ‘en passant’ capture.
            </p>
            <img class="oneImage" src="https://i.imgur.com/Z1gtDRJ.png" alt="pawns" />
            <p>
              When a pawn reaches the rank furthest from its starting position
              it must be exchanged as part of the same move on the same square
              for a new queen, rook, bishop or knight of the same colour. The
              player’s choice is not restricted to pieces that have been
              captured previously. This exchange of a pawn for another piece is
              called ‘promotion’ and the effect of the new piece is immediate.
            </p>
            <p>
              There are two different ways of moving the king: by moving to any
              adjoining square not attacked by one or more of the opponent’s
              pieces
            </p>
            <img class="oneImage" src="https://i.imgur.com/sOHMA1E.png" alt="king" />
            <p>
              or by ‘castling’. This is a move of the king and either rook of
              the same colour along the player’s first rank, counting as a
              single move of the king and executed as follows: the king is
              transferred from its original square two squares towards the rook
              on its original square, then that rook is transferred to the
              square the king has just crossed.
            </p>
            <div class="figuresRow">
              <figure>
                <img src="https://i.imgur.com/EgIQNjq.png" alt="before castling" />
                <figcaption>
                  Before white kingside castling<br />Before black queenside
                  castling
                </figcaption>
              </figure>
              <figure>
                <img src="https://i.imgur.com/vqj9TpZ.png" alt="after castling" />
                <figcaption>
                  After white kingside castling<br />After black queenside
                  castling
                </figcaption>
              </figure>
            </div>
            <div class="figuresRow">
              <figure>
                <img src="https://i.imgur.com/9Ywd5iq.png" alt="before castling" />
                <figcaption>
                  Before white queenside castling<br />Before black kingside
                  castling
                </figcaption>
              </figure>
              <figure>
                <img src="https://i.imgur.com/e42pXP9.png" alt="after castling" />
                <figcaption>
                  After white queenside castling<br />After black kingside
                  castling
                </figcaption>
              </figure>
            </div>
            <div class="castleRules">
              <p>The right to castle has been lost:</p>
              <ol style="list-style-type: lower-latin">
                <li>if the king has already moved, or</li>
                <li>with a rook that has already moved.</li>
              </ol>
            </div>
            <div class="castleRules">
              <p>Castling is prevented temporarily:</p>
              <ol style="list-style-type: lower-latin">
                <li>
                  if the square on which the king stands, or the square which it
                  must cross, or the square which it is to occupy, is attacked
                  by one or more of the opponent's pieces, or
                </li>
                <li>
                  if there is any piece between the king and the rook with which
                  castling is to be effected.
                </li>
              </ol>
            </div>
            <p>
              The king is said to be 'in check' if it is attacked by one or more
              of the opponent's pieces, even if such pieces are constrained from
              moving to that square because they would then leave or place their
              own king in check. No piece can be moved that will either expose
              the king of the same colour to check or leave that king in check.
            </p>
          </article>
        </section>
        <section class="main-section" id="the_act_of_moving_the_pieces">
          <header>The act of moving the pieces</header>
          <hr />
          <article>
            <p>Each move must be made with one hand only.</p>
            <p>
              Provided that he first expresses his intention (for example by
              saying „j’adoube“ or “I adjust”), the player having the move may
              adjust one or more pieces on their squares.
            </p>
            <p>
              If the player having the move deliberately touches on the
              chessboard:
            </p>
            <div class="actOfMovingThePieces">
              <ol style="list-style-type: lower-latin">
                <li>
                  one or more of his own pieces, he must move the first piece
                  touched which can be moved
                </li>
                <li>
                  one or more of his opponent’s pieces, he must capture the
                  first piece touched which can be captured
                </li>
                <li>
                  one piece of each colour, he must capture the opponent’s piece
                  with his piece or, if this is illegal, move or capture the
                  first piece touched which can be moved or captured. If it is
                  unclear, whether the player’s own piece or his opponent’s was
                  touched first, the player’s own piece shall be considered to
                  have been touched before his opponent’s.
                </li>
              </ol>
            </div>
            <p>If a player having the move:</p>
            <div class="actOfMovingThePieces">
              <ol style="list-style-type: lower-latin">
                <li>
                  deliberately touches his king and rook he must castle on that
                  side if it is legal to do so
                </li>
                <li>
                  deliberately touches a rook and then his king he is not
                  allowed to castle on that side on that move
                </li>
                <li>
                  intending to castle, touches the king or king and rook at the
                  same time, but castling on that side is illegal, the player
                  must make another legal move with his king (which may include
                  castling on the other side). If the king has no legal move,
                  the player is free to make any legal move
                </li>
                <li>
                  promotes a pawn, the choice of the piece is finalised, when
                  the piece has touched the square of promotion.
                </li>
              </ol>
            </div>
            <p>
              If none of the pieces touched can be moved or captured, the player
              may make any legal move.
            </p>
            <p>
              When, as a legal move or part of a legal move, a piece has been
              released on a square, it cannot be moved to another square on this
              move. The move is then considered to have been made:
            </p>
            <div class="actOfMovingThePieces">
              <ol style="list-style-type: lower-latin">
                <li>
                  in the case of a capture, when the captured piece has been
                  removed from the chessboard and the player, having placed his
                  own piece on its new square, has released this capturing piece
                  from his hand
                </li>
                <li>
                  in the case of castling, when the player's hand has released
                  the rook on the square previously crossed by the king. When
                  the player has released the king from his hand, the move is
                  not yet made, but the player no longer has the right to make
                  any move other than castling on that side, if this is legal
                </li>
                <li>
                  in the case of the promotion of a pawn, when the pawn has been
                  removed from the chessboard and the player's hand has released
                  the new piece after placing it on the promotion square. If the
                  player has released from his hand the pawn that has reached
                  the promotion square, the move is not yet made, but the player
                  no longer has the right to play the pawn to another square.
                </li>
              </ol>
            </div>
            <p>
              The move is called legal when all the relevant requirements have
              been fulfilled. If the move is not legal, another move shall be
              made instead.
            </p>
          </article>
        </section>
        <section class="main-section" id="the_completion_of_the_game">
          <header>The completion of the game</header>
          <hr />
          <article>
            <div class="completionOfTheGame">
              <ol style="list-style-type: lower-latin">
                <li>
                  The game is won by the player who has checkmated his
                  opponent’s king. This immediately ends the game, provided that
                  the move producing the checkmate position was a legal move.
                </li>
                <li>
                  The game is won by the player whose opponent declares he
                  resigns. This immediately ends the game.
                </li>
                <li>
                  The game is drawn when the player to move has no legal move
                  and his king is not in check. The game is said to end in
                  ‘stalemate’. This immediately ends the game, provided that the
                  move producing the stalemate position was legal.
                </li>
                <li>
                  The game is drawn when a position has arisen in which neither
                  player can checkmate the opponent’s king with any series of
                  legal moves. The game is said to end in a ‘dead position’.
                  This immediately ends the game, provided that the move
                  producing the position was legal.
                </li>
                <li>
                  The game is drawn upon agreement between the two players
                  during the game. This immediately ends the game.
                </li>
                <li>
                  The game may be drawn if any identical position is about to
                  appear or has appeared on the chessboard at least three times
                </li>
                <li>
                  The game may be drawn if each player has made at least the
                  last 50 consecutive moves without the movement of any pawn and
                  without any capture.
                </li>
              </ol>
            </div>
          </article>
        </section>
        <section class="main-section" id="the_chess_clock">
          <header>The chess clock</header>
          <hr />
          <article>
            <p>
              ‘Chess clock’ means a clock with two time displays, connected to
              each other in such a way that only one of them can run at one
              time. ‘Clock’ in the Laws of Chess, means one of the two time
              displays. Each time display has a ‘flag’. ‘Flag fall’ means the
              expiration of the allotted time for a player.
            </p>
          </article>
        </section>
        <section class="main-section" id="irregularities">
          <header>Irregularities</header>
          <hr />
          <article>
            <p>
              If a game has begun with colours reversed then it shall continue,
              unless the arbiter rules otherwise.
            </p>
            <p>
              If a player displaces one or more pieces, he shall re-establish
              the correct position on his own time. If necessary, either the
              player or his opponent shall stop the clocks and ask for the
              arbiter’s assistance. The arbiter may penalise the player who
              displaced the pieces.
            </p>
            <p>
              If during a game it is found that pieces have been displaced from
              their squares, the position before the irregularity shall be
              re-instated. If the position immediately before the irregularity
              cannot be determined, the game shall continue from the last
              identifiable position prior to the irregularity. The clocks shall
              be adjusted according to Article 6.13. The game shall then
              continue from this re-instated position.
            </p>
          </article>
        </section>
        <section class="main-section" id="the_recording_of_the_moves">
          <header>The recording of the moves</header>
          <hr />
          <article>
            <p>
              In the course of play each player is required to record his own
              moves and those of his opponent in the correct manner, move after
              move, as clearly and legibily as possible, in the algebraic
              notation, on the scoresheet prescribed for the competition. A
              player may reply to his opponent’s move before recording it, if he
              so wishes. He must record his previous move before making another.
              Both players must record the offer of a draw on the scoresheet.
            </p>
            <p>
              If a player is unable to keep score, an assistant, who must be
              acceptable to the arbiter, may be provided by the player to write
              the moves. His clock shall be adjusted by the arbiter in an
              equitable way.
            </p>
            <p>
              The scoresheet shall be visible to the arbiter throughout the
              game.
            </p>
            <p>
              The scoresheets are the property of the organisers of the event.
            </p>
            <p>
              If a player has less than five minutes left on his clock at some
              stage in a period and does not have additional time of 30 seconds
              or more added with each move, then for the remainder of the period
              he is not obliged to meet the requirements of Article 8.1.
              Immediately after one flag has fallen the player must update his
              scoresheet completely before moving a piece on the chessboard.
            </p>
            <div class="recordingOfTheMoves">
              <ol>
                <li>
                  If neither player is required to keep score, the arbiter or an
                  assistant should try to be present and keep score. In this
                  case, immediately after one flag has fallen, the arbiter shall
                  stop the clocks. Then both players shall update their
                  scoresheets, using the arbiter’s or the opponent’s scoresheet
                </li>
                <li>
                  If only one player is not required to keep score, he must, as
                  soon as either flag has fallen, update his scoresheet
                  completely before moving a piece on the chessboard. Provided
                  it is the player’s move, he may use his opponent’s scoresheet,
                  but must return it before making a move.
                </li>
                <li>
                  If no complete scoresheet is available, the players must
                  reconstruct the game on a second chessboard under the control
                  of the arbiter or an assistant. He shall first record the
                  actual game position, clock times and the number of moves
                  made, if this information is available, before reconstruction
                  takes place.
                </li>
              </ol>
            </div>
            <p>
              If the scoresheets cannot be brought up to date showing that a
              player has overstepped the allotted time, the next move made shall
              be considered as the first of the following time period, unless
              there is evidence that more moves have been made.
            </p>
            <p>
              At the conclusion of the game both players shall sign both
              scoresheets, indicating the result of the game. Even if incorrect,
              this result shall stand, unless the arbiter decides otherwise.
            </p>
          </article>
        </section>
        <section class="main-section" id="the_drawn_game">
          <header>The drawn game</header>
          <hr />
          <article>
            <div class="drawnGame">
              <ol style="list-style-type: lower-latin">
                <li>
                  The rules of a competition may specify that players cannot
                  agree to a draw, whether in less than a specified number of
                  moves or at all, without the consent of the arbiter.
                </li>
                <li>
                  If the rules of a competition allow a draw agreement the
                  following apply:
                  <ol
                    class="level2"
                    style="list-style-type: style type decimal"
                  >
                    <li>
                      A player wishing to offer a draw shall do so after having
                      made a move on the chessboard and before stopping his
                      clock and starting the opponent’s clock. An offer at any
                      other time during play is still valid but Article 12.6
                      must be considered. No conditions can be attached to the
                      offer. In both cases the offer cannot be withdrawn and
                      remains valid until the opponent accepts it, rejects it
                      orally, rejects it by touching a piece with the intention
                      of moving or capturing it, or the game is concluded in
                      some other way.
                    </li>
                    <li>
                      The offer of a draw shall be noted by each player on his
                      scoresheet with a symbol.
                    </li>
                    <li>
                      A claim of a draw, shall be considered to be an offer of a
                      draw.
                    </li>
                  </ol>
                </li>
              </ol>
            </div>
            <p>
              The game is drawn upon a correct claim by the player having the
              move, when the same position, for at least the third time (not
              necessarily by a repetition of moves):
            </p>
            <div class="drawnGame">
              <ol style="list-style-type: lower-latin">
                <li>
                  is about to appear, if he first writes his move on his
                  scoresheet and declares to the arbiter his intention to make
                  this move, or
                </li>
                <li>
                  has just appeared, and the player claiming the draw has the
                  move.
                </li>
              </ol>
            </div>
            <p>
              Positions as in (a) and (b) are considered the same, if the same
              player has the move, pieces of the same kind and colour occupy the
              same squares, and the possible moves of all the pieces of both
              players are the same. Positions are not the same if a pawn that
              could have been captured en passant can no longer be captured in
              this manner. When a king or a rook is forced to move, it will lose
              its castling rights, if any, only after it is moved.
            </p>
            <p>
              The game is drawn, upon a correct claim by the player having the
              move, if:
            </p>
            <div class="drawnGame">
              <ol style="list-style-type: lower-latin">
                <li>
                  he writes his move on his scoresheet and declares to the
                  arbiter his intention to make this move, which shall result in
                  the last 50 moves having been made by each player without the
                  movement of any pawn and without any capture, or
                </li>
                <li>
                  the last 50 consecutive moves have been made by each player
                  without the movement of any pawn and without any capture.
                </li>
              </ol>
            </div>
            <p>
              The game is drawn when a position is reached from which a
              checkmate cannot occur by any possible series of legal moves. This
              immediately ends the game, provided that the move producing this
              position was legal.
            </p>
          </article>
        </section>
        <section class="main-section" id="quickplay_finish">
          <header>Quickplay Finish</header>
          <hr />
          <article>
            <p>
              A ‘quickplay finish’ is the phase of a game when all the
              (remaining) moves must be made in a limited time.
            </p>
            <p>
              If the player, having the move, has less than two minutes left on
              his clock, he may claim a draw before his flag falls. He shall
              summon the arbiter and may stop the clocks.
            </p>
            <div class="quickplayFinish">
              <ol style="list-style-type: lower-latin">
                <li>
                  If the arbiter agrees the opponent is making no effort to win
                  the game by normal means, or that it is not possible to win by
                  normal means, then he shall declare the game drawn. Otherwise
                  he shall postpone his decision or reject the claim.
                </li>
                <li>
                  If the arbiter postpones his decision, the opponent may be
                  awarded two extra minutes and the game shall continue, if
                  possible in the presence of an arbiter. The arbiter shall
                  declare the final result later in the game or as soon as
                  possible after a flag has fallen. He shall declare the game
                  drawn if he agrees that the final position cannot be won by
                  normal means, or that the opponent was not making sufficient
                  attempts to win by normal means.
                </li>
                <li>
                  If the arbiter has rejected the claim, the opponent shall be
                  awarded two extra minutes time.
                </li>
                <li>The decision of the arbiter shall be final.</li>
              </ol>
            </div>
          </article>
        </section>
        <section class="main-section" id="points">
          <header>Points</header>
          <hr />
          <article>
            <p>
              Unless announced otherwise in advance, a player who wins his game,
              or wins by forfeit, scores one point (1), a player who loses his
              game, or forfeits scores no points (0) and a player who draws his
              game scores a half point (½).
            </p>
          </article>
        </section>
        <section class="main-section" id="the_conduct_of_the_players">
          <header>The conduct of the players</header>
          <hr />
          <article>
            <p>
              The players shall take no action that will bring the game of chess
              into disrepute.
            </p>
            <p>
              Players are not allowed to leave the ‘playing venue’ without
              permission from the arbiter. The playing venue is defined as the
              playing area, rest rooms, refreshment area, area set aside for
              smoking and other places as designated by the arbiter. The player
              having the move is not allowed to leave the playing area without
              permission of the arbiter.
            </p>
            <div class="conductOfeThePlayers">
              <ol style="list-style-type: lower-latin">
                <li>
                  During play the players are forbidden to make use of any
                  notes, sources of information or advice, or analyse on another
                  chessboard.
                </li>
                <li>
                  Without the permission of the arbiter a player is forbidden to
                  have a mobile phone or other electronic means of communication
                  in the playing venue, unless they are completely switched off.
                  If any such device produces a sound, the player shall lose the
                  game. The opponent shall win. However, if the opponent cannot
                  win the game by any series of legal moves, his score shall be
                  a draw.
                </li>
                <li>
                  Smoking is permitted only in the section of the venue
                  designated by the arbiter.
                </li>
              </ol>
            </div>
            <p>
              The scoresheet shall be used only for recording the moves, the
              times of the clocks, the offers of a draw, and matters relating to
              a claim and other relevant data.
            </p>
            <p>
              Players who have finished their games shall be considered to be
              spectators.
            </p>
            <p>
              It is forbidden to distract or annoy the opponent in any manner
              whatsoever. This includes unreasonable claims, unreasonable offers
              of a draw or the introduction of a source of noise into the
              playing area.
            </p>
            <p>
              Persistent refusal by a player to comply with the Laws of Chess
              shall be penalised by loss of the game. The arbiter shall decide
              the score of the opponent.
            </p>
            <p>
              If both players are found guilty, the game shall be declared lost
              by both players.
            </p>
          </article>
        </section>
        <section class="main-section" id="the_role_of_the_arbiter">
          <header>The role of the Arbiter</header>
          <hr />
          <article>
            <p>
              The arbiter shall see that the Laws of Chess are strictly
              observed.
            </p>
            <p>
              The arbiter shall act in the best interest of the competition. He
              should ensure that a good playing environment is maintained and
              that the players are not disturbed. He shall supervise the
              progress of the competition.
            </p>
            <p>
              The arbiter shall observe the games, especially when the players
              are short of time, enforce decisions he has made and impose
              penalties on players where appropriate.
            </p>
            <p>The arbiter can apply one or more of the following penalties:</p>
            <div class="roleOfTheArbiter">
              <ol style="list-style-type: lower-latin">
                <li>warning</li>
                <li>increasing the remaining time of the opponent</li>
                <li>reducing the remaining time of the offending player</li>
                <li>declaring the game to be lost</li>
                <li>
                  reducing the points scored in the game by the offending party
                </li>
                <li>
                  increasing the points scored in the game by the opponent to
                  the maximum available for that game
                </li>
                <li>expulsion from the event.</li>
              </ol>
            </div>
            <p>
              The arbiter may award either or both players additional time in
              the event of external disturbance of the game.
            </p>
            <p>
              The arbiter must not intervene in a game except in cases described
              by the Laws of Chess. He shall not indicate the number of moves
              made, except in applying Article 8.5, when at least one flag has
              fallen. The arbiter shall refrain from informing a player that his
              opponent has completed a move or that the player has not pressed
              his clock.
            </p>
            <div class="roleOfTheArbiter">
              <ol style="list-style-type: lower-latin">
                <li>
                  Spectators and players in other games are not to speak about
                  or otherwise interfere in a game. If necessary, the arbiter
                  may expel offenders from the playing venue. If someone
                  observes an irregularity, he may inform only the arbiter.
                </li>
                <li>
                  Unless authorised by the arbiter, it is forbidden for anybody
                  to use a mobile phone or any kind of communication device in
                  the playing venue and any contiguous area designated by the
                  arbiter.
                </li>
              </ol>
            </div>
          </article>
        </section>
        <section class="main-section" id="fide">
          <header>FIDE</header>
          <hr />
          <article>
            <p>
              Member federations may ask FIDE to give an official decision about
              problems relating to the Laws of Chess.
            </p>
          </article>
        </section>
        <section class="main-section" id="reference">
          <header>Reference</header>
          <hr />
          <article>
            <p>
              All the documentation in this page is taken from
              <a class="fideLink" href="https://fide.com/">FIDE</a>.
            </p>
          </article>
        </section>
      </main>
    </div>

              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&family=Open+Sans:wght@400;500;700&family=Roboto&display=swap');


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

body {
  max-width: 1440px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
  color: #4d4e53;
  background-color: #ffffff;
  font-family: 'Open Sans', sans-serif;
  position: relative;
}

.container {
    width: 100%;
    display: grid;
    grid-template-columns: 300px 1fr;
}

header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

header .topHeader {
    height: 70px;
    background-color: #0075D9;
    color: #fff;
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
}

.topHeader a {
    text-decoration: none;
    font-size: 1.5rem;
    color: #fff;
}

.topHeader h1 {
    margin-left: 30px;
    font-size: 1.5rem;
}

.topHeader svg {
    margin: 0 0 0 20px;
    width: 70px;
}

.hamburger {
    display: none;
    color: #fff;
    cursor: pointer;
}

.hamburger i {
    font-size: 1.5rem;
}

/* .hamburger:hover {
    transform: scale(1.2);
} */

/* .line {
    height: 2px;
    background-color: #fff;
    width: 24px;
    margin-bottom: 3px;
    transition: all .1s ease;
}

.hamburger:hover .line_1 {
    transform: translateY(-1px);
}

.hamburger:hover .line_3 {
    transform: translateY(1px);
} */

#navbar {
    height: calc(100vh - 70px);
    min-width: 290px;
    width: 300px;
    text-align: left;
    background-color: #f5f5f5;
    border-right: 3px solid rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    line-height: 1.5;
}

#main-doc {
    padding: 2em 3em;
    /* width: calc(100vw - 300px); */
    height: calc(100vh - 70px);
    overflow-y: auto;
    line-height: 1.5;
    position: relative;
}   

section {
    margin-bottom: 30px;
}

#navbar li {
    list-style: none;
    transition: all 0.1s ease-in;
    max-width: 300px;   
}

#navbar a {
    display: block;
    text-decoration: none;
    color: #000;
    transition: all 0.1s ease-in;
    font-family: 'Open Sans';
    font-size: 0.9rem;
    font-weight: 400;
    max-width: 300px;
    height: 100%;
    padding: 1.125rem 2rem;
}

#navbar li:hover {
    background-color: #fff;
}

#navbar a:hover {
    color: #000;;
}

#navbar li.active {
    background-color: #33a0ff;
}

#navbar a.active {
    color: #fff;
    font-weight: 500;
} 

.one_header {
    display: none;
}

code {
    display: none;
}

#main-doc header {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: #0075D9;
} 

#main-doc hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1);
}

#main-doc p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

.pieces_symbols {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 300px;
    max-width: 100%;
    margin: auto;
    margin-bottom: 20px;
}

.pieces_symbols div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chessPieces {
    display: inline-block;
    font-weight: 500;
    font-size: 2rem;
}

.oneImage {
    width: 250px;
    height: 250px;
    margin: 20px auto;
    display: block;
}

.figuresRow {
    display: flex;
    justify-content: center;
    margin: 20px;
}

.figuresRow figure {
    display: inline-block;
    margin: 0 auto;
}

.figuresRow img {
    width: 200px;
    height: 200px;
}

.figuresRow figcaption {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: small;
    text-align: center;
}

.castleRules, 
.roleOfTheArbiter, 
.conductOfeThePlayers, 
.actOfMovingThePieces, 
.quickplayFinish,
.drawnGame,
.recordingOfTheMoves,
.completionOfTheGame {
    margin: 20px 30px;
}

.level2 {
    margin: 0 20px;
}

.level2 li {
    padding: 0 0 0 20px;
}

.castleRules li, 
.roleOfTheArbiter li, 
.conductOfeThePlayers li, 
.actOfMovingThePieces li,
.quickplayFinish li,
.drawnGame li,
.recordingOfTheMoves li,
.completionOfTheGame li {
    padding: 0 0 0 20px;
}

.fideLink {
    text-decoration: none;
    color: #4d4e53;
}

.scrollUp {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 15;
    font-size: 1.5rem;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    background-color:#fff;
    color: #0075D9;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #0075D9;
    transition: all 0.25s ease;
}

.scrollUp:hover {
    color: #fff;
    background-color: #0075D9;
}

/*     MEDIA     */

@media screen and (prefers-reduced-motion: no-preference) {
    #main-doc {
      scroll-behavior: smooth;
    }
  }

@media screen and (max-width: 1024px) {
    .container {
        display: grid;
        grid-template-columns: 1fr;
    }

    #navbar {
        position: absolute;
        right: 0;
        display: none;
        min-width: auto;
        width: 100%;
        text-align: center;
        background-color: #f5f5f5;
        border: none;
        line-height: 1.5;
        z-index: 20;
    }

    #navbar a {
        font-size: 1rem;
        font-weight: 500;
    }
    
    #navbar li:hover {
        background-color: #33a0ff; /*#fff*/
    }
    
    #navbar a:hover {
        color: #fff;  /*#000*/
    }
    
    #navbar li.active {
        background-color: #33a0ff; /*#33a0ff*/
    }
    
    #navbar a.active {
        color: #fff;
        font-weight: 500;
    } 

    #navbar.active {
        display: block;
    }

    #navbar li {
        list-style: none;
        transition: all 0.2s ease-in;
        width: 100%;   
        max-width: 100%;
    }
    
    #navbar a {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    #main-doc {
        padding: 2em 3em;
        width: 100%;
        overflow-y: auto;
        line-height: 1.5;
    }

    #main-doc header {
        font-size: 1.7rem;
    }

    .hamburger {
        display: block;
        transition: transform 0.25s ease;
        position: absolute;
        right: 30px;
    }

    .active .line_1 {
        transform: rotate(-40deg) translateY(6.5px);
        background-color: #fff;
    }

    .active .line_2 {
        opacity: 0;
    }

    .active .line_3 {
        transform: rotate(40deg) translateY(-6.5px);
        background-color: #fff;
    }
    
}

@media screen and (max-width: 768px) {
    #main-doc {
        padding: 20px;
    }
    #main-doc header {
        font-size: 1.5rem;
    }

    .figuresRow {
        flex-direction: column;
        align-items: center;
        margin: 0;
    }

    .figuresRow figure {
        margin: 20px;
    }
}


@media screen and (max-width: 480px) {

    .topHeader h1 {
        font-size: 1.2rem;
    }

}

@media screen and (max-width: 375px) {

    .topHeader h1 {
        font-size: 1rem;
        margin-left: 10px;
    }

    .hamburger {
        right: 20px;
    }

}
              
            
!

JS

              
                const menuArticles = document.querySelectorAll('li');
const menuLinks = document.querySelectorAll('#navbar a');

menuArticles.forEach(article => {
    article.addEventListener('click', () => {
        article.classList.add('active');
    })
})

menuLinks.forEach(link => {
    link.addEventListener('click', () => {
        removeActiveClasses()
        link.classList.add('active');
    })
})

function removeActiveClasses() {
    menuArticles.forEach(article => {
        article.classList.remove('active');
        })
    menuLinks.forEach(link => {
        link.classList.remove('active');
            })
}

// Navigation

const hamburger = document.querySelector('.hamburger')
const navigation = document.querySelector('#navbar')
const nav_links = document.querySelectorAll('.nav-link')

hamburger.addEventListener('click', () => {
  navigation.classList.toggle('active')
})


nav_links.forEach(nav_link => {
nav_link.addEventListener('click', () => {
    navigation.classList.toggle('active')
  })
})

// Scroll button

var scrollButton = document.querySelector(".scrollUp");

scrollButton.addEventListener('click', () => {
  topFunction()
})

document.querySelector('#main-doc').onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.querySelector('#main-doc').scrollTop > 330 || document.documentElement.scrollTop > 330) {
    scrollButton.style.display = "block";
  } else {
    scrollButton.style.display = "none";
  }
}

function topFunction() {
  document.querySelector('#main-doc').scrollTop = 0;
}


              
            
!
999px

Console