@font-face{font-family:poppins;src:url(/fonts/Poppins-Regular.ttf)format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:poppins;src:url(/fonts/Poppins-Thin.ttf)format("truetype");font-weight:100;font-style:normal;font-display:swap}*{margin:0;padding:0;box-sizing:border-box;font-family:poppins}body{color:#222;line-height:1.5}a{color:#0b57d0;text-decoration:none}header{position:fixed;top:0;left:0;right:0;.navbar { z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 12px 28px; margin: 12px; backdrop-filter: blur(14px); background: rgba(255, 255, 255, 0.75); border-radius: 14px; border: 1px solid rgba(0, 0, 0, 0.06); } .logo { color: #111; font-size: 25px; } .nav-center { display: flex; gap: 28px; } .nav-center a { text-decoration: none; color: #444; font-size: 15px; font-weight: 500; transition: .25s; position: relative; } .nav-center a::after { content: ""; position: absolute; bottom: -6px; left: 0; width: 0%; height: 1px; background: #9703fd; transition: .3s; } .nav-center a:hover::after { width: 100%; } .nav-center a:hover { color: #9703fd; } .nav-right { display: flex; align-items: center; gap: 14px; } .menu-btn { display: none; font-size: 22px; cursor: pointer; } @media(max-width:900px) { .nav-center { display: none; } .menu-btn { display: block; } } @media(max-width:480px) { .navbar { margin: 6px; padding: 10px 16px; } }}footer{margin-top:40px;.footer-content { margin: 0px auto; max-width: 900px; width: 95%; .footer-menu { display: flex; list-style: none; justify-content: space-evenly; border-bottom: 1px solid #eaeaea; padding-bottom: 20px; a { color: #222; font-size: 12px; } a:hover { color: #9703fd; } } .copyright { text-align: center; padding: 20px 0px; } }}main{margin-top:63.5px;padding-top:1px;.posts { margin: 0px auto; max-width: 900px; width: 95%; h1, h2 { margin: 25px 0px; } p, ul { margin: 15px 0px; line-height: 1.5; letter-spacing: .198px; color: #575757; } li { margin: 5px 0px; } ul { margin-left: 20px; ::marker { color: #9703fd; } } .accordion-item { border: 1px solid #e5e5e5; border-radius: 8px; margin-bottom: 10px; overflow: hidden; } .accordion-header { width: 100%; background: #f7f7f7; border: none; padding: 14px; font-size: 16px; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; svg { min-width: 1rem; height: 1rem; width: 1rem; vertical-align: middle; transition: all 0.2s ease; } } .accordion-header:hover { background: #efefef; } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.2s ease; background: white; } .accordion-body { padding: 20px; } .accordion-item.active { .accordion-header svg { transform: rotate(90deg); } .accordion-content { max-height: 500px; } } .notice { margin: 25px 0px; border: 1px solid; padding: 1.5rem; border-color: currentColor; border-radius: 8px; } .notice-head { display: flex; align-items: center; } .notice-head svg { margin-right: 0.75rem; } .notice-head p { font-size: 1.25rem; font-weight: 600; color: currentColor; margin: 0; line-height: 1; } .notice-body { margin-top: 0.75rem; } .notice-body p { margin: 0; color: currentColor; } .notice.note { color: #293df2; background-color: rgba(41, 61, 242, 0.15); } .notice.abstract { color: #0ca68c; background-color: rgba(12, 166, 140, 0.15); } .notice.info { color: #09c3ed; background-color: rgba(9, 195, 237, 0.15); } .notice.todo { color: #8d05a8; background-color: rgba(141, 5, 168, 0.15); } .notice.tip { color: #19cfb0; background-color: rgba(25, 207, 176, 0.15); } .notice.success { color: #04d904; background-color: rgba(4, 217, 4, 0.15); } .notice.question { color: #e38902; background-color: rgba(227, 137, 2, 0.15); } .notice.warning { color: #e38902; background-color: rgba(227, 137, 2, 0.15); } .notice.failure { color: #e31a00; background-color: rgba(227, 26, 0, 0.15); } .notice.danger { color: #e31a00; background-color: rgba(227, 26, 0, 0.15); } .notice.bug { color: #e31a00; background-color: rgba(227, 26, 0, 0.15); } .notice.example { color: #b83acf; background-color: rgba(184, 54, 207, 0.15); } .notice.quote { color: #918e91; background-color: rgba(145, 142, 145, 0.15); } .dark .notice-head p { color: #d1d5db; } picture { display: block; border-radius: 10px; overflow: hidden; img { width: 100%; height: auto; } } }}