/* COPYRIGHT 2025-2026 RIHAM S. ALL RIGHTS RESERVED. */

   @font-face { font-family: 'Ubuntu Sans'; font-style: normal; font-weight: 435; font-stretch: 100%; font-display: swap; src: url('../dist/asset/Blogs.WOFF2') format('woff2'); }  @font-face { font-family: 'Ubuntu Sans'; font-style: italic; font-weight: 600; font-stretch: 100%; font-display: swap; src: url('../dist/asset/Riham.WOFF2') format('woff2'); }  @font-face { font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url('../dist/asset/PTSerif.WOFF2') format('woff2'); }    @font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap; src: url('../dist/asset/GoogleSans.WOFF2') format('woff2'); }  @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 485; font-display: swap; src: url(../dist/asset/Minesweeper.WOFF2) format('woff2'); }   @media (max-width: 736px) { #dialog { display: block; transition: transform 0.3s ease; transform: translateX(-100%); } #dialog[open] { transform: translateX(0) } } @media (min-width: 736px) { [data-tag="footer"] > div { flex-direction: row !important; justify-content: space-between; } } @media (max-width: 380px) { html { font-size: 14px } } @media (min-width: 1024px) { html { font-size: 18px } }  *, *::after, *::before { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; touch-action: manipulation; }  :root { --font-size-sm: clamp(.15rem, 6.45vw, .85rem); --font-size-by: clamp(.3rem, 6.6vw, 1rem); --font-size-rg: clamp(.4rem, 6.7vw, 1.1rem); --font-size-hr: clamp(.7rem, 7vw, 1.4rem); --font-size-jb: clamp(.9rem, 7.2vw, 1.6rem); --font-size-dp: clamp(1.1rem, 7.4vw, 1.8rem); --lh-body: 1.6; --lh-heading: 1.4; --lh-hero: 1.175; --fw-bold: 600; --fw-semibold: 550; --fw-regular: 485; --fw-normal: 435; --fw-thin: 400; --danger: #A67582; } [data-scheme="default"] { --base-100: #FAFAFA; --base-200: var(--base-100); --base-300: #E2E2E2; --text-100: #202020; --text-200: var(--text-100); --border-100: #CCCCCC; --border-200: black; --border-style: dashed; --olive: black; --danger: #8B0000; } [data-scheme="dark"] { --base-100: #242424; --base-200: #282828; --base-300: #363636; --text-100: #E4E4E4; --text-200: #C0C0C0; --border-100: #404040; --border-200: #404040; --border-style: solid; --olive: #82A675; } [data-scheme="black"] { --base-100: #202020; --base-200: #282828; --text-100: #E4E4E4; --text-200: var(--text-100); --border-100: #323232; --border-200: #404040; --border-style: solid; --olive: #82A675; }   [hidden] { opacity: 0; pointer-events: none; position: absolute; z-index: -1; width: 0; height: 0; overflow: hidden; } [data-style="sr-only"] { width: 1px; overflow: hidden; height: 1px; position: absolute; white-space: nowrap; clip: rect(0, 0, 0, 0); clip-path: inset(50%); margin: -1px; padding: 0; border: 0; }  [data-scroll="none"] { scrollbar-width: none; -ms-overflow-style: none; } [data-scroll="none"]::-webkit-scrollbar { display: none }  button.unstyled { border: none; background: none; color: inherit; cursor: pointer; } a.unstyled { font: inherit; color: inherit; cursor: pointer; text-decoration: none; } ul.unstyled { list-style: none } input.unstyled { font: inherit; border: 0; background: none; color: inherit; line-height: normal; appearance: none; -webkit-appearance: none; -moz-appearance: none; outline: none; }  [data-strip="green"] { border-left: 0.175rem solid #658C58 }[data-visual="olive"] [data-tag="header-element"] { border-top-width: 0.5rem; border-top-style: solid; border-top-color: transparent; border-image-source: linear-gradient(to right, rgb(49, 105, 78) 0%, rgb(49, 105, 78) 14.28%, rgb(101, 140, 88) 14.28%, rgb(101, 140, 88) 28.56%, rgb(187, 200, 99) 28.56%, rgb(187, 200, 99) 42.84%, rgb(240, 228, 145) 42.84%, rgb(240, 228, 145) 57.12%, rgb(187, 200, 99) 57.12%, rgb(187, 200, 99) 71.4%, rgb(101, 140, 88) 71.4%, rgb(101, 140, 88) 85.68%, rgb(49, 105, 78) 85.68%, rgb(49, 105, 78) 100%); border-image-slice: 1; } [data-visual="olive"] { --brand-color: var(--olive); } [data-style="google"]:focus-within { border-color: var(--brand-color) } [data-style="google"]:focus-within label { color: var(--brand-color) } [data-style="google"] { caret-color: var(--brand-color); border-width: 0.15rem !important; } [data-style="google"].invalid { caret-color: var(--danger) } [data-style="google"].invalid:focus-within { border-color: var(--danger) } [data-style="google"].invalid:focus-within label { color: var(--danger) } label:has([data-style="radio"]:checked) { border-color: var(--brand-color); } [data-style="radio"]+span::before { display: inline-flex; content: ""; width: 1.25rem; height: 1.25rem; border: 0.065rem solid var(--border-100); border-radius: 50%; position: relative; cursor: pointer; } [data-style="radio"]:checked+span::before { border-color: var(--brand-color); box-shadow: inset 0 0 0 0.3rem var(--brand-color); } [data-style="border-tab"] { border-bottom: 0.16rem solid transparent } [data-style="border-tab"]:has(a[aria-current="true"]) { color: var(--brand-color); border-color: var(--brand-color); } [data-scheme="dark"] [data-style="minesweeper"] { --red: #FF6B6B; --brown: #AA8E6B; --blue: #6BAAFF; --cyan: #6BD4FF; --lime: #6BFF8F; --yellow: #FFD66B; --magenta: #FF6BD4; --violet: #B66BFF; } [data-style="minesweeper"] { background-color: var(--base-100); border: 0.065rem solid var(--border-100); display: grid; gap: 0.3rem; border-radius: 0.25rem; padding: 0.3rem; width: fit-content; } [data-style="minesweeper"] .square { width: 2.1rem; height: 2.1rem; background-color: var(--base-200); border: 0.065rem solid var(--border-100); border-radius: 0.125rem; position: relative; cursor: pointer; font-family: 'Nunito', sans-serif; } [data-style="minesweeper"] .square.unswept, [data-style="minesweeper"] .square.flag { background-color: var(--base-300) } [data-style="minesweeper"] .square.one { color: var(--blue) } [data-style="minesweeper"] .square.two { color: var(--lime) } [data-style="minesweeper"] .square.three { color: var(--magenta) } [data-style="minesweeper"] .square.four { color: var(--cyan) } [data-style="minesweeper"] .square.five { color: var(--violet) } [data-style="minesweeper"] .square.six, [data-style="minesweeper"] .square.unsafe { color: var(--yellow) } [data-style="minesweeper"] .square.seven, [data-style="minesweeper"] .square.flag { color: var(--red) } [data-style="minesweeper"] .square.eight { color: var(--brown) } [data-style="minesweeper"] .square.clear::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; background-color: var(--red); -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>') center / contain no-repeat; mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>') center / contain no-repeat; } .sm {	font-size: var(--font-size-sm) } .by {	font-size: var(--font-size-by) } .rg {	font-size: var(--font-size-rg) } .hr { font-size: var(--font-size-hr) } .jb {	font-size: var(--font-size-jb) } .dp {	font-size: var(--font-size-dp) } .lh-body { line-height: var(--lh-body) } .lh-heading {	line-height: var(--lh-heading) } .lh-hero { line-height: var(--lh-hero) } .fw-bold { font-weight: var(--fw-bold) } .fw-semibold { font-weight: var(--fw-semibold) } .fw-regular {	font-weight: var(--fw-regular) } .fw-normal { font-weight: var(--fw-normal) } .fw-thin { font-weight: var(--fw-thin) } .sans-serif { font-family: 'Google Sans Flex', sans-serif } .serif { font-family: 'PT Serif', serif } .avatar {	font-family: 'Ubuntu Sans', sans-serif } .z-5 { z-index: 125 } .z-6 { z-index: 150 } .top-0 { top: 0 } .left-0 { left: 0 } .bottom-0 { bottom: 0 } .p-4 { padding: 1rem } .p-2y { padding-top: 0.5rem; padding-bottom: 0.5rem; } .p-3y { padding-top: 0.75rem; padding-bottom: 0.75rem; } .p-4y { padding-top: 1rem; padding-bottom: 1rem; } .p-5y { padding-top: 1.25rem; padding-bottom: 1.25rem; } .p-6y { padding-top: 1.5rem; padding-bottom: 1.5rem; } .p-8y { padding-top: 2rem; padding-bottom: 2rem; } .p-1x { padding-left: 0.25rem; padding-right: 0.25rem; } .p-2x { padding-left: 0.5rem; padding-right: 0.5rem; } .p-3x { padding-left: 0.75rem; padding-right: 0.75rem; } .p-4x { padding-left: 1rem; padding-right: 1rem; } .p-5x { padding-left: 1.25rem; padding-right: 1.25rem; } .p-8x { padding-left: 2rem; padding-right: 2rem; } .p-11x { padding-left: 2.75rem; padding-right: 2.75rem; } .flex { display: flex } .flex-center { align-items: center; justify-content: center; } .justify-start { justify-content: flex-start } .justify-seperate { justify-content: space-between } .flex-wrap { flex-wrap: wrap } .flex-column { flex-direction: column } .g-1 { gap: .25rem } .g-2 { gap: .5rem } .g-3 { gap: .75rem } .g-4 { gap: 1rem } .g-5 { gap: 1.25rem } .g-6 { gap: 1.5rem } .i { font-style: italic } .u { border-bottom: 0.065rem solid currentColor } .text-center { text-align: center } .text-right { text-align: right } .text-left { text-align: left } .nowrap { white-space: nowrap } .relative { position: relative } .absolute { position: absolute } .fixed { position: fixed } .sticky { position: sticky } .noselect { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .slash { list-style: none } .slash li:not(:last-child)::after { padding-left: 0.27rem; content: "/"; } .w-0 { width: 100% } .h-0 { height: 100% } .m-2b { margin-bottom: .5rem } .m-6b { margin-bottom: 1.5rem } .m-8b { margin-bottom: 2rem } .m-2t { margin-top: .5rem } .m-3t { margin-top: .75rem } .m-5t { margin-top: 1.25rem } .m-6t { margin-top: 1.5rem } .m-8t { margin-top: 2rem } .b-t { border-top: var(--r) } .b-b { border-bottom: var(--r) } .b-all { border: var(--r) } .solid { --r: 0.065rem solid currentColor } .varied { --r: 0.09rem var(--border-style) currentColor } .circle { border-radius: 50% } .base-100 { background-color: var(--base-100) } .text-100 { color: var(--text-100) } .border-100 { border-color: var(--border-100) } .base-200 { background-color: var(--base-200) } .text-200 { color: var(--text-200) } .border-200 { border-color: var(--border-200) } .border-transparent { border: none } .pointer { cursor: pointer } .o-0 { opacity: 0 } .o-3 { opacity: .7 } .o-4 { opacity: .8 } .viewport-only { min-height: 100vh; max-height: 100vh; min-height: 100dvh; max-height: 100dvh; } .avatar-by { width: 2.75rem; height: 2.75rem; } .r-1 { border-radius: 0.15rem } .r-2 { border-radius: 0.25rem } .x-center { margin: 0 auto } .flex-1 { flex: 1 } .p-0t { padding-top: 0 } .modal { max-height: 70%; border-radius: 0.8rem 0.8rem 0 0; } .s-d { overflow: hidden } .s-x { overflow-x: auto } .s-y { overflow-y: auto } .s-i { scrollbar-width: none; -ms-overflow-style: none; } .s-i::-webkit-scrollbar {	display: none } .disabled { touch-action: none; pointer-events: none; } @media (min-width: 736px) { .modal { border-radius: 0.8rem; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 50%; min-height: 83%; max-height: 83%; border: 0.09rem solid var(--border-100); } }