CINXE.COM

<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="generator" content="Gatsby 5.13.3"/><meta name="theme-color" content="#3a3a3a"/><meta name="robots" content="index, follow" data-gatsby-head="true"/><meta name="description" content="Learn simple ways to style the HTML details element, which is a very useful element for revealing and hiding bits of content on a web page." data-gatsby-head="true"/><meta name="image" content="https://uploads.sitepoint.com/wp-content/uploads/2023/10/1697843489style-html-details-element.jpg" data-gatsby-head="true"/><meta name="twitter:card" content="summary_large_image" data-gatsby-head="true"/><meta name="twitter:title" content="20 Simple Ways to Style the HTML details Element — SitePoint" data-gatsby-head="true"/><meta property="twitter:account_id" content="15743570" data-gatsby-head="true"/><meta name="twitter:image" content="https://uploads.sitepoint.com/wp-content/uploads/2023/10/1697843489style-html-details-element.jpg" data-gatsby-head="true"/><meta name="twitter:description" content="Learn simple ways to style the HTML details element, which is a very useful element for revealing and hiding bits of content on a web page." data-gatsby-head="true"/><meta property="og:title" content="20 Simple Ways to Style the HTML details Element — SitePoint" data-gatsby-head="true"/><meta property="og:description" content="Learn simple ways to style the HTML details element, which is a very useful element for revealing and hiding bits of content on a web page." data-gatsby-head="true"/><meta property="og:type" content="article" data-gatsby-head="true"/><meta property="og:image" content="https://uploads.sitepoint.com/wp-content/uploads/2023/10/1697843489style-html-details-element.jpg" data-gatsby-head="true"/><meta name="twitter:label1" content="Written by" data-gatsby-head="true"/><meta name="twitter:data1" content="Ralph Mason" data-gatsby-head="true"/><meta name="article:published_time" content="2023-10-26T13:00:07+00:00" data-gatsby-head="true"/><meta name="article:modified_time" content="2024-11-14T02:15:25+00:00" data-gatsby-head="true"/><meta name="article:author" content="Ralph Mason" data-gatsby-head="true"/><style data-href="/styles.4d6f4e406004d7515152.css" data-identity="gatsby-global-css">@font-face{font-display:swap;font-family:Inter Variable;font-style:normal;font-weight:100 900;src:url(/static/inter-cyrillic-ext-wght-normal-92dcb004dd66a14761da87698426da2b.woff2) format("woff2-variations");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-display:swap;font-family:Inter Variable;font-style:normal;font-weight:100 900;src:url(/static/inter-cyrillic-wght-normal-dd1eb0afa10711830d27117387b95dc0.woff2) format("woff2-variations");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-display:swap;font-family:Inter Variable;font-style:normal;font-weight:100 900;src:url(/static/inter-greek-ext-wght-normal-f8ed8c6b512a482bd1ae4d471ed6c3e2.woff2) format("woff2-variations");unicode-range:u+1f??}@font-face{font-display:swap;font-family:Inter Variable;font-style:normal;font-weight:100 900;src:url(/static/inter-greek-wght-normal-8cf014c12c3518f736abd4ca7fa6721d.woff2) format("woff2-variations");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-display:swap;font-family:Inter Variable;font-style:normal;font-weight:100 900;src:url(/static/inter-vietnamese-wght-normal-03627a8b5fe27d055e5ce0cb06ca0f14.woff2) format("woff2-variations");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-display:swap;font-family:Inter Variable;font-style:normal;font-weight:100 900;src:url(/static/inter-latin-ext-wght-normal-fbd6dc6ea3a2a849b6fc2c03391bece0.woff2) format("woff2-variations");unicode-range:u+0100-02af,u+0304,u+0308,u+0329,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-display:swap;font-family:Inter Variable;font-style:normal;font-weight:100 900;src:url(/static/inter-latin-wght-normal-e62404dc3261fb537f3a211edf6a2682.woff2) format("woff2-variations");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd} /* ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com */*,:after,:before{border:0 solid #e0dfe1;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter Variable,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#7f7d83}input::placeholder,textarea::placeholder{color:#7f7d83}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}[multiple],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],input:where(:not([type])),select,textarea{--tw-shadow:0 0 #0000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#4e4d51;border-radius:0;border-width:1px;font-size:1rem;line-height:1.5rem;padding:.5rem .75rem}[multiple]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=email]:focus,[type=month]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=time]:focus,[type=url]:focus,[type=week]:focus,input:where(:not([type])):focus,select:focus,textarea:focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);border-color:#2563eb;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px}input::-moz-placeholder,textarea::-moz-placeholder{color:#4e4d51;opacity:1}input::placeholder,textarea::placeholder{color:#4e4d51;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-bottom:0;padding-top:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%234E4D51' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple],[size]:where(select:not([size="1"])){background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{--tw-shadow:0 0 #0000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;background-origin:border-box;border-color:#4e4d51;border-width:1px;color:#2563eb;display:inline-block;flex-shrink:0;height:1rem;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:1rem}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px}[type=checkbox]:checked,[type=radio]:checked{background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:transparent}[type=checkbox]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")}@media (forced-colors:active){[type=checkbox]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=radio]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}@media (forced-colors:active){[type=radio]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:checked:focus,[type=checkbox]:checked:hover,[type=radio]:checked:focus,[type=radio]:checked:hover{background-color:currentColor;border-color:transparent}[type=checkbox]:indeterminate{background-color:currentColor;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:transparent}@media (forced-colors:active){[type=checkbox]:indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{background-color:currentColor;border-color:transparent}[type=file]{background:unset;border-color:inherit;border-radius:0;border-width:0;font-size:unset;line-height:inherit;padding:0}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}:root{--typescale:1.15;--baselineratio:1.77778;--basegrid:32px;--basegrid-tablet:28px;--basegrid-laptop:32px;--basegrid-wide:36px;--baseline:calc(var(--baselineratio)*1rem);--basefont:calc(var(--basegrid)/var(--baselineratio));--basefont-tablet:calc(var(--basegrid-tablet)/var(--baselineratio));--basefont-laptop:calc(var(--basegrid-laptop)/var(--baselineratio));--basefont-wide:calc(var(--basegrid-wide)/var(--baselineratio));--gridspace:calc((var(--baselineratio)/2)*1rem);--navbar-height:calc(var(--baseline)*2);--navbar:56px;--post-sidebar:350px;--post-body:588px}body,html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100%;margin:0;padding:0;text-rendering:optimizeLegibility}body{--tw-text-opacity:1;color:rgb(31 35 39/var(--tw-text-opacity));font-family:Inter Variable,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-weight:400}a,button{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}#gatsby-focus-wrapper{display:flex;flex-direction:column;min-height:100vh}@media (min-width:1024px){:root{--navbar:58px}}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(80,150,241,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(80,150,241,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.aspect-h-5{--tw-aspect-h:5}.aspect-h-9{--tw-aspect-h:9}.aspect-h-\[264\]{--tw-aspect-h:264}.aspect-w-16{--tw-aspect-w:16;padding-bottom:calc(var(--tw-aspect-h)/var(--tw-aspect-w)*100%);position:relative}.aspect-w-16>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.aspect-w-4{--tw-aspect-w:4;padding-bottom:calc(var(--tw-aspect-h)/var(--tw-aspect-w)*100%);position:relative}.aspect-w-4>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.aspect-w-\[353\]{--tw-aspect-w:353;padding-bottom:calc(var(--tw-aspect-h)/var(--tw-aspect-w)*100%);position:relative}.aspect-w-\[353\]>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.form-input,.form-multiselect,.form-select,.form-textarea{--tw-shadow:0 0 #0000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#4e4d51;border-radius:0;border-width:1px;font-size:1rem;line-height:1.5rem;padding:.5rem .75rem}.form-input:focus,.form-multiselect:focus,.form-select:focus,.form-textarea:focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);border-color:#2563eb;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px}.form-input::-moz-placeholder,.form-textarea::-moz-placeholder{color:#4e4d51;opacity:1}.form-input::placeholder,.form-textarea::placeholder{color:#4e4d51;opacity:1}.form-input::-webkit-datetime-edit-fields-wrapper{padding:0}.form-input::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}.form-input::-webkit-datetime-edit{display:inline-flex}.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-meridiem-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-year-field{padding-bottom:0;padding-top:0}.btn{--tw-border-opacity:1;background-color:rgb(249 248 249/var(--tw-bg-opacity));border-color:rgb(249 248 249/var(--tw-border-opacity));border-radius:.125rem;border-style:solid;border-width:2px;cursor:pointer;display:inline-block;font-size:.875rem;font-weight:500;line-height:1.25rem;padding:.25rem .5rem;text-align:center;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.btn,.btn:focus,.btn:hover{--tw-bg-opacity:1;--tw-text-opacity:1;color:rgb(31 30 32/var(--tw-text-opacity))}.btn:focus,.btn:hover{background-color:rgb(224 223 225/var(--tw-bg-opacity))}.btn:focus{outline:2px dotted #37363a;outline-offset:2px}.btn.btn-outline[disabled],.btn[disabled]{cursor:not-allowed;pointer-events:none}.btn.btn-outline[disabled],.btn.btn-outline[disabled]:focus,.btn.btn-outline[disabled]:hover,.btn[disabled],.btn[disabled]:focus,.btn[disabled]:hover{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(249 248 249/var(--tw-bg-opacity));border-color:rgb(249 248 249/var(--tw-border-opacity));color:rgb(127 125 131/var(--tw-text-opacity))}.btn-primary{background-color:rgb(114 50 250/var(--tw-bg-opacity));border-color:rgb(114 50 250/var(--tw-border-opacity))}.btn-primary,.btn-primary:focus,.btn-primary:hover{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.btn-primary:focus,.btn-primary:hover{background-color:rgb(152 100 255/var(--tw-bg-opacity));border-color:rgb(152 100 255/var(--tw-border-opacity))}.btn-primary.btn-outline{--tw-border-opacity:1;--tw-text-opacity:1;border-color:rgb(114 50 250/var(--tw-border-opacity));color:rgb(114 50 250/var(--tw-text-opacity))}.btn-primary.btn-outline:focus,.btn-primary.btn-outline:hover{--tw-border-opacity:1;--tw-text-opacity:1;border-color:rgb(152 100 255/var(--tw-border-opacity));color:rgb(152 100 255/var(--tw-text-opacity))}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.\!sticky{position:sticky!important}.sticky{position:sticky}.inset-0{inset:0}.\!left-2{left:.5rem!important}.\!left-3{left:.75rem!important}.\!left-4{left:1rem!important}.\!top-\[calc\(var\(--navbar\)_\+_1\.5rem\)\]{top:calc(var(--navbar) + 1.5rem)!important}.-right-\[12\.370625rem\]{right:-12.370625rem}.-right-\[8\.28125rem\]{right:-8.28125rem}.-top-\[4\.601875rem\]{top:-4.601875rem}.-top-\[9\.4375rem\]{top:-9.4375rem}.bottom-0{bottom:0}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:.5rem}.left-2\.5{left:.625rem}.left-3{left:.75rem}.left-4{left:1rem}.left-7{left:1.75rem}.left-\[65\%\]{left:65%}.left-full{left:100%}.right-0{right:0}.right-1{right:.25rem}.right-2{right:.5rem}.right-2\.5{right:.625rem}.right-3{right:.75rem}.right-4{right:1rem}.top-0{top:0}.top-1{top:.25rem}.top-1\/2{top:50%}.top-16{top:4rem}.top-32{top:8rem}.top-8{top:2rem}.top-\[-17px\]{top:-17px}.top-full{top:100%}.top-navbar{top:var(--navbar)}.isolate{isolation:isolate}.-z-10{z-index:-10}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.z-\[10001\]{z-index:10001}.z-\[10003\]{z-index:10003}.z-\[10\]{z-index:10}.z-\[1\]{z-index:1}.z-\[2\]{z-index:2}.z-\[3\]{z-index:3}.z-\[5\]{z-index:5}.order-1{order:1}.order-2{order:2}.m-0{margin:0}.m-1{margin:.25rem}.m-2{margin:.5rem}.m-auto{margin:auto}.-mx-5{margin-left:-1.25rem;margin-right:-1.25rem}.-mx-6{margin-left:-1.5rem;margin-right:-1.5rem}.-my-\[32px\]{margin-bottom:-32px;margin-top:-32px}.mx-3{margin-left:.75rem;margin-right:.75rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-0{margin-bottom:0;margin-top:0}.my-2{margin-bottom:.5rem;margin-top:.5rem}.my-4{margin-bottom:1rem;margin-top:1rem}.my-5{margin-bottom:1.25rem;margin-top:1.25rem}.-ml-16{margin-left:-4rem}.-ml-2{margin-left:-.5rem}.-ml-\[100\%\]{margin-left:-100%}.-mr-4{margin-right:-1rem}.-mt-20{margin-top:-5rem}.-mt-6{margin-top:-1.5rem}.-mt-px{margin-top:-1px}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-14{margin-bottom:3.5rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-20{margin-bottom:5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-\[10px\]{margin-bottom:10px}.mb-\[144px\]{margin-bottom:144px}.mb-\[172px\]{margin-bottom:172px}.mb-navbar{margin-bottom:var(--navbar)}.ml-0{margin-left:0}.ml-0\.5{margin-left:.125rem}.ml-1{margin-left:.25rem}.ml-12{margin-left:3rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-6{margin-left:1.5rem}.ml-\[-15px\]{margin-left:-15px}.ml-auto{margin-left:auto}.ml-gs-1{margin-left:var(--gridspace)}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-2\.5{margin-right:.625rem}.mr-4{margin-right:1rem}.mr-8{margin-right:2rem}.mr-auto{margin-right:auto}.mt-0{margin-top:0}.mt-10{margin-top:2.5rem}.mt-14{margin-top:3.5rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-20{margin-top:5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-\[124px\]{margin-top:124px}.mt-auto{margin-top:auto}.box-border{box-sizing:border-box}.line-clamp-1{-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box;overflow:hidden}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.\!hidden{display:none!important}.hidden{display:none}.size-10{height:2.5rem;width:2.5rem}.size-12{height:3rem;width:3rem}.size-14{height:3.5rem;width:3.5rem}.size-16{height:4rem;width:4rem}.size-3{height:.75rem;width:.75rem}.size-4{height:1rem;width:1rem}.size-5{height:1.25rem;width:1.25rem}.size-6{height:1.5rem;width:1.5rem}.size-7{height:1.75rem;width:1.75rem}.size-8{height:2rem;width:2rem}.size-\[18px\]{height:18px;width:18px}.size-\[22px\]{height:22px;width:22px}.size-\[34px\]{height:34px;width:34px}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-4{height:1rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[--navbar-height\]{height:var(--navbar-height)}.h-\[100px\]{height:100px}.h-\[163px\]{height:163px}.h-\[1px\]{height:1px}.h-\[24px\]{height:24px}.h-\[36px\]{height:36px}.h-\[480px\]{height:480px}.h-\[56px\]{height:56px}.h-\[600px\]{height:600px}.h-\[64px\]{height:64px}.h-\[84px\]{height:84px}.h-\[90px\]{height:90px}.h-auto{height:auto}.h-full{height:100%}.h-navbar-offset{height:calc(100% - var(--navbar))}.h-screen{height:100vh}.max-h-\[72px\]{max-height:72px}.max-h-full{max-height:100%}.max-h-navbar-offset{max-height:calc(100% - var(--navbar))}.max-h-screen{max-height:100vh}.max-h-screen-navbar-offset{max-height:calc(100vh - var(--navbar))}.min-h-0{min-height:0}.min-h-10{min-height:2.5rem}.min-h-12{min-height:3rem}.min-h-14{min-height:3.5rem}.min-h-32{min-height:8rem}.min-h-5{min-height:1.25rem}.min-h-6{min-height:1.5rem}.min-h-8{min-height:2rem}.min-h-\[145px\]{min-height:145px}.min-h-\[250px\]{min-height:250px}.min-h-\[600px\]{min-height:600px}.min-h-\[662px\]{min-height:662px}.min-h-\[inherit\]{min-height:inherit}.w-10{width:2.5rem}.w-2{width:.5rem}.w-24{width:6rem}.w-4{width:1rem}.w-4\/5{width:80%}.w-6{width:1.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[115\.5px\]{width:115.5px}.w-\[115px\]{width:115px}.w-\[120px\]{width:120px}.w-\[150px\]{width:150px}.w-\[166px\]{width:166px}.w-\[180px\]{width:180px}.w-\[220px\]{width:220px}.w-\[282px\]{width:282px}.w-\[305px\]{width:305px}.w-\[320px\]{width:320px}.w-\[328px\]{width:328px}.w-\[36px\]{width:36px}.w-\[506px\]{width:506px}.w-\[728px\]{width:728px}.w-\[75\%\]{width:75%}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-\[233px\]{min-width:233px}.min-w-\[282px\]{min-width:282px}.min-w-fit{min-width:-moz-fit-content;min-width:fit-content}.max-w-\[1084px\]{max-width:1084px}.max-w-\[1090px\]{max-width:1090px}.max-w-\[353px\]{max-width:353px}.max-w-\[600px\]{max-width:600px}.max-w-\[680px\]{max-width:680px}.max-w-full{max-width:100%}.max-w-none{max-width:none}.max-w-screen-lg{max-width:1024px}.max-w-screen-md{max-width:768px}.max-w-screen-sm{max-width:640px}.max-w-screen-xl{max-width:1248px}.max-w-screen-xs{max-width:320px}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-initial{flex:0 1 auto}.flex-none{flex:none}.flex-shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.grow-0{flex-grow:0}.basis-80{flex-basis:20rem}.basis-\[120px\]{flex-basis:120px}.origin-center{transform-origin:center}.origin-top-center{transform-origin:top center}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-1{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-1{--tw-translate-y:0.25rem}.rotate-0{--tw-rotate:0deg}.rotate-0,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.scale-y-0{--tw-scale-y:0}.scale-y-0,.scale-y-100{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-y-100{--tw-scale-y:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.columns-1{-moz-columns:1;column-count:1}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.content-start{align-content:flex-start}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.justify-normal{justify-content:normal}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-evenly{justify-content:space-evenly}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-16{gap:4rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-\[22px\]{gap:22px}.gap-\[48px\]{gap:48px}.gap-\[6px\]{gap:6px}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-20{-moz-column-gap:5rem;column-gap:5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-1{row-gap:.25rem}.gap-y-16{row-gap:4rem}.gap-y-2{row-gap:.5rem}.gap-y-3{row-gap:.75rem}.gap-y-4{row-gap:1rem}.gap-y-5{row-gap:1.25rem}.gap-y-8{row-gap:2rem}.gap-y-\[19px\]{row-gap:19px}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.space-x-1\.5>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.375rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.375rem*var(--tw-space-x-reverse))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.75rem*var(--tw-space-x-reverse))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}.space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1.5rem*var(--tw-space-x-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-12>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(3rem*var(--tw-space-y-reverse));margin-top:calc(3rem*(1 - var(--tw-space-y-reverse)))}.space-y-16>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(4rem*var(--tw-space-y-reverse));margin-top:calc(4rem*(1 - var(--tw-space-y-reverse)))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.5rem*var(--tw-space-y-reverse));margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(2rem*var(--tw-space-y-reverse));margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)))}.self-start{align-self:flex-start}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.scroll-smooth{scroll-behavior:smooth}.truncate{overflow:hidden;white-space:nowrap}.overflow-ellipsis,.text-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.\!rounded{border-radius:.25rem!important}.\!rounded-\[10px\]{border-radius:10px!important}.\!rounded-lg{border-radius:.5rem!important}.\!rounded-md{border-radius:.375rem!important}.\!rounded-xl{border-radius:.75rem!important}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\[10px\]{border-radius:10px}.rounded-\[20px\]{border-radius:20px}.rounded-\[54px\]{border-radius:54px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-xl{border-radius:.75rem}.rounded-b-2xl{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.rounded-t-2xl{border-top-left-radius:1rem;border-top-right-radius:1rem}.rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.rounded-bl-lg{border-bottom-left-radius:.5rem}.rounded-br-lg{border-bottom-right-radius:.5rem}.rounded-tl-lg{border-top-left-radius:.5rem}.rounded-tr-lg{border-top-right-radius:.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-\[1px\]{border-width:1px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-none{border-style:none}.\!border-danger-9{--tw-border-opacity:1!important;border-color:rgb(229 72 77/var(--tw-border-opacity))!important}.\!border-neutral-12{--tw-border-opacity:1!important;border-color:rgb(31 35 39/var(--tw-border-opacity))!important}.border-danger-11{--tw-border-opacity:1;border-color:rgb(198 42 47/var(--tw-border-opacity))}.border-danger-alpha-8{border-color:#d100036f}.border-danger-alpha-9{border-color:#db0007b7}.border-gray-100{--tw-border-opacity:1;border-color:rgb(249 248 249/var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(224 223 225/var(--tw-border-opacity))}.border-gray-400{--tw-border-opacity:1;border-color:rgb(127 125 131/var(--tw-border-opacity))}.border-gray-500{--tw-border-opacity:1;border-color:rgb(78 77 81/var(--tw-border-opacity))}.border-neutral-4{--tw-border-opacity:1;border-color:rgb(235 235 239/var(--tw-border-opacity))}.border-neutral-alpha-12{border-color:#000509e3}.border-neutral-alpha-4{border-color:#02023414}.border-neutral-alpha-5{border-color:#0000301b}.border-neutral-alpha-6{border-color:#01012e22}.border-neutral-alpha-7{border-color:#01062f2c}.border-neutral-alpha-8{border-color:#00082f46}.border-primary-alpha-12{border-color:#11013cf0}.border-primary-alpha-6{border-color:#3a07e43b}.border-primary-alpha-7{border-color:#3602de52}.border-primary-alpha-8{border-color:#3c02d973}.border-transparent{border-color:transparent}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.border-b-gray-200{--tw-border-opacity:1;border-bottom-color:rgb(224 223 225/var(--tw-border-opacity))}.border-b-transparent{border-bottom-color:transparent}.border-r-transparent{border-right-color:transparent}.border-t-neutral-5{--tw-border-opacity:1;border-top-color:rgb(228 228 233/var(--tw-border-opacity))}.border-t-neutral-alpha-4{border-top-color:#02023414}.\!bg-neutral-12{--tw-bg-opacity:1!important;background-color:rgb(31 35 39/var(--tw-bg-opacity))!important}.\!bg-neutral-alpha-3{background-color:#00003b0d!important}.\!bg-transparent{background-color:transparent!important}.bg-\[\#f1f1f1\]{--tw-bg-opacity:1;background-color:rgb(241 241 241/var(--tw-bg-opacity))}.bg-\[\#fcfcfd\]{--tw-bg-opacity:1;background-color:rgb(252 252 253/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-danger-9{--tw-bg-opacity:1;background-color:rgb(229 72 77/var(--tw-bg-opacity))}.bg-danger-alpha-3{background-color:#ff010110}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(249 248 249/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(224 223 225/var(--tw-bg-opacity))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(78 77 81/var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 54 58/var(--tw-bg-opacity))}.bg-neutral-1{--tw-bg-opacity:1;background-color:rgb(252 252 253/var(--tw-bg-opacity))}.bg-neutral-12{--tw-bg-opacity:1;background-color:rgb(31 35 39/var(--tw-bg-opacity))}.bg-neutral-2{--tw-bg-opacity:1;background-color:rgb(249 249 251/var(--tw-bg-opacity))}.bg-neutral-3{--tw-bg-opacity:1;background-color:rgb(242 242 245/var(--tw-bg-opacity))}.bg-neutral-9{--tw-bg-opacity:1;background-color:rgb(139 141 152/var(--tw-bg-opacity))}.bg-neutral-alpha-2{background-color:#05055806}.bg-neutral-alpha-3{background-color:#00003b0d}.bg-neutral-alpha-8{background-color:#00082f46}.bg-neutral-inverse-1{--tw-bg-opacity:1;background-color:rgb(24 24 26/var(--tw-bg-opacity))}.bg-overlay-dark-11{background-color:rgba(0,0,0,.61)}.bg-panel-1{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-primary-700{--tw-bg-opacity:1;background-color:rgb(114 50 250/var(--tw-bg-opacity))}.bg-primary-9{--tw-bg-opacity:1;background-color:rgb(105 62 221/var(--tw-bg-opacity))}.bg-primary-alpha-3{background-color:#3705ff0f}.bg-spBlack{--tw-bg-opacity:1;background-color:rgb(35 35 35/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-opacity-50{--tw-bg-opacity:0.5}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-black{--tw-gradient-from:#000 var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.fill-current{fill:currentColor}.fill-neutral-9{fill:#8b8d98}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.object-center{-o-object-position:center;object-position:center}.\!p-0{padding:0!important}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-\[0\.15rem\]{padding:.15rem}.p-gs-1{padding:var(--gridspace)}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-11{padding-left:2.75rem;padding-right:2.75rem}.px-12{padding-left:3rem;padding-right:3rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.px-\[20px\]{padding-left:20px;padding-right:20px}.px-\[30px\]{padding-left:30px;padding-right:30px}.px-\[38px\]{padding-left:38px;padding-right:38px}.px-gs-1{padding-left:var(--gridspace);padding-right:var(--gridspace)}.py-0{padding-bottom:0;padding-top:0}.py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.py-12{padding-bottom:3rem;padding-top:3rem}.py-16{padding-bottom:4rem;padding-top:4rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-8{padding-bottom:2rem;padding-top:2rem}.py-\[32px\]{padding-bottom:32px;padding-top:32px}.py-\[6px\]{padding-bottom:6px;padding-top:6px}.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25rem}.pb-12{padding-bottom:3rem}.pb-14{padding-bottom:3.5rem}.pb-16{padding-bottom:4rem}.pb-20{padding-bottom:5rem}.pb-24{padding-bottom:6rem}.pb-3{padding-bottom:.75rem}.pb-8{padding-bottom:2rem}.pb-\[124px\]{padding-bottom:124px}.pb-\[160px\]{padding-bottom:160px}.pb-px{padding-bottom:1px}.pl-0{padding-left:0}.pl-0\.5{padding-left:.125rem}.pl-1{padding-left:.25rem}.pl-11{padding-left:2.75rem}.pl-12{padding-left:3rem}.pl-16{padding-left:4rem}.pl-2{padding-left:.5rem}.pl-2\.5{padding-left:.625rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-8{padding-left:2rem}.pl-9{padding-left:2.25rem}.pl-\[38px\]{padding-left:38px}.pl-\[6px\]{padding-left:6px}.pr-1{padding-right:.25rem}.pr-11{padding-right:2.75rem}.pr-12{padding-right:3rem}.pr-16{padding-right:4rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pr-8{padding-right:2rem}.pr-\[12px\]{padding-right:12px}.pr-\[38px\]{padding-right:38px}.pt-1{padding-top:.25rem}.pt-1\.5{padding-top:.375rem}.pt-10{padding-top:2.5rem}.pt-16{padding-top:4rem}.pt-24{padding-top:6rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.pt-\[153px\]{padding-top:153px}.pt-\[89px\]{padding-top:89px}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:Inter Variable,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-1{font-size:12px;letter-spacing:0;line-height:16px}.text-10{font-size:56px;letter-spacing:-.82px;line-height:64px}.text-2{font-size:14px;letter-spacing:0;line-height:20px}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3{font-size:16px;letter-spacing:-.1px;line-height:24px}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4{font-size:18px;letter-spacing:-.2px;line-height:28px}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5{font-size:24px;letter-spacing:-.28px;line-height:36px}.text-7{font-size:36px;letter-spacing:-.32px;line-height:42px}.text-8{font-size:40px;letter-spacing:-.42px;line-height:48px}.text-\[\.35rem\]{font-size:.35rem}.text-\[0\.65rem\],.text-\[\.65rem\]{font-size:.65rem}.text-\[14px\]{font-size:14px}.text-base{font-size:1rem;line-height:1.5rem}.text-base\/tight{font-size:1rem;line-height:1.25}.text-jar-2{font-size:12px;letter-spacing:0;line-height:16px}.text-jar-3{font-size:14px;letter-spacing:0;line-height:20px}.text-jar-4{font-size:16px;letter-spacing:0;line-height:24px}.text-jar-5{font-size:18px;letter-spacing:0;line-height:28px}.text-jar-6{font-size:20px;letter-spacing:-.1px;line-height:28px}.text-jar-7{font-size:24px;letter-spacing:-.1px;line-height:36px}.text-jar-8{font-size:32px;letter-spacing:0;line-height:40px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-sm\/tight{font-size:.875rem;line-height:1.25}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.not-italic{font-style:normal}.leading-6{line-height:1.5rem}.leading-\[0\]{line-height:0}.leading-\[58px\]{line-height:58px}.leading-none{line-height:1}.leading-tight{line-height:1.25}.-tracking-tight{letter-spacing:.025em}.tracking-\[-0\.16px\]{letter-spacing:-.16px}.tracking-\[-0\.4px\]{letter-spacing:-.4px}.tracking-\[-1\.92px\]{letter-spacing:-1.92px}.tracking-tight{letter-spacing:-.025em}.\!text-neutral-12{--tw-text-opacity:1!important;color:rgb(31 35 39/var(--tw-text-opacity))!important}.text-\[\#ffcc01\]{--tw-text-opacity:1;color:rgb(255 204 1/var(--tw-text-opacity))}.text-\[red\]{--tw-text-opacity:1;color:rgb(255 0 0/var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-body{--tw-text-opacity:1;color:rgb(31 30 32/var(--tw-text-opacity))}.text-current{color:currentColor}.text-danger-11{--tw-text-opacity:1;color:rgb(198 42 47/var(--tw-text-opacity))}.text-danger-9{--tw-text-opacity:1;color:rgb(229 72 77/var(--tw-text-opacity))}.text-danger-alpha-11{color:#bb0007d5}.text-gray-100{--tw-text-opacity:1;color:rgb(249 248 249/var(--tw-text-opacity))}.text-gray-200{--tw-text-opacity:1;color:rgb(224 223 225/var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity:1;color:rgb(175 174 178/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(127 125 131/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 54 58/var(--tw-text-opacity))}.text-neutral-1{--tw-text-opacity:1;color:rgb(252 252 253/var(--tw-text-opacity))}.text-neutral-10{--tw-text-opacity:1;color:rgb(126 128 138/var(--tw-text-opacity))}.text-neutral-11{--tw-text-opacity:1;color:rgb(96 100 108/var(--tw-text-opacity))}.text-neutral-12{--tw-text-opacity:1;color:rgb(31 35 39/var(--tw-text-opacity))}.text-neutral-9{--tw-text-opacity:1;color:rgb(139 141 152/var(--tw-text-opacity))}.text-neutral-alpha-11{color:#0002119d}.text-neutral-alpha-12{color:#000509e3}.text-neutral-alpha-6{color:#01012e22}.text-neutral-alpha-8{color:#00082f46}.text-neutral-alpha-9{color:#00041d74}.text-neutral-inverse-12{--tw-text-opacity:1;color:rgb(244 246 246/var(--tw-text-opacity))}.text-primary-100{--tw-text-opacity:1;color:rgb(238 230 255/var(--tw-text-opacity))}.text-primary-11{--tw-text-opacity:1;color:rgb(86 53 178/var(--tw-text-opacity))}.text-primary-12{--tw-text-opacity:1;color:rgb(30 16 70/var(--tw-text-opacity))}.text-primary-300{--tw-text-opacity:1;color:rgb(201 173 255/var(--tw-text-opacity))}.text-primary-7{--tw-text-opacity:1;color:rgb(191 174 245/var(--tw-text-opacity))}.text-primary-9{--tw-text-opacity:1;color:rgb(105 62 221/var(--tw-text-opacity))}.text-primary-alpha-11{color:#2b019dcc}.text-primary-alpha-12{color:#11013cf0}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.placeholder-neutral-alpha-11::-moz-placeholder{color:#0002119d}.placeholder-neutral-alpha-11::placeholder{color:#0002119d}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-80{opacity:.8}.\!shadow-\[0px_0px_0px_2px_\#02023414\]{--tw-shadow:0px 0px 0px 2px #02023414!important;--tw-shadow-colored:0px 0px 0px 2px var(--tw-shadow-color)!important}.\!shadow-\[0px_0px_0px_2px_\#02023414\],.\!shadow-\[0px_0px_0px_2px_\#ff00001a\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.\!shadow-\[0px_0px_0px_2px_\#ff00001a\]{--tw-shadow:0px 0px 0px 2px #ff00001a!important;--tw-shadow-colored:0px 0px 0px 2px var(--tw-shadow-color)!important}.shadow-1{--tw-shadow:0px 2px 3px -2px rgba(0,0,61,.05),0px 3px 12px -4px rgba(0,0,0,.05),0px 4px 16px -8px rgba(0,0,0,.08);--tw-shadow-colored:0px 2px 3px -2px var(--tw-shadow-color),0px 3px 12px -4px var(--tw-shadow-color),0px 4px 16px -8px var(--tw-shadow-color)}.shadow-1,.shadow-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2{--tw-shadow:0px 8px 40px 0px rgba(0,0,61,.05),0px 12px 32px -16px rgba(0,0,0,.05);--tw-shadow-colored:0px 8px 40px 0px var(--tw-shadow-color),0px 12px 32px -16px var(--tw-shadow-color)}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.shadow-\[0_2px_10px_0_rgba\(0\2c 0\2c 0\2c 0\.2\)\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_2px_10px_0_rgba\(0\2c 0\2c 0\2c 0\.2\)\]{--tw-shadow:0 2px 10px 0 rgba(0,0,0,.2);--tw-shadow-colored:0 2px 10px 0 var(--tw-shadow-color)}.shadow-\[0px_0px_0px_2px_\#ff00001a\]{--tw-shadow:0px 0px 0px 2px #ff00001a;--tw-shadow-colored:0px 0px 0px 2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0px_12px_60px_0px_\#0000000A\2c 0px_12px_32px_-16px_\#0000001A\]{--tw-shadow:0px 12px 60px 0px #0000000a,0px 12px 32px -16px #0000001a;--tw-shadow-colored:0px 12px 60px 0px var(--tw-shadow-color),0px 12px 32px -16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0px_1px_2px_0px_\#0000000F_0px_0px_0px_1px_\#00000000\]{--tw-shadow:0px 1px 2px 0px #0000000f 0px 0px 0px 1px #00000000;--tw-shadow-colored:0px 1px 2px 0px var(--tw-shadow-color)}.shadow-\[0px_1px_2px_0px_\#0000000F_0px_0px_0px_1px_\#00000000\],.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-none{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.outline{outline-style:solid}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-gray-900\/5{--tw-ring-color:hsla(0,0%,9%,.05)}.blur{--tw-blur:blur(8px)}.blur,.drop-shadow{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-\[top\]{transition-duration:.15s;transition-property:top;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-transform{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.container{margin-left:auto;margin-right:auto;max-width:1248px;padding-left:1.5rem;padding-right:1.5rem;width:100%}@media (min-width:1248px){.container-12{margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;width:1200px}}.scrollbar-none{scrollbar-width:none}.cover-spine-overlay{position:relative}.cover-spine-overlay:after{background:linear-gradient(90deg,rgba(0,0,0,.3),rgba(73,36,36,0) 1%,hsla(0,0%,98%,.23) 2.5%,rgba(0,0,0,.1) 3.4%,hsla(0,0%,98%,.1) 4.2%,rgba(0,0,0,.1) 5.6%,hsla(0,0%,98%,.2) 6.8%,transparent 25%,transparent 30%,rgba(0,0,0,.2));content:"";height:100%;left:0;position:absolute;top:0;width:100%}.rich-text a{--tw-text-opacity:1;color:rgb(86 53 178/var(--tw-text-opacity));text-decoration-line:underline;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.rich-text a:hover{--tw-text-opacity:1;color:rgb(30 16 70/var(--tw-text-opacity))}.rich-text a>code{--tw-bg-opacity:1;background-color:rgb(243 240 255/var(--tw-bg-opacity));color:currentColor;font-weight:600}.remove-input-txt-border input[type=text]:focus{box-shadow:none}.text-1-regular{font-weight:400}.text-1-medium,.text-1-regular{font-family:Inter Variable,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:12px;font-style:normal;line-height:16px}.text-1-medium{font-weight:500}.text-1-semi-bold{font-family:Inter Variable,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:12px;font-style:normal;font-weight:600;line-height:16px}.text-2-regular{font-weight:400}.text-2-medium,.text-2-regular{font-family:Inter Variable,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:14px;font-style:normal;line-height:20px}.text-2-medium{font-weight:500}.text-2-semi-bold{font-family:Inter Variable,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.text-3-regular{font-weight:400}.text-3-medium,.text-3-regular{font-family:Inter Variable,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:16px;font-style:normal;letter-spacing:-.1px;line-height:24px}.text-3-medium{font-weight:500}.text-5-regular{font-weight:400}.text-5-bold,.text-5-regular{font-family:Inter Variable,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:24px;font-style:normal;letter-spacing:-.28px;line-height:36px}.text-5-bold,.text-9-bold{font-weight:700}.text-9-bold{font-family:Inter Variable,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:48px;font-style:normal;letter-spacing:-.82px;line-height:56px}@media only screen and (min-width:0px) and (min-height:0px){div[id^=bsa-zone_1732708815075-2_123456]{min-height:250px;min-width:300px}}@media only screen and (min-width:880px) and (min-height:0px){div[id^=bsa-zone_1732708815075-2_123456]{min-height:600px;min-width:120px}}pre{overflow-x:auto}.code-highlight{float:left;min-width:100%}.code-line{border-left:4px solid transparent;display:block;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}.code-line.inserted{background-color:rgba(16,185,129,.2)}.code-line.deleted{background-color:rgba(239,68,68,.2)}.highlight-line{background-color:rgba(55,65,81,.5);border-left:4px solid #3b82f6;margin-left:-16px;margin-right:-16px}.line-number:before{color:#9ca3af;content:attr(line);display:inline-block;margin-left:-8px;margin-right:16px;text-align:right;width:1rem}:root{--hcb--fz:var(--hcb--fz--base,14px);--hcb--ff:"Menlo","Consolas","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;--hcb--pY:1.75rem;--hcb--pX:1rem;--hcb--radius:3px;--hcb--linenumW:3.5ch;--hcb--data-label:attr(data-lang);--hcb--btn-offset:20px;--hcb--tsh:unset;--hcb--file-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' enable-background='new 0 0 50 56' viewBox='0 0 50 56'%3E%3Cpath fill='%23fff' d='M46.6 12.5c-1.2-1.6-2.8-3.5-4.5-5.4-1.8-1.8-3.6-3.5-5.2-4.7C34 .3 32.4 0 31.5 0H6.3C3.4 0 1 2.4 1 5.4v45.1c0 3 2.4 5.4 5.3 5.4h37.4c2.9 0 5.3-2.4 5.3-5.4V18c0-.9-.2-2.5-2.4-5.5zm-13.5 6.7h10.1l-.1 30.9L6.8 50V5.9h23.5v10.4c-.1 1.6 1.2 2.9 2.8 2.9zm2.9-5.8v-4c.6.6 1.3 1.2 2 1.9s1.3 1.4 1.9 2.1H36z'/%3E%3C/svg%3E");--hcb--c:#f9f9f6;--hcb--bgc:#2d2e29;--hcb--data-label--c:#fff;--hcb--data-label--bgc:#20211f;--hcb--line-numbers--c:#a3a3a3;--hcb--highlight-color:#fffaf51a;--hcb--scbar-track--bgc:#ffffff1a;--hcb--scbar-thumb--bgc:#fff3}.hcb_wrap.hcb_wrap{display:block;font-size:var(--hcb--fz,14px);margin-bottom:2em;margin-top:2em;padding:0;position:relative;z-index:0}pre{-webkit-overflow-scrolling:touch;border-radius:var(--hcb--radius,0);box-sizing:border-box;display:block;font-family:var(--hcb--ff);font-size:inherit;letter-spacing:.1px;line-height:1.5;margin:0;overflow:auto;padding:var(--hcb--pY) var(--hcb--pX);position:static}pre,pre>code{word-wrap:normal;background:var(--hcb--bgc);border:none;color:var(--hcb--c);-webkit-hyphens:none;hyphens:none;-moz-tab-size:4;-o-tab-size:4;tab-size:4;text-align:left;text-shadow:var(--hcb--tsh);white-space:pre;word-break:normal;word-spacing:normal}.hcb_wrap.hcb_wrap :is(code,span){box-sizing:border-box;font-family:inherit;font-size:inherit;line-height:inherit}pre.line-numbers{counter-reset:linenumber;position:static}pre.line-numbers>code{position:relative;white-space:inherit}pre.line-numbers-rows{border-right:1px solid var(--hcb--line-numbers--c);font-size:inherit;left:calc(-1px - var(--hcb--linenumW) - var(--hcb--pX)/2);min-width:var(--hcb--linenumW);pointer-events:none;position:absolute;top:-.125em;-webkit-user-select:none;-moz-user-select:none;user-select:none}pre.line-numbers-rows>span{counter-increment:linenumber;display:block;letter-spacing:-.25px;pointer-events:none;text-align:center}pre.line-numbers-rows>span:before{color:var(--hcb--line-numbers--c);content:counter(linenumber);display:block}pre::-webkit-scrollbar{height:6px}pre::-webkit-scrollbar-track{background:var(--hcb--scbar-track--bgc);border:none}pre::-webkit-scrollbar-thumb{background:var(--hcb--scbar-thumb--bgc);border-radius:3px}:not(pre)>code.prism{border-radius:.3em;padding:.1em;white-space:normal}pre:before{background-color:var(--hcb--data-label--bgc);border-radius:0 var(--hcb--radius);box-sizing:border-box;color:var(--hcb--data-label--c);content:var(--hcb--data-label);font-family:inherit;font-size:.925em;line-height:20px;min-width:4em;padding:0 10px;position:absolute;right:0;text-align:center;top:0;z-index:1}pre[data-show-lang="0"]{--hcb--data-label:none}pre[data-show-lang="1"]{--hcb--data-label:attr(data-lang)}pre[data-file]:before{background-image:var(--hcb--file-icon);background-position:center left 8px;background-repeat:no-repeat;background-size:auto 10px;content:attr(data-file);padding:0 8px 0 20px}.hcb_wrap{--hcb-clipbtn-opacity:0}.hcb-clipboard:focus-visible,.hcb_wrap:hover{--hcb-clipbtn-opacity:100}.hcb-clipboard{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:#fafafacc;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' enable-background='new 0 0 48 48' viewBox='0 0 48 48'%3E%3Cpath d='m24 38 9-9h-5.5V19h-7v10H15z'/%3E%3Cpath d='M38 5.5h-9c0-2.8-2.2-5-5-5s-5 2.2-5 5h-9c-2.2 0-4 1.8-4 4v33c0 2.2 1.8 4 4 4h28c2.2 0 4-1.8 4-4v-33c0-2.2-1.8-4-4-4zm-14-2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm14 39H10v-33h5v3c0 .6.4 1 1 1h16c.6 0 1-.4 1-1v-3h5v33z'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:75%;border:none;border-radius:3px;box-shadow:0 1px 2px #3d3d3d40;box-sizing:border-box;color:#000;height:2.25em;opacity:var(--hcb-clipbtn-opacity);padding:0;position:absolute;right:8px;text-align:center;top:calc(var(--hcb--btn-offset, 0px) + 8px);transition:opacity .25s;width:2.25em;z-index:2}[data-show-lang="0"]+.hcb-clipboard{--hcb--btn-offset:0px}[data-show-lang="1"]+.hcb-clipboard{--hcb--btn-offset:20px}.hcb-clipboard.-done{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' enable-background='new 0 0 48 48' viewBox='0 0 48 48'%3E%3Cpath d='M38 5.5h-9c0-2.8-2.2-5-5-5s-5 2.2-5 5h-9c-2.2 0-4 1.8-4 4v33c0 2.2 1.8 4 4 4h28c2.2 0 4-1.8 4-4v-33c0-2.2-1.8-4-4-4zm-14-2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm14 39H10v-33h5v3c0 .6.4 1 1 1h16c.6 0 1-.4 1-1v-3h5v33z'/%3E%3Cpath d='M32.6 19.3 22.1 30l-5.7-5.8-2.9 2.9 8.6 8.6 13.4-13.5z'/%3E%3C/svg%3E")}.hcb-clipboard.-done:before{background-color:inherit;border-radius:8px;color:inherit;content:"\2713 Copied";display:block;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1;padding:2px 4px 2px 2px;position:absolute;right:calc(4px + 100%);top:50%;translate:0 -50%}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#a8a897}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.important,.token.property,.token.symbol,.token.tag{color:#ff2c78}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.class-name,.token.inserted,.token.selector{color:#b4ec43}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function,.token.string{color:#f3e880}.token.function,.token.keyword.def{color:#5fe6ff}.token.keyword,.token.operator{color:#f92672}.token.keyword.this,.token.regex{color:#fd971f}.token.delimiter:not(.symbol){color:#5294ff}.token.bold{font-weight:700}.token.builtin,.token.italic,.token.keyword.def{font-style:italic}.token.entity{cursor:help}.language-css .token.property,.language-json .token.property,.language-scss .token.property{color:#5fe6ff}.language-php .token.important.delimiter{font-weight:400}.language-ruby .token.interpolation{color:#f8f8f2}.language-json .token.operator{color:#f3e880}@media screen and (max-width:599px){:root{--hcb--fz:var(--hcb--fz--mobile,13px)}}.sitepoint-new-marketing,.sitepoint-new-marketing p{font-family:Inter Variable,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.sitepoint-new-marketing .container{margin-left:auto;margin-right:auto;max-width:1440px}.sitepoint-new-marketing .button{--tw-text-opacity:1;align-items:center;border-radius:56px;color:rgb(255 255 255/var(--tw-text-opacity));display:flex;font-size:.875rem;font-weight:600;height:56px;justify-content:center;line-height:1.25rem;padding:.5rem 1.5rem}.sitepoint-new-marketing .button:hover{--tw-bg-opacity:1;background-color:rgb(152 100 255/var(--tw-bg-opacity))}.sitepoint-new-marketing .labels{align-items:center;border-radius:9999px;cursor:pointer;display:inline-flex;font-size:14px;font-weight:400;justify-content:center;line-height:1.25;padding:.5rem 10px;width:-moz-fit-content;width:fit-content}.sitepoint-new-marketing .small-text{font-size:.875rem;font-weight:400;line-height:1.25rem}.sitepoint-new-marketing .body-small-text{font-size:.75rem;font-weight:400;letter-spacing:-.16px;line-height:1rem}.sitepoint-new-marketing .caption-text{font-size:12px;font-weight:600;letter-spacing:.1px;line-height:1.25}.sitepoint-new-marketing .input{--tw-bg-opacity:1;align-items:center;align-self:stretch;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-radius:7px;border-style:solid;border-width:1px;display:flex;margin-bottom:0;padding:10px .5rem;width:100%}.sitepoint-new-marketing .input:hover{--tw-border-opacity:1;border-color:rgb(175 174 178/var(--tw-border-opacity))}.sitepoint-new-marketing .input:focus-visible{outline-color:#7232fa;outline-style:solid;outline-width:1px}.sitepoint-new-marketing .input{border-color:#d5d5d5}.sitepoint-new-marketing .select-style{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMTAgMTIuNTY4YS45NjQuOTY0IDAgMCAxLS43MDUtLjMwNmwtMy43Ny0zLjc3YS44OS44OSAwIDAgMS0uMjY1LS43MDUgMSAxIDAgMCAxIC4yODUtLjY4NC45MzIuOTMyIDAgMCAxIC43MDUtLjI5NS45Ny45NyAwIDAgMSAuNjg0LjI5NUwxMCAxMC4xOWwzLjA4Ny0zLjA4N2EuOTIuOTIgMCAwIDEgLjY3My0uMjg1Yy4yNiAwIC40OS4xMDIuNjk0LjMwNi4xOS4xOS4yODUuNDIxLjI4NS42OTRhLjk0NS45NDUgMCAwIDEtLjI4NS42OTRsLTMuNzUgMy43NWEuOTY0Ljk2NCAwIDAgMS0uNzA1LjMwNloiLz48L3N2Zz4=);background-position:calc(100% - 8px) calc(1em - 4px),calc(100% - 15px) calc(1em + 2px),calc(100% - .5em) .5em;background-repeat:no-repeat;background-size:20px,20px;box-sizing:border-box;margin:0}html:has(body.scroll-smooth){scroll-behavior:smooth}@font-face{font-display:swap;font-family:Inter Display;font-style:normal;font-weight:700;src:url(/fonts/InterDisplay-Bold-Latin.woff2) format("woff2")}@font-face{font-display:swap;font-family:Inter Display;font-style:normal;font-weight:600;src:url(/fonts/InterDisplay-SemiBold-Latin.woff2) format("woff2")}@media (min-width:768px){.md\:aspect-h-9{--tw-aspect-h:9}.md\:aspect-w-\[20\]{--tw-aspect-w:20;padding-bottom:calc(var(--tw-aspect-h)/var(--tw-aspect-w)*100%);position:relative}.md\:aspect-w-\[20\]>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}}.placeholder\:text-3::-moz-placeholder{font-size:16px;letter-spacing:-.1px;line-height:24px}.placeholder\:text-3::placeholder{font-size:16px;letter-spacing:-.1px;line-height:24px}.placeholder\:text-4::-moz-placeholder{font-size:18px;letter-spacing:-.2px;line-height:28px}.placeholder\:text-4::placeholder{font-size:18px;letter-spacing:-.2px;line-height:28px}.placeholder\:text-jar-3::-moz-placeholder{font-size:14px;letter-spacing:0;line-height:20px}.placeholder\:text-jar-3::placeholder{font-size:14px;letter-spacing:0;line-height:20px}.placeholder\:text-jar-4::-moz-placeholder{font-size:16px;letter-spacing:0;line-height:24px}.placeholder\:text-jar-4::placeholder{font-size:16px;letter-spacing:0;line-height:24px}.placeholder\:font-normal::-moz-placeholder{font-weight:400}.placeholder\:font-normal::placeholder{font-weight:400}.after\:mx-1:after{content:var(--tw-content);margin-left:.25rem;margin-right:.25rem}.after\:inline-block:after{content:var(--tw-content);display:inline-block}.after\:content-\[\'\/\'\]:after{--tw-content:"/";content:var(--tw-content)}.last\:after\:content-none:last-child:after{--tw-content:none;content:var(--tw-content)}.only\:block:only-child{display:block}.first-of-type\:mr-0:first-of-type{margin-right:0}.last-of-type\:border-b-transparent:last-of-type{border-bottom-color:transparent}.hover\:scale-125:hover{--tw-scale-x:1.25;--tw-scale-y:1.25;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-danger-alpha-11:hover{border-color:#bb0007d5}.hover\:border-neutral-alpha-11:hover{border-color:#0002119d}.hover\:border-neutral-alpha-12:hover{border-color:#000509e3}.hover\:border-neutral-alpha-2:hover{border-color:#05055806}.hover\:border-primary-9:hover{--tw-border-opacity:1;border-color:rgb(105 62 221/var(--tw-border-opacity))}.hover\:border-primary-alpha-11:hover{border-color:#2b019dcc}.hover\:border-primary-alpha-12:hover{border-color:#11013cf0}.hover\:border-primary-alpha-2:hover{border-color:#3414ff08}.hover\:border-transparent:hover{border-color:transparent}.hover\:\!bg-neutral-alpha-3:hover{background-color:#00003b0d!important}.hover\:\!bg-neutral-alpha-4:hover{background-color:#02023414!important}.hover\:bg-black:hover{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.hover\:bg-danger-12:hover{--tw-bg-opacity:1;background-color:rgb(100 23 35/var(--tw-bg-opacity))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(224 223 225/var(--tw-bg-opacity))}.hover\:bg-gray-400:hover{--tw-bg-opacity:1;background-color:rgb(127 125 131/var(--tw-bg-opacity))}.hover\:bg-gray-500:hover{--tw-bg-opacity:1;background-color:rgb(78 77 81/var(--tw-bg-opacity))}.hover\:bg-neutral-11:hover{--tw-bg-opacity:1;background-color:rgb(96 100 108/var(--tw-bg-opacity))}.hover\:bg-neutral-12:hover{--tw-bg-opacity:1;background-color:rgb(31 35 39/var(--tw-bg-opacity))}.hover\:bg-neutral-3:hover{--tw-bg-opacity:1;background-color:rgb(242 242 245/var(--tw-bg-opacity))}.hover\:bg-neutral-alpha-3:hover{background-color:#00003b0d}.hover\:bg-neutral-alpha-4:hover{background-color:#02023414}.hover\:bg-panel-1:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.hover\:bg-panel-3:hover{--tw-bg-opacity:1;background-color:rgb(249 249 251/var(--tw-bg-opacity))}.hover\:bg-primary-10:hover{--tw-bg-opacity:1;background-color:rgb(97 58 204/var(--tw-bg-opacity))}.hover\:bg-primary-12:hover{--tw-bg-opacity:1;background-color:rgb(30 16 70/var(--tw-bg-opacity))}.hover\:bg-primary-400:hover{--tw-bg-opacity:1;background-color:rgb(166 121 255/var(--tw-bg-opacity))}.hover\:bg-primary-500:hover{--tw-bg-opacity:1;background-color:rgb(152 100 255/var(--tw-bg-opacity))}.hover\:bg-primary-600:hover{--tw-bg-opacity:1;background-color:rgb(138 79 255/var(--tw-bg-opacity))}.hover\:bg-primary-700:hover{--tw-bg-opacity:1;background-color:rgb(114 50 250/var(--tw-bg-opacity))}.hover\:bg-primary-alpha-2:hover{background-color:#3414ff08}.hover\:bg-primary-alpha-3:hover{background-color:#3705ff0f}.hover\:bg-primary-alpha-4:hover{background-color:#3505f51a}.hover\:\!text-neutral-12:hover{--tw-text-opacity:1!important;color:rgb(31 35 39/var(--tw-text-opacity))!important}.hover\:text-danger-alpha-12:hover{color:#55000de8}.hover\:text-link-hover:hover{--tw-text-opacity:1;color:rgb(62 201 203/var(--tw-text-opacity))}.hover\:text-neutral-12:hover{--tw-text-opacity:1;color:rgb(31 35 39/var(--tw-text-opacity))}.hover\:text-neutral-alpha-11:hover{color:#0002119d}.hover\:text-neutral-alpha-12:hover{color:#000509e3}.hover\:text-primary-12:hover{--tw-text-opacity:1;color:rgb(30 16 70/var(--tw-text-opacity))}.hover\:text-primary-200:hover{--tw-text-opacity:1;color:rgb(220 202 255/var(--tw-text-opacity))}.hover\:text-primary-300:hover{--tw-text-opacity:1;color:rgb(201 173 255/var(--tw-text-opacity))}.hover\:text-primary-alpha-11:hover{color:#2b019dcc}.hover\:text-primary-alpha-12:hover{color:#11013cf0}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-80:hover{opacity:.8}.hover\:opacity-\[0\.82\]:hover{opacity:.82}.hover\:shadow-1:hover{--tw-shadow:0px 2px 3px -2px rgba(0,0,61,.05),0px 3px 12px -4px rgba(0,0,0,.05),0px 4px 16px -8px rgba(0,0,0,.08);--tw-shadow-colored:0px 2px 3px -2px var(--tw-shadow-color),0px 3px 12px -4px var(--tw-shadow-color),0px 4px 16px -8px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:border-danger-alpha-9:focus{border-color:#db0007b7}.focus\:border-neutral-alpha-12:focus{border-color:#000509e3}.focus\:border-primary-400:focus{--tw-border-opacity:1;border-color:rgb(166 121 255/var(--tw-border-opacity))}.focus\:border-primary-alpha-9:focus{border-color:#3801d0c2}.focus\:bg-panel-1:focus{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.focus\:text-gray-200:focus{--tw-text-opacity:1;color:rgb(224 223 225/var(--tw-text-opacity))}.focus\:text-primary-300:focus{--tw-text-opacity:1;color:rgb(201 173 255/var(--tw-text-opacity))}.focus\:shadow-\[0px_0px_0px_2px_\#ff00001a\]:focus{--tw-shadow:0px 0px 0px 2px #ff00001a;--tw-shadow-colored:0px 0px 0px 2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:shadow-\[0px_0px_0px_2px_rgba\(2\2c 2\2c 52\2c 0\.08\)\]:focus{--tw-shadow:0px 0px 0px 2px rgba(2,2,52,.08);--tw-shadow-colored:0px 0px 0px 2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:outline-1:focus{outline-width:1px}.focus\:outline-neutral-alpha-6:focus{outline-color:#01012e22}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:bg-neutral-11:focus-visible{--tw-bg-opacity:1;background-color:rgb(96 100 108/var(--tw-bg-opacity))}.focus-visible\:bg-neutral-alpha-3:focus-visible{background-color:#00003b0d}.focus-visible\:bg-neutral-alpha-4:focus-visible{background-color:#02023414}.focus-visible\:bg-primary-10:focus-visible{--tw-bg-opacity:1;background-color:rgb(97 58 204/var(--tw-bg-opacity))}.focus-visible\:bg-primary-500:focus-visible{--tw-bg-opacity:1;background-color:rgb(152 100 255/var(--tw-bg-opacity))}.focus-visible\:bg-primary-alpha-3:focus-visible{background-color:#3705ff0f}.focus-visible\:bg-primary-alpha-4:focus-visible{background-color:#3505f51a}.focus-visible\:text-neutral-alpha-11:focus-visible{color:#0002119d}.focus-visible\:text-neutral-alpha-12:focus-visible{color:#000509e3}.focus-visible\:text-primary-alpha-11:focus-visible{color:#2b019dcc}.focus-visible\:text-primary-alpha-12:focus-visible{color:#11013cf0}.focus-visible\:text-white:focus-visible{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.focus-visible\:opacity-80:focus-visible{opacity:.8}.active\:bg-neutral-alpha-3:active{background-color:#00003b0d}.active\:opacity-80:active{opacity:.8}.active\:shadow-1:active{--tw-shadow:0px 2px 3px -2px rgba(0,0,61,.05),0px 3px 12px -4px rgba(0,0,0,.05),0px 4px 16px -8px rgba(0,0,0,.08);--tw-shadow-colored:0px 2px 3px -2px var(--tw-shadow-color),0px 3px 12px -4px var(--tw-shadow-color),0px 4px 16px -8px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-neutral-alpha-3:disabled{border-color:#00003b0d}.disabled\:bg-neutral-alpha-3:disabled{background-color:#00003b0d}.disabled\:bg-panel-3:disabled{--tw-bg-opacity:1;background-color:rgb(249 249 251/var(--tw-bg-opacity))}.disabled\:text-neutral-alpha-8:disabled{color:#00082f46}.group:hover .group-hover\:inline-block{display:inline-block}.group:hover .group-hover\:bg-primary-9{--tw-bg-opacity:1;background-color:rgb(105 62 221/var(--tw-bg-opacity))}.group:hover .group-hover\:text-neutral-11{--tw-text-opacity:1;color:rgb(96 100 108/var(--tw-text-opacity))}.group:hover .group-hover\:text-neutral-12{--tw-text-opacity:1;color:rgb(31 35 39/var(--tw-text-opacity))}.group:hover .group-hover\:text-neutral-alpha-11{color:#0002119d}.group:hover .group-hover\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.group[aria-selected=true] .group-aria-selected\:bg-neutral-3{--tw-bg-opacity:1;background-color:rgb(242 242 245/var(--tw-bg-opacity))}@media not all and (min-width:640px){.max-sm\:mb-8{margin-bottom:2rem}.max-sm\:w-full{width:100%}}@media (min-width:640px){.sm\:mx-0{margin-left:0;margin-right:0}.sm\:mx-auto{margin-left:auto;margin-right:auto}.sm\:mb-10{margin-bottom:2.5rem}.sm\:mb-20{margin-bottom:5rem}.sm\:mb-4{margin-bottom:1rem}.sm\:mb-\[156px\]{margin-bottom:156px}.sm\:mb-\[600px\]{margin-bottom:600px}.sm\:ml-0{margin-left:0}.sm\:mr-2{margin-right:.5rem}.sm\:mr-4{margin-right:1rem}.sm\:block{display:block}.sm\:flex{display:flex}.sm\:grid{display:grid}.sm\:hidden{display:none}.sm\:h-\[550px\]{height:550px}.sm\:h-auto{height:auto}.sm\:min-h-16{min-height:4rem}.sm\:w-1\/2{width:50%}.sm\:w-\[292px\]{width:292px}.sm\:w-\[318px\]{width:318px}.sm\:w-\[532px\]{width:532px}.sm\:w-auto{width:auto}.sm\:w-fit{width:-moz-fit-content;width:fit-content}.sm\:w-full{width:100%}.sm\:max-w-\[650px\]{max-width:650px}.sm\:max-w-full{max-width:100%}.sm\:flex-1{flex:1 1 0%}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:flex-row-reverse{flex-direction:row-reverse}.sm\:flex-col{flex-direction:column}.sm\:flex-wrap{flex-wrap:wrap}.sm\:content-start{align-content:flex-start}.sm\:justify-start{justify-content:flex-start}.sm\:justify-center{justify-content:center}.sm\:justify-between{justify-content:space-between}.sm\:gap-4{gap:1rem}.sm\:gap-6{gap:1.5rem}.sm\:gap-8{gap:2rem}.sm\:gap-\[58px\]{gap:58px}.sm\:gap-x-5{-moz-column-gap:1.25rem;column-gap:1.25rem}.sm\:gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.sm\:gap-y-10{row-gap:2.5rem}.sm\:gap-y-6{row-gap:1.5rem}.sm\:space-x-0>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(0px*(1 - var(--tw-space-x-reverse)));margin-right:calc(0px*var(--tw-space-x-reverse))}.sm\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(0px*var(--tw-space-y-reverse));margin-top:calc(0px*(1 - var(--tw-space-y-reverse)))}.sm\:border-r{border-right-width:1px}.sm\:border-b-transparent{border-bottom-color:transparent}.sm\:p-6{padding:1.5rem}.sm\:p-\[6px\]{padding:6px}.sm\:py-20{padding-bottom:5rem;padding-top:5rem}.sm\:pb-10{padding-bottom:2.5rem}.sm\:pb-20{padding-bottom:5rem}.sm\:pb-\[164px\]{padding-bottom:164px}.sm\:pb-\[80px\]{padding-bottom:80px}.sm\:pr-4{padding-right:1rem}.sm\:pt-10{padding-top:2.5rem}.sm\:pt-20{padding-top:5rem}.sm\:pt-24{padding-top:6rem}.sm\:pt-6{padding-top:1.5rem}.sm\:pt-\[168px\]{padding-top:168px}.sm\:text-center{text-align:center}.sm\:text-7{font-size:36px;letter-spacing:-.32px;line-height:42px}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}.sm\:text-7-regular{font-weight:400}.sm\:text-7-bold,.sm\:text-7-regular{font-family:Inter Variable,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:36px;font-style:normal;letter-spacing:-.32px;line-height:42px}.sm\:text-7-bold{font-weight:700}.sm\:text-11-bold{font-family:Inter Variable,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:64px;font-style:normal;font-weight:700;letter-spacing:-1.2px;line-height:64px}}@media (min-width:768px){.md\:my-8{margin-bottom:2rem;margin-top:2rem}.md\:-mt-24{margin-top:-6rem}.md\:mb-0{margin-bottom:0}.md\:mb-16{margin-bottom:4rem}.md\:mb-\[152px\]{margin-bottom:152px}.md\:mb-\[220px\]{margin-bottom:220px}.md\:flex{display:flex}.md\:h-\[118px\]{height:118px}.md\:w-1\/2{width:50%}.md\:w-\[150px\]{width:150px}.md\:w-\[194px\]{width:194px}.md\:w-\[210px\]{width:210px}.md\:w-\[259px\]{width:259px}.md\:w-\[347px\]{width:347px}.md\:w-\[348px\]{width:348px}.md\:w-\[535px\]{width:535px}.md\:flex-1{flex:1 1 0%}.md\:flex-none{flex:none}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:gap-6{gap:1.5rem}.md\:space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.md\:space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1.5rem*var(--tw-space-x-reverse))}.md\:rounded-2xl{border-radius:1rem}.md\:border-r{border-right-width:1px}.md\:border-b-gray-200{--tw-border-opacity:1;border-bottom-color:rgb(224 223 225/var(--tw-border-opacity))}.md\:border-r-transparent{border-right-color:transparent}.md\:px-0{padding-left:0;padding-right:0}.md\:px-\[clamp\(20px\2c 12vw\2c 122px\)\]{padding-left:clamp(20px,12vw,122px);padding-right:clamp(20px,12vw,122px)}.md\:pb-36{padding-bottom:9rem}.md\:pb-\[165px\]{padding-bottom:165px}.md\:pl-8{padding-left:2rem}.md\:pt-\[650px\]{padding-top:650px}.md\:text-center{text-align:center}.md\:text-7{font-size:36px;letter-spacing:-.32px;line-height:42px}.md\:text-8{font-size:40px;letter-spacing:-.42px;line-height:48px}.md\:text-lg\/tight{font-size:1.125rem;line-height:1.25}}@media (min-width:1024px){.lg\:sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.lg\:visible{visibility:visible}.lg\:static{position:static}.lg\:absolute{position:absolute}.lg\:relative{position:relative}.lg\:bottom-0{bottom:0}.lg\:left-0{left:0}.lg\:right-2{right:.5rem}.lg\:right-2\.5{right:.625rem}.lg\:top-full{top:100%}.lg\:z-10{z-index:10}.lg\:order-none{order:0}.lg\:float-right{float:right}.lg\:mx-0{margin-left:0;margin-right:0}.lg\:mb-0{margin-bottom:0}.lg\:mb-10{margin-bottom:2.5rem}.lg\:mb-14{margin-bottom:3.5rem}.lg\:mb-32{margin-bottom:8rem}.lg\:mb-\[275px\]{margin-bottom:275px}.lg\:ml-2{margin-left:.5rem}.lg\:mt-2{margin-top:.5rem}.lg\:mt-20{margin-top:5rem}.lg\:\!block{display:block!important}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:inline-flex{display:inline-flex}.lg\:grid{display:grid}.lg\:hidden{display:none}.lg\:h-1\/2{height:50%}.lg\:h-auto{height:auto}.lg\:h-full{height:100%}.lg\:max-h-24{max-height:6rem}.lg\:max-h-\[calc\(100vh_-_var\(--navbar\)_-_1rem\)\]{max-height:calc(100vh - var(--navbar) - 1rem)}.lg\:min-h-\[1000px\]{min-height:1000px}.lg\:w-1\/3{width:33.333333%}.lg\:w-\[305px\]{width:305px}.lg\:w-\[440px\]{width:440px}.lg\:w-\[488px\]{width:488px}.lg\:w-\[532px\]{width:532px}.lg\:w-\[552px\]{width:552px}.lg\:w-auto{width:auto}.lg\:w-fit{width:-moz-fit-content;width:fit-content}.lg\:w-full{width:100%}.lg\:min-w-full{min-width:100%}.lg\:max-w-\[472px\]{max-width:472px}.lg\:max-w-lg{max-width:32rem}.lg\:flex-auto{flex:1 1 auto}.lg\:basis-\[588px\]{flex-basis:588px}.lg\:translate-x-0{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.lg\:transform-none{transform:none}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:flex-col{flex-direction:column}.lg\:items-start{align-items:flex-start}.lg\:items-center{align-items:center}.lg\:justify-between{justify-content:space-between}.lg\:self-center{align-self:center}.lg\:overflow-auto{overflow:auto}.lg\:overflow-visible{overflow:visible}.lg\:rounded-2xl{border-radius:1rem}.lg\:border-t{border-top-width:1px}.lg\:bg-spBlack{--tw-bg-opacity:1;background-color:rgb(35 35 35/var(--tw-bg-opacity))}.lg\:bg-transparent{background-color:transparent}.lg\:bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.lg\:p-0{padding:0}.lg\:px-0{padding-left:0;padding-right:0}.lg\:px-6{padding-left:1.5rem;padding-right:1.5rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:px-gs-1{padding-left:var(--gridspace);padding-right:var(--gridspace)}.lg\:py-1{padding-bottom:.25rem;padding-top:.25rem}.lg\:py-16{padding-bottom:4rem;padding-top:4rem}.lg\:py-20{padding-bottom:5rem;padding-top:5rem}.lg\:py-3{padding-bottom:.75rem;padding-top:.75rem}.lg\:py-3\.5{padding-bottom:.875rem;padding-top:.875rem}.lg\:py-32{padding-bottom:8rem;padding-top:8rem}.lg\:py-7{padding-bottom:1.75rem;padding-top:1.75rem}.lg\:pb-16{padding-bottom:4rem}.lg\:pb-32{padding-bottom:8rem}.lg\:pl-8{padding-left:2rem}.lg\:pr-9{padding-right:2.25rem}.lg\:pt-0{padding-top:0}.lg\:pt-16{padding-top:4rem}.lg\:pt-20{padding-top:5rem}.lg\:pt-\[184px\]{padding-top:184px}.lg\:text-left{text-align:left}.lg\:text-5{font-size:24px;letter-spacing:-.28px;line-height:36px}.lg\:text-base{font-size:1rem;line-height:1.5rem}.lg\:text-primary-900{--tw-text-opacity:1;color:rgb(23 10 51/var(--tw-text-opacity))}.lg\:opacity-100{opacity:1}.lg\:shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.lg\:ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.lg\:ring-gray-900\/5{--tw-ring-color:hsla(0,0%,9%,.05)}.lg\:container-post-sidebar{flex-basis:var(--post-sidebar);width:var(--post-sidebar)}.lg\:container-post-content{flex-basis:calc(100% - var(--post-sidebar));width:calc(100% - var(--post-sidebar))}.hover\:lg\:bg-spBlack:hover{--tw-bg-opacity:1;background-color:rgb(35 35 35/var(--tw-bg-opacity))}}@media (min-width:1248px){.xl\:sticky{position:sticky}.xl\:left-auto{left:auto}.xl\:right-auto{right:auto}.xl\:top-16{top:4rem}.xl\:z-0{z-index:0}.xl\:mb-0{margin-bottom:0}.xl\:mb-4{margin-bottom:1rem}.xl\:ml-0{margin-left:0}.xl\:ml-\[20px\]{margin-left:20px}.xl\:mr-\[calc\(100\%_-_400px\)\]{margin-right:calc(100% - 400px)}.xl\:mt-0{margin-top:0}.xl\:block{display:block}.xl\:flex{display:flex}.xl\:hidden{display:none}.xl\:max-h-screen-navbar-offset{max-height:calc(100vh - var(--navbar))}.xl\:w-1\/4{width:25%}.xl\:w-\[300px\]{width:300px}.xl\:w-\[680px\]{width:680px}.xl\:flex-row{flex-direction:row}.xl\:rounded-none{border-radius:0}.xl\:bg-panel-1{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.xl\:bg-transparent{background-color:transparent}.xl\:p-0{padding:0}.xl\:px-0{padding-left:0;padding-right:0}.xl\:px-8{padding-left:2rem;padding-right:2rem}.xl\:pr-4{padding-right:1rem}.xl\:sticky-dock{position:sticky;top:var(--navbar)}.xl\:container-post-toc{flex-basis:calc(100% - var(--post-body));width:calc(100% - var(--post-body))}.xl\:container-post-body{flex-basis:var(--post-body);width:var(--post-body)}}@media (min-width:1440px){.\32xl\:mx-1{margin-left:.25rem;margin-right:.25rem}.\32xl\:block{display:block}}.\[\&\:\:-webkit-search-cancel-button\]\:hidden::-webkit-search-cancel-button{display:none}@media (min-width:1024px){.lg\:\[\&\:nth-child\(n\+3\)\]\:-mt-2:nth-child(n+3){margin-top:-.5rem}}.header-module--nav--ec8cc{height:calc(var(--baseline)*1.6)}@media (min-width:1024px){.header-module--nav--ec8cc{height:var(--navbar-height)}}.header-module--logo--07b7e{height:calc(var(--baseline)*.8)}@media (min-width:1024px){.header-module--logo--07b7e{height:var(--baseline)}}.header-module--navbarItems--065d7{top:calc(var(--baseline)*1.6)}@media (min-width:1024px){.header-module--navbarItems--065d7{top:var(--navbar-height)}}.header-module--submenu--4180b{border-bottom-left-radius:8px;border-bottom-right-radius:8px;box-shadow:0 4px 4px rgba(0,0,0,.25);min-width:11rem}.header-module--submenu--4180b a:after{bottom:.2rem;content:""}.header-module--navLink--a00a5:after{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));background:hsla(0,0%,100%,0);bottom:.25rem;content:"";height:2px;opacity:0;position:absolute;right:0;transition:opacity .1s ease-out;width:0}.header-module--toggler--2389f span{height:.17rem;transform:translateY(0);transform-origin:center;transition:.45s cubic-bezier(.45,.45,.37,1.36);transition-property:background-color,transform;width:1.9rem}.header-module--toggler--2389f span:after,.header-module--toggler--2389f span:before{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-radius:inherit;content:"";display:inherit;height:inherit;left:0;position:absolute;top:0;transform-origin:center;transition:transform .45s cubic-bezier(.45,.45,.37,1.36);width:inherit}.header-module--toggler--2389f span:before{transform:translateY(-.45rem)}.header-module--toggler--2389f span:after{transform:translateY(.45rem)}@media (min-width:640px){.header-module--toggler--2389f span:before{transform:translateY(-.5rem)}.header-module--toggler--2389f span:after{transform:translateY(.5rem)}}.header-module--toggler--2389f[aria-expanded=true] span{transform:translate(1rem)}.header-module--toggler--2389f[aria-expanded=true] span:before{transform:translate(-1rem) rotate(135deg)}.header-module--toggler--2389f[aria-expanded=true] span:after{transform:translate(-1rem) rotate(-135deg)}@media (min-width:1024px){.header-module--navbarItems--065d7{transition-property:none}.header-module--navbarItems--065d7 li:nth-child(odd){background-color:transparent}.header-module--navLink--a00a5{--tw-text-opacity:1;color:rgb(224 223 225/var(--tw-text-opacity))}}.searchBox-module--searchHits--c141f ul{margin-bottom:0}.advertise-module--advertise--95c4d{font-size:16px}.advertise-module--audienceContainer--da872{background:linear-gradient(180deg,rgba(114,50,250,0),rgba(114,50,250,.06) 50%,hsla(0,0%,100%,.12))}@media (min-width:768px){.advertise-module--contact--91b92{box-shadow:0 2.201359510421753px 5.538156986236572px 0 transparent,0 5.118332862854004px 12.876648902893066px 0 transparent,0 9.191340446472168px 23.123476028442383px 0 transparent,0 15.254220962524414px 38.376407623291016px 0 rgba(0,0,0,.01),0 25.130813598632812px 63.223838806152344px 0 rgba(0,0,0,.03),0 43.92137908935547px 110.49694061279297px 0 rgba(0,0,0,.07),0 95px 239px 0 rgba(0,0,0,.16)}}.s65o7al{border:1px solid transparent;border-radius:2px;cursor:pointer;display:inline-block;font-weight:700;padding:.25rem .5rem;text-align:center;-webkit-text-decoration:none;text-decoration:none;transition:.3s ease;transition-property:border-color,background-color,color}.s65o7al[data-type=outline]{background-color:#fff;border-radius:4px}.s65o7al:not([data-type=outline]){color:#fff}.s65o7al:not([data-type=outline])[data-color=primary]{background-color:#7232fa;border-color:#7232fa}.s65o7al:not([data-type=outline])[data-color=primary]:active,.s65o7al:not([data-type=outline])[data-color=primary]:hover{background-color:#9864ff;color:#fff}.s65o7al:not([data-type=outline])[data-color=pink]{background-color:#fa0b7e;border-color:#fa0b7e}.s65o7al:not([data-type=outline])[data-color=pink]:active,.s65o7al:not([data-type=outline])[data-color=pink]:hover{background-color:#fa3292;color:#fff}.s65o7al:not([data-type=outline])[data-color=darkGrey]{background-color:#333;border-color:#333}.s65o7al:not([data-type=outline])[data-color=darkGrey]:active,.s65o7al:not([data-type=outline])[data-color=darkGrey]:hover{background-color:#232023;color:#fff}.s65o7al[disabled],.s65o7al[disabled]:hover{background-color:#efefef;border-color:#efefef;color:#a2a2a2;cursor:default}.s65o7al[data-size=small]{font-size:11px;height:1.77778rem;line-height:1.18519rem}.s65o7al[data-size=medium]{font-size:15px;height:1.77778rem;line-height:1.18519rem}.s1aa88yd{font-size:1rem;font-weight:var(--s1aa88yd-0);line-height:1.77778rem;margin-bottom:1.77778rem;margin-top:0}.s1aa88yd[data-size=small]{font-size:.75614rem;line-height:1.01587rem;margin-bottom:.88889rem;margin-top:0;padding:0}.s1aa88yd[data-size=large]{font-size:1.15rem;line-height:1.33333rem;margin-bottom:2.37037rem;margin-top:0;padding:0}@media (min-width:936px){.s1aa88yd[data-size=large]{font-size:1.25rem;line-height:1.77778rem;margin-bottom:1.77778rem}}.si97ov1{background:#535beb;background-image:radial-gradient(circle at 29% 55%,hsla(0,0%,99%,.05) 0,hsla(0,0%,99%,.05) 4%,transparent 0,transparent 44%,transparent 0,transparent 100%),radial-gradient(circle at 85% 89%,hsla(0,0%,99%,.05) 0,hsla(0,0%,99%,.05) 51%,transparent 0,transparent 52%,transparent 0,transparent 100%),radial-gradient(circle at 6% 90%,hsla(0,0%,99%,.05) 0,hsla(0,0%,99%,.05) 53%,transparent 0,transparent 64%,transparent 0,transparent 100%),radial-gradient(circle at 35% 75%,hsla(0,0%,99%,.05) 0,hsla(0,0%,99%,.05) 6%,transparent 0,transparent 98%,transparent 0,transparent 100%),radial-gradient(circle at 56% 75%,hsla(0,0%,99%,.05) 0,hsla(0,0%,99%,.05) 16%,transparent 0,transparent 23%,transparent 0,transparent 100%),radial-gradient(circle at 42% 0,hsla(0,0%,99%,.05) 0,hsla(0,0%,99%,.05) 3%,transparent 0,transparent 26%,transparent 0,transparent 100%),radial-gradient(circle at 29% 28%,hsla(0,0%,99%,.05) 0,hsla(0,0%,99%,.05) 51%,transparent 0,transparent 75%,transparent 0,transparent 100%),radial-gradient(circle at 77% 21%,hsla(0,0%,99%,.05) 0,hsla(0,0%,99%,.05) 35%,transparent 0,transparent 55%,transparent 0,transparent 100%),radial-gradient(circle at 65% 91%,hsla(0,0%,99%,.05) 0,hsla(0,0%,99%,.05) 46%,transparent 0,transparent 76%,transparent 0,transparent 100%),linear-gradient(45deg,#535beb,#4c0bae);background-position:top;background-repeat:no-repeat;padding-top:1.77778rem}.wny53kd{align-items:center;display:flex;flex-direction:row;justify-content:center;margin:0 auto;max-width:1248px;padding:0 2rem}.wny53kd .laptop{display:none;-o-object-fit:cover;object-fit:cover;-o-object-position:100% 0;object-position:100% 0}.wny53kd h1,.wny53kd p{margin-top:0;text-shadow:0 0 5px rgba(0,0,0,.5),0 0 10px rgba(0,0,0,.5)}@media (min-width:936px){.wny53kd{padding:0 1rem}.wny53kd h1,.wny53kd p{margin-left:1rem}.wny53kd .left-col{flex-basis:38%;max-width:38%}.wny53kd .right-col{flex-basis:62%;max-width:62%}.wny53kd .laptop{display:block;margin:.88889rem 0 1.77778rem 1.77778rem}}.h7mz791{color:#fff;font-size:2.25rem;line-height:3rem;margin-top:3.55556rem;text-align:center}@media (min-width:624px){.h7mz791{text-align:left}}.s1xj59yp{color:#fff;font-size:1rem;font-weight:400;max-width:680px;text-align:center}@media (min-width:624px){.s1xj59yp{font-size:1.25rem;max-width:100%;text-align:left}}.cmmeiii{box-shadow:0 3px 5px rgba(0,0,0,.2);display:block;margin:2rem auto 3rem;width:275px}:host,:root{--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Solid";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Regular";--fa-font-light:normal 300 1em/1 "Font Awesome 6 Light";--fa-font-thin:normal 100 1em/1 "Font Awesome 6 Thin";--fa-font-duotone:normal 900 1em/1 "Font Awesome 6 Duotone";--fa-font-sharp-solid:normal 900 1em/1 "Font Awesome 6 Sharp";--fa-font-sharp-regular:normal 400 1em/1 "Font Awesome 6 Sharp";--fa-font-sharp-light:normal 300 1em/1 "Font Awesome 6 Sharp";--fa-font-sharp-thin:normal 100 1em/1 "Font Awesome 6 Sharp";--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}svg:not(:host).svg-inline--fa,svg:not(:root).svg-inline--fa{box-sizing:content-box;overflow:visible}.svg-inline--fa{display:var(--fa-display,inline-block);height:1em;overflow:visible;vertical-align:-.125em}.svg-inline--fa.fa-2xs{vertical-align:.1em}.svg-inline--fa.fa-xs{vertical-align:0}.svg-inline--fa.fa-sm{vertical-align:-.07143em}.svg-inline--fa.fa-lg{vertical-align:-.2em}.svg-inline--fa.fa-xl{vertical-align:-.25em}.svg-inline--fa.fa-2xl{vertical-align:-.3125em}.svg-inline--fa.fa-pull-left{margin-right:var(--fa-pull-margin,.3em);width:auto}.svg-inline--fa.fa-pull-right{margin-left:var(--fa-pull-margin,.3em);width:auto}.svg-inline--fa.fa-li{top:.25em;width:var(--fa-li-width,2em)}.svg-inline--fa.fa-fw{width:var(--fa-fw-width,1.25em)}.fa-layers svg.svg-inline--fa{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.fa-layers-counter,.fa-layers-text{display:inline-block;position:absolute;text-align:center}.fa-layers{display:inline-block;height:1em;position:relative;text-align:center;vertical-align:-.125em;width:1em}.fa-layers svg.svg-inline--fa{transform-origin:center center}.fa-layers-text{left:50%;top:50%;transform:translate(-50%,-50%);transform-origin:center center}.fa-layers-counter{background-color:var(--fa-counter-background-color,#ff253a);border-radius:var(--fa-counter-border-radius,1em);box-sizing:border-box;color:var(--fa-inverse,#fff);line-height:var(--fa-counter-line-height,1);max-width:var(--fa-counter-max-width,5em);min-width:var(--fa-counter-min-width,1.5em);overflow:hidden;padding:var(--fa-counter-padding,.25em .5em);right:var(--fa-right,0);text-overflow:ellipsis;top:var(--fa-top,0);transform:scale(var(--fa-counter-scale,.25));transform-origin:top right}.fa-layers-bottom-right{bottom:var(--fa-bottom,0);right:var(--fa-right,0);top:auto;transform:scale(var(--fa-layers-scale,.25));transform-origin:bottom right}.fa-layers-bottom-left{bottom:var(--fa-bottom,0);left:var(--fa-left,0);right:auto;top:auto;transform:scale(var(--fa-layers-scale,.25));transform-origin:bottom left}.fa-layers-top-right{right:var(--fa-right,0);top:var(--fa-top,0);transform:scale(var(--fa-layers-scale,.25));transform-origin:top right}.fa-layers-top-left{left:var(--fa-left,0);right:auto;top:var(--fa-top,0);transform:scale(var(--fa-layers-scale,.25));transform-origin:top left}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:var(--fa-li-margin,2.5em);padding-left:0}.fa-ul>li{position:relative}.fa-li{left:calc(var(--fa-li-width, 2em)*-1);line-height:inherit;position:absolute;text-align:center;width:var(--fa-li-width,2em)}.fa-border{border-color:var(--fa-border-color,#eee);border-radius:var(--fa-border-radius,.1em);border-style:var(--fa-border-style,solid);border-width:var(--fa-border-width,.08em);padding:var(--fa-border-padding,.2em .25em .15em)}.fa-pull-left{float:left;margin-right:var(--fa-pull-margin,.3em)}.fa-pull-right{float:right;margin-left:var(--fa-pull-margin,.3em)}.fa-beat{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-name:fa-beat;animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-name:fa-bounce;animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}.fa-fade{animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-name:fa-fade;animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-beat-fade,.fa-fade{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s)}.fa-beat-fade{animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-name:fa-beat-fade;animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-flip{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-name:fa-flip;animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-name:fa-shake;animation-timing-function:var(--fa-animation-timing,linear)}.fa-shake,.fa-spin{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal)}.fa-spin{animation-duration:var(--fa-animation-duration,2s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-name:fa-spin;animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-name:fa-spin;animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{animation-delay:-1ms;animation-duration:1ms;animation-iteration-count:1;transition-delay:0s;transition-duration:0s}}@keyframes fa-beat{0%,90%{transform:scale(1)}45%{transform:scale(var(--fa-beat-scale,1.25))}}@keyframes fa-bounce{0%{transform:scale(1) translateY(0)}10%{transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}@keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);transform:scale(1)}50%{opacity:1;transform:scale(var(--fa-beat-fade-scale,1.125))}}@keyframes fa-flip{50%{transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@keyframes fa-shake{0%{transform:rotate(-15deg)}4%{transform:rotate(15deg)}24%,8%{transform:rotate(-18deg)}12%,28%{transform:rotate(18deg)}16%{transform:rotate(-22deg)}20%{transform:rotate(22deg)}32%{transform:rotate(-12deg)}36%{transform:rotate(12deg)}40%,to{transform:rotate(0deg)}}@keyframes fa-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.fa-rotate-90{transform:rotate(90deg)}.fa-rotate-180{transform:rotate(180deg)}.fa-rotate-270{transform:rotate(270deg)}.fa-flip-horizontal{transform:scaleX(-1)}.fa-flip-vertical{transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{transform:scale(-1)}.fa-rotate-by{transform:rotate(var(--fa-rotate-angle,0))}.fa-stack{display:inline-block;height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0;z-index:var(--fa-stack-z-index,auto)}.svg-inline--fa.fa-stack-1x{height:1em;width:1.25em}.svg-inline--fa.fa-stack-2x{height:2em;width:2.5em}.fa-inverse{color:var(--fa-inverse,#fff)}.fa-sr-only,.fa-sr-only-focusable:not(:focus),.sr-only,.sr-only-focusable:not(:focus){clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.svg-inline--fa .fa-primary{fill:var(--fa-primary-color,currentColor);opacity:var(--fa-primary-opacity,1)}.svg-inline--fa .fa-secondary{fill:var(--fa-secondary-color,currentColor)}.svg-inline--fa .fa-secondary,.svg-inline--fa.fa-swap-opacity .fa-primary{opacity:var(--fa-secondary-opacity,.4)}.svg-inline--fa.fa-swap-opacity .fa-secondary{opacity:var(--fa-primary-opacity,1)}.svg-inline--fa mask .fa-primary,.svg-inline--fa mask .fa-secondary{fill:#000}.fa-duotone.fa-inverse,.fad.fa-inverse{color:var(--fa-inverse,#fff)}.s1tg6c5w{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:1.5rem 1rem 0;position:relative;text-align:center}@media (min-width:624px){.s1tg6c5w{padding:2rem 0 0}}@media (min-width:936px){.s1tg6c5w{padding:3rem 0 0}}.s11mk4vi{border:1px solid #ccc;border-radius:36px;box-shadow:inset 2px 3px 6px rgba(0,0,0,.1);color:#000;display:flex;width:calc(100% - 30px)}@media (min-width:624px){.s11mk4vi{width:calc(100% - 60px)}}@media (min-width:936px){.s11mk4vi{width:826px}}@media (min-width:1248px){.s11mk4vi{width:1108px}}.s1bqk6ig.s1bqk6ig.s1bqk6ig{background:transparent;border:none;height:2.66667rem;margin:0 0 0 15px;outline:none;padding:1rem;width:100%}@media (min-width:624px){.s1bqk6ig.s1bqk6ig.s1bqk6ig{margin:0 0 0 20px}}@media (min-width:936px){.s1bqk6ig.s1bqk6ig.s1bqk6ig{margin:0 0 0 35px}}.s1bqk6ig.s1bqk6ig.s1bqk6ig::-moz-placeholder{color:#898787;font-size:1.3225rem}.s1bqk6ig.s1bqk6ig.s1bqk6ig::placeholder{color:#898787;font-size:1.3225rem}.sc801iq{background:linear-gradient(180deg,#f9fafc 18.36%,#eff3f6 72.54%);border:0;border-left:1px solid #ccc;border-radius:0 50px 50px 0;box-sizing:border-box;color:#4f4f4f;padding:0;width:80px}.sc801iq i{color:#898787}.sc801iq:hover{cursor:pointer}.sc801iq:hover i{color:#333}.spcxsjo{display:flex;margin:0 auto 1.5rem;width:100%}@media (min-width:624px){.spcxsjo{margin:0 auto 1.5rem}}@media (min-width:936px){.spcxsjo{margin:0 auto 2rem;max-width:936px}}@media (min-width:1248px){.spcxsjo{max-width:1248px}}.c17krh2w{align-items:center;color:#bbb;display:flex;margin:0 .5rem}@media (min-width:624px){.c17krh2w{font-size:1.8rem;margin:0 1rem}}.c17krh2w:hover{color:#a0a0a0}.c1s9omxe{color:#bbb;cursor:pointer;font-size:1.2rem}@media (min-width:624px){.c1s9omxe{font-size:1.8rem}}.c1s9omxe:hover{color:#a0a0a0}.c1rlo65d{overflow:hidden}.c1rlo65d.left-shadow{box-shadow:inset 9px 0 10px -12px rgba(0,0,0,.7)}.c1rlo65d.right-shadow{box-shadow:inset -9px 0 10px -12px rgba(0,0,0,.7)}.c1rlo65d.left-right-shadow{box-shadow:inset 9px 0 10px -12px rgba(0,0,0,.7),inset -9px 0 10px -12px rgba(0,0,0,.7)}.c1ut87k4{display:flex;flex:none;transition:all 1.5s ease 0s}.b1io5ar7{display:inline-block;margin:.25rem 0;min-width:8rem;padding:0 .8rem}@media (min-width:624px){.b1io5ar7{margin:1rem 0;min-width:11.6rem;padding:0 1rem}}.bccuu3 .gatsby-image-wrapper{display:block;max-height:8rem;min-height:8rem;width:100%}.bccuu3 .gatsby-image-wrapper img{height:100%;position:absolute;width:100%}@media (min-width:624px){.bccuu3 .gatsby-image-wrapper{max-height:12rem;min-height:12rem}}.s4zmyo9{padding:2.5rem 1rem;position:relative}@media (min-width:624px){.s4zmyo9{padding:3.5rem 0}}@media (min-width:936px){.s4zmyo9{padding:4rem 0}}.hpuu1tj{align-items:center;display:flex;flex-direction:column;justify-content:center}.hpuu1tj h2{font-size:1rem;font-weight:500;line-height:1.25rem;margin:0 0 40px;text-align:center}@media (min-width:624px){.hpuu1tj h2{font-size:1.25rem;line-height:1.5rem;margin:0 0 30px}}@media (min-width:936px){.hpuu1tj h2{font-size:1.5rem;line-height:1.5rem}}.c1hr6q9g.c1hr6q9g.c1hr6q9g{border:0;border-radius:4px;box-shadow:0 3px 5px rgba(0,0,0,.2);color:#eee;height:2.66667rem;line-height:2.66667rem;margin:0 0 1.77778rem;padding:0 2rem;transition:.3s}.sc6c8ht{background-color:#2a2a2a;color:#aaa;padding:2.66667rem 0}.wif8zcs{margin:0 auto;max-width:1248px;padding:0 1rem}.h1r1loop{color:#ccc;font-size:1.25rem;font-weight:400;margin:0 0 1.77778rem;padding:0;text-align:center}.l60zia7{display:flex;flex-flow:row wrap}.l60zia7 .logoContainer{flex-basis:var(--l60zia7-0);max-width:var(--l60zia7-0);text-align:center}.l60zia7 .logoContainer p{margin-bottom:0}.l60zia7 .logoContainer a{color:#aaa;min-height:1.77778rem}.l60zia7 .logoContainer a:hover{color:#fff}.l60zia7 .logoContainer>div img{margin:0 auto;width:var(--l60zia7-1)}@media (min-width:936px){.l60zia7 .logoContainer{flex-basis:25%;max-width:25%}}.l60zia7 img{height:2.66667rem;margin:0 auto}.l60zia7 p{font-size:.64rem}@media (min-width:936px){.l60zia7{flex-wrap:nowrap}}.su4olrg{background-color:#fff;color:#222;padding:2.66667rem 0;text-align:center}.w1an1svt{margin:0 auto;max-width:1248px;padding:0 1rem}.hj4srrs{color:#333;margin-bottom:.88889rem;margin-top:0;text-align:center}.wzzogk4{color:#222;display:flex;flex-direction:column;text-align:center}.wzzogk4 .whyContainer{flex-basis:100%;max-width:100%;padding:0 1rem;text-align:center}@media (min-width:936px){.wzzogk4 .whyContainer{flex-basis:33%;max-width:33%}}.wzzogk4 img{margin:auto;max-width:70%}.wzzogk4 p{font-size:.64rem;line-height:.88889rem}@media (min-width:936px){.wzzogk4{flex-direction:row}}.s2mwcf5{background-color:#fff;color:#aaa;padding:2.66667rem 0}.w1jigb82{margin:0 auto;max-width:1248px;padding:0 1rem}.b1hv0kfn{border:2px solid transparent;-o-border-image:linear-gradient(90deg,#1e3591,#fdbb2d,#b21f1f);border-image:linear-gradient(90deg,#1e3591,#fdbb2d,#b21f1f);border-image-slice:1;border-radius:6px;box-shadow:2px 2px 4px rgba(0,0,0,.2);box-sizing:border-box;color:#222;display:flex;flex-flow:row wrap;justify-content:center;margin:0 auto!important;margin:0 -.5rem;max-width:62rem;padding-bottom:1.77778rem;width:96%}.b1hv0kfn>div{flex-basis:50%;max-width:50%;padding:0}@media (min-width:624px){.b1hv0kfn>div{padding:0 1rem}}.b1hv0kfn h2{margin:1.77778rem 0 .88889rem}.b1hv0kfn .introduction{flex-basis:83%;max-width:83%}@media (min-width:936px){.b1hv0kfn .introduction{flex-basis:55%;max-width:55%}}.b1hv0kfn .reasons{margin:1.77778rem 0 .88889rem}.b1hv0kfn .reasons li{list-style-position:inside;list-style-type:disc}.b1hv0kfn .price-unit{flex-basis:83%;margin:0 0 .88889rem;max-width:83%}@media (min-width:936px){.b1hv0kfn .price-unit{flex-basis:41%;margin-top:3.55556rem;max-width:41%}}.b1hv0kfn .price-unit label{color:#aaa;line-height:3.55556rem;margin-bottom:0;transition:all .3s ease-out}.b1hv0kfn .price-unit .price-content{box-sizing:border-box;display:flex;flex-flow:row wrap;justify-content:center;margin:0 -.5rem}.b1hv0kfn .price-unit .price-content .main-price{flex-basis:42%;font-size:.8rem;max-width:42%}@media (min-width:624px){.b1hv0kfn .price-unit .price-content .main-price{font-size:1rem}}.b1hv0kfn .monthly-account .main-price .price-annual{opacity:0;transform:perspective(600px) rotateY(-1turn)}.b1hv0kfn .monthly-account .main-price .price-monthly{opacity:1;transform:perspective(600px) rotate3d(0,0,0,-1turn)}.b1hv0kfn .main-price{align-items:center;display:flex;justify-content:center;padding:0}.b1hv0kfn .main-price .price-frame{bottom:1.77778rem;display:flex;font-size:3.05176rem;line-height:3.55556rem;-ms-perspective:600px;perspective:600px;-ms-perspective-origin:50%;perspective-origin:50%;position:relative;transform-style:preserve-3d;width:1.25em}@media (min-width:936px){.b1hv0kfn .main-price .price-frame{font-size:3.05176rem}}.b1hv0kfn .main-price .price-annual,.b1hv0kfn .main-price .price-monthly{font-weight:700;margin:0;padding:0 .5rem 0 0;position:absolute;transition:all .6s cubic-bezier(.32,.01,.48,1.44)}.b1hv0kfn .main-price .price-monthly{opacity:1;transform:perspective(600px) rotate3d(0,0,0,1turn)}.b1hv0kfn .main-price .price-monthly:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 455 455'%3E%3Cg fill='orange'%3E%3Cpolygon points='227.5 150 133.7 200 45.5 150 84.3 330 370.7 330 409.5 150 321.2 200'/%3E%3Crect width='280' height='55' x='87.5' y='360'/%3E%3Ccircle cx='40' cy='80' r='40'/%3E%3Ccircle cx='415' cy='80' r='40'/%3E%3Ccircle cx='227.5' cy='80' r='40'/%3E%3C/g%3E%3C/svg%3E");background-size:100%;content:"";display:block;height:1rem;left:30%;position:absolute;top:-.5rem;width:1rem}.b1hv0kfn .main-price .price-monthly:after{content:"*";font-size:.3em;vertical-align:super}.b1hv0kfn .main-price .price-monthly{opacity:0;transform:perspective(600px) rotateY(1turn)}.s7wgugc{align-items:center;display:flex;flex-basis:58%;justify-content:center;max-width:58%;position:relative}.s7wgugc input{height:1rem;margin:0;width:1rem}.s7wgugc input:checked+label{color:#333}.s7wgugc label{color:#aaa;font-weight:300;line-height:3.55556rem;padding:0 .3rem;transition:all .3s ease-out}.s7wgugc .fnote{bottom:-.71111rem;font-size:.64rem;position:absolute;transition:color .6s}.s7wgugc input#radios1:checked~.monthly-note,.s7wgugc input#radios2:checked~.annual-note{color:transparent}.s7wgugc .bonus{color:#7232fa;font-weight:700}.c8x5bmy.c8x5bmy.c8x5bmy{border:0;border-radius:4px;box-shadow:0 3px 5px rgba(0,0,0,.2);color:#eee;cursor:pointer;margin:1.77778rem 0;padding-left:1rem;padding-right:1rem;width:100%}.s1mpuo8t{background-color:#fff;color:#222;padding:2.66667rem 0;text-align:center}.wzdp7w{margin:0 auto;max-width:1248px;padding:0 1rem}.wzdp7w .tweet-container{box-sizing:border-box;display:flex;flex-flow:row wrap;margin:0 -.5rem}.wzdp7w .tweet-container>div{flex-basis:100%;max-width:100%;padding:0 1rem}@media (min-width:936px){.wzdp7w .tweet-container>div{flex-basis:33%;max-width:33%}}.h18jy8q{color:#333;margin-bottom:.88889rem;text-align:center}@media (min-width:936px){.h18jy8q{margin-bottom:1.77778rem}}.t13rfmgn{border:2px solid #2aa2ef;line-height:.88889rem;margin-bottom:.88889rem;padding:.88889rem 1rem;text-align:left}.t13rfmgn .tweet-title{font-size:.8rem;font-weight:500}.t13rfmgn .tweet-title a,.t13rfmgn .tweet-title p{color:#20272f;font-weight:500;-webkit-text-decoration:none;text-decoration:none}.t13rfmgn .tweet-title p{font-size:.8rem;line-height:.8rem;margin:0}.t13rfmgn .avatar{border-radius:50%;float:left;height:1.77778rem;margin-right:1rem;width:1.77778rem}.t13rfmgn .twittername{color:#aaa;display:block;font-size:.64rem;font-weight:300}.t13rfmgn .tweet-body p{font-size:.64rem;line-height:.88889rem;margin:.88889rem 0}.suhqeno{background-color:#105273;background-image:var(--suhqeno-0);background-position:50%;background-repeat:no-repeat;background-size:cover}@media (min-width:624px){.suhqeno{background-size:100%}}.wcqh0z5{background:rgba(0,0,0,.4);display:flex;justify-content:space-between;margin:0 auto 20px;max-width:1248px;padding:20px 30px}@media (min-width:936px){.wcqh0z5{margin:0 auto 30px}}.im6tdkb{margin:0;position:relative}@media (min-width:936px){.im6tdkb{margin:0 30px 0 0}}@media (min-width:1248px){.im6tdkb{margin:0 70px 0 0}}.m6bjvs0{background:rgba(0,0,0,.4);display:flex;flex-direction:column;margin:0 0 16px;padding:15px 20px}@media (min-width:624px){.m6bjvs0{padding:5px 40px}}@media (min-width:936px){.m6bjvs0{line-height:72px;margin:0 0 30px}}.m6bjvs0>div{display:flex;flex-direction:column}@media (min-width:624px){.m6bjvs0>div{flex-direction:row;justify-content:space-between}}.td3jbbo{color:#fff;display:inline-block;font-size:1rem;line-height:1.5rem;margin:0 0 10px;padding:0;text-shadow:1px 2px 4px rgba(0,0,0,.4)}@media (min-width:624px){.td3jbbo{font-size:1.5rem;line-height:60px;margin:0}}@media (min-width:936px){.td3jbbo{line-height:72px}}.cxli7a9{line-height:1.5rem}@media (min-width:624px){.cxli7a9{line-height:60px}}@media (min-width:936px){.cxli7a9{line-height:72px}}.c14zotb4{color:#fff;margin:0 .875rem 0 0;outline:none;padding:0}.c14zotb4>*,.c14zotb4>:after,.c14zotb4>:before{pointer-events:none}.c14zotb4:last-child{margin:0}.c14zotb4 svg.share-icon{transition:width .2s linear;width:1rem}.c14zotb4:focus,.c14zotb4:hover{color:#fff}.c14zotb4:focus svg.share-icon,.c14zotb4:hover svg.share-icon{transition:width .2s linear;width:1.25rem}@media (min-width:1248px){.c14zotb4{margin:0 1rem 0 0}}.m1odfayv{bottom:0}.m1odfayv,.m1odfayv>div{display:flex;flex-direction:column}.m1odfayv>div{margin:0 0 16px}@media (min-width:624px){.m1odfayv>div{align-items:center;flex-direction:row}}@media (min-width:936px){.m1odfayv>div{margin:0 0 30px}}.m1odfayv>div:not(:first-child){flex-direction:row}.ajqjnq{border-radius:50%;height:100px;margin:0 auto 20px;min-width:100px;width:100px}@media (min-width:624px){.ajqjnq{margin:0 25px}}@media (min-width:936px){.ajqjnq{margin:0 40px}}@media (min-width:1248px){.ajqjnq{margin:0 60px}}.d17w3rty{color:#fff;font-size:.75rem;font-weight:500;margin:0}.d17w3rty a{color:#c9adff}.d17w3rty a:hover{color:#9864ff}@media (min-width:624px){.d17w3rty{font-size:.875rem;margin:0 20px 0 0}}@media (min-width:936px){.d17w3rty{font-size:.875rem}}@media (min-width:1248px){.d17w3rty{margin:0 40px 0 0}}.m12xxw3g{display:none;font-size:.75rem}@media (min-width:624px){.m12xxw3g{display:flex}}.m13hvvvv{font-size:.75rem;margin-bottom:0}.cs9srjd,.m13hvvvv,.m13hvvvv>a{color:#a2a2a2}.cs9srjd{font-weight:900;margin-right:.75rem;padding-left:12px;position:relative;text-transform:uppercase}.cs9srjd:before{background-color:#a2a2a2;background-color:var(--cs9srjd-0);border-radius:100%;content:"";height:8px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:8px}.e11jemzk{display:none;font-size:.875rem;line-height:1.6;margin-bottom:0}@media (min-width:624px){.e11jemzk{display:block}}.stub9nm{align-items:flex-start;display:flex;margin-bottom:3rem}.cjt0qrr{color:#3a3a3a;width:calc(100% - 150px)}@media (min-width:624px){.cjt0qrr{width:calc(100% - 210px)}}.c877jhp{background-color:#fff;box-shadow:0 6px 12px 0 rgba(0,0,0,.25);margin-bottom:.5rem;margin-top:.5rem;transition:all .2s ease 0s;width:100%}@media (min-width:624px){.c877jhp{width:calc(50% - 1rem)}}@media (min-width:936px){.c877jhp{width:calc(25% - .5rem)}}.c877jhp:hover{transform:translateY(-4px)}.c877jhp>a{height:157px;-webkit-text-decoration:none;text-decoration:none;width:100%}.c179m2mi,.c877jhp>a{display:flex;flex-direction:column}.c179m2mi{height:calc(100% - 157px);justify-content:space-between;padding:1rem}.c7l2g36{background-color:#efefef;background-position:top;background-repeat:no-repeat;background-size:cover;height:157px;overflow:hidden;position:relative}.c71u16a{color:#a2a2a2;padding-left:12px;position:relative}.c71u16a:before{background-color:#a2a2a2;border-radius:100%;content:"";height:8px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:8px}.c1fd0pty{color:#a2a2a2;font-size:.75rem;font-weight:400;line-height:1.2}.c11x20zd.cs9srjd{display:block;line-height:2}.sk03qz0{display:block}@media (min-width:624px){.sk03qz0{display:flex;flex-wrap:wrap;justify-content:space-between}}.s12r9smb{background-color:#fff;color:#222;margin:0 auto 3.55556rem;max-width:1248px;padding:0 2rem}.s12r9smb p{margin-top:1rem;text-align:center}.hiz3ohb{color:#333;margin-bottom:.88889rem;text-align:center}@media (min-width:936px){.hiz3ohb{margin-bottom:1.77778rem}}.crmbg31{border:0;border-radius:4px;box-shadow:0 3px 5px rgba(0,0,0,.2);color:#eee;height:2.66667rem;line-height:2.66667rem;margin:0 0 1.77778rem;padding:0 2rem;position:relative;transition:.3s}@media (min-width:936px){.crmbg31{margin:0 auto}}.s1o4idzq{background:#020024;background-image:var(--s1o4idzq-0);background-size:cover,cover;color:#ccc;padding:0}.wrk4ta2{display:flex;flex-direction:column;margin:0 auto;max-width:1248px;padding:0 1rem;width:90%}@media (min-width:936px){.wrk4ta2{flex-direction:row}}.wrk4ta2 div{padding:0 1rem}.wrk4ta2 .hero-introduction{flex-basis:100%;max-width:100%;order:var(--wrk4ta2-0)}@media (min-width:936px){.wrk4ta2 .hero-introduction{flex-basis:58%;max-width:58%}}.wrk4ta2 .hero-introduction h2,.wrk4ta2 .hero-introduction p{color:#eee;margin-bottom:1.77778rem}.wrk4ta2 .hero-introduction h2{margin-top:5.33333rem}.wrk4ta2 .hero-introduction p.button{text-align:center}.wrk4ta2 .hero-featured-videos{flex-basis:100%;max-width:100%;order:var(--wrk4ta2-0)}@media (min-width:936px){.wrk4ta2 .hero-featured-videos{flex-basis:33%;max-width:33%;order:var(--wrk4ta2-1)}}.wrk4ta2 .hero-featured-videos .stack{background:rgba(0,0,0,.5);color:#fff;padding:.88889rem 1.5rem}.wrk4ta2 .hero-featured-videos .stack figure{margin:1em 0}.wrk4ta2 .hero-featured-videos .stack figure .image-container{overflow:hidden;padding:0;position:relative}.wrk4ta2 .hero-featured-videos .stack figure .image-container img{width:100%}.wrk4ta2 .hero-featured-videos .stack figure .image-container span.duration{background:#000;bottom:1.2em;color:#fff;display:block;line-height:.8rem;opacity:1;padding:.2rem .5rem;position:absolute;right:.7em}.wrk4ta2 .hero-featured-videos .stack figure figcaption{color:#fff;font-size:.8rem;font-weight:500;line-height:.88889rem;margin:.5rem 0 0}.wrk4ta2 .hero-featured-videos .stack figure figcaption span{display:block;font-size:.64rem;font-weight:300}.wrk4ta2 .hero-featured-videos .stack figure figcaption div{padding:0}.wrk4ta2 .hero-featured-videos .stack figure figcaption:hover{color:#24b3b5}.wrk4ta2 .hidden-div{display:none;order:2}@media (min-width:936px){.wrk4ta2 .hidden-div{display:block;flex-basis:9%;max-width:9%}}.c1bwrg7x.c1bwrg7x.c1bwrg7x{border:0;border-radius:4px;box-shadow:0 3px 5px rgba(0,0,0,.2);color:#eee;height:2.66667rem;line-height:2.66667rem;margin:0 0 1.77778rem;padding:0 2rem;position:relative;transition:.3s}.sprezz4{margin:0 auto;max-width:1248px;padding:20px 30px;width:100%}.styles-module--bookGlow--786d1{background:hsla(0,0%,100%,.13);filter:blur(.6228812336921692px)}.styles-module--premiumCTA--4810e{background:linear-gradient(155deg,#28282e,#18181a);box-shadow:0 0 0 1px #000}.styles-module--leftNav--176c4 a[aria-current=page]{--tw-text-opacity:1;background-color:#3705ff0f;color:rgb(86 53 178/var(--tw-text-opacity));font-weight:600}.styles-module--article--4c075{font-size:16px;letter-spacing:0;line-height:24px}.styles-module--article--4c075 h1{font-size:32px;font-weight:600;letter-spacing:0;line-height:40px;margin-bottom:1rem;margin-top:1rem}.styles-module--article--4c075 h2{font-size:24px;font-weight:600;letter-spacing:-.1px;line-height:36px;margin-bottom:1rem;margin-top:2rem}.styles-module--article--4c075 h2 b,.styles-module--article--4c075 h2 strong{font-weight:inherit}.styles-module--article--4c075>p:first-child{font-size:14px;font-weight:500;letter-spacing:0;line-height:20px;margin-bottom:0;margin-top:2rem}.styles-module--article--4c075 p{font-size:16px;font-weight:400;letter-spacing:0;line-height:24px;margin-bottom:1rem;margin-top:1rem}.styles-module--article--4c075 h3{font-size:24px;font-weight:600;letter-spacing:-.1px;line-height:36px;margin-bottom:1rem;margin-top:-1rem;padding-top:4rem}.styles-module--article--4c075 h3 b,.styles-module--article--4c075 h3 strong{font-weight:inherit}.styles-module--article--4c075 ul{display:flex;flex-direction:column;row-gap:1rem}.styles-module--article--4c075 pre,.styles-module--article--4c075 ul{margin-bottom:1rem;margin-top:1rem}.styles-module--article--4c075 code:not(pre code){--tw-text-opacity:1;color:rgb(198 42 47/var(--tw-text-opacity))}.styles-module--article--4c075 table{border-collapse:collapse;border-color:#02023414;border-width:1px;table-layout:auto}.styles-module--article--4c075 table td,.styles-module--article--4c075 table th{border-color:#02023414;border-width:1px;padding:.75rem}.styles-module--article--4c075 a{opacity:.8;text-decoration-line:underline;text-underline-offset:4px}.styles-module--article--4c075 a:hover{opacity:1}.styles-module--article--4c075 ul{list-style-type:disc;padding-left:1rem}.styles-module--article--4c075 ol{list-style-type:decimal;padding-left:1rem}.post-body>*{margin-bottom:1.5rem}.post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6{font-weight:700;margin-bottom:1.5rem}.post-body h1{font-size:40px;letter-spacing:-.42px;line-height:48px;margin-top:4rem}.post-body h2{font-size:36px;letter-spacing:-.32px;line-height:42px;margin-top:4rem}.post-body h3{font-size:24px;letter-spacing:-.28px;line-height:36px;margin-top:3.5rem}.post-body h4{font-size:18px;letter-spacing:-.2px;line-height:28px;margin-top:3rem}.post-body h5{font-size:16px;letter-spacing:-.1px;line-height:24px;margin-top:2.5rem}.post-body h6{font-size:14px;letter-spacing:0;line-height:20px;margin-top:2rem}.post-body blockquote,.post-body figcaption,.post-body ol,.post-body p,.post-body pre,.post-body table,.post-body ul{font-size:16px;font-weight:400;letter-spacing:-.1px;line-height:24px;margin-bottom:1.5rem}.post-body blockquote{border-color:#3a07e43b;border-left-width:4px;padding-left:.75rem}.post-body ol li,.post-body ul li{list-style-position:outside;list-style-type:disc;margin-bottom:.5rem;margin-left:1.5rem}.post-body ul{list-style-type:disc}.post-body ol{list-style-type:decimal}.post-body pre{border-radius:1rem;margin-bottom:1.5rem;margin-top:1.5rem}.post-body :not(pre)>code,.post-body kbd,.post-body samp{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(242 242 245/var(--tw-bg-opacity));border-radius:2px;color:rgb(31 35 39/var(--tw-text-opacity));font-weight:500;padding:2px 4px}.post-body :not(pre)>code{overflow-wrap:break-word}.post-body img{border-radius:1rem}.post-body iframe{width:100%}.post-body>p:first-child{--tw-bg-opacity:1;background-color:rgb(243 240 255/var(--tw-bg-opacity));border-radius:1rem;font-weight:500;margin-bottom:4rem;padding:1.5rem}.post-body>p:first-child strong{font-weight:500}.post-body p:last-child{margin-bottom:0}.alignleft,.alignright{display:block;margin-left:1.25rem;margin-right:1.25rem}@media (min-width:1024px){.alignleft,.alignright{float:left}}.aligncenter{max-width:100%}@media (min-width:1024px){.aligncenter{margin:1.75rem auto}}.wp-caption{margin:1.75rem auto;width:100%}@media (min-width:1024px){.wp-caption{width:auto}}img.wp-image{display:block;margin-bottom:1.75rem;margin-left:auto;margin-right:auto}.wp-caption-text{--tw-text-opacity:1;color:rgb(96 100 108/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem;text-align:center}@media (min-width:1024px){.wp-caption-text{text-align:left}}.wp-video{max-width:100%}.wp-special{line-height:1.5rem}[aria-label="Table of contents"]{display:none}.wp-block-yoast-faq-block>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.5rem*var(--tw-space-y-reverse));margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)))}.wp-block-yoast-faq-block h3{margin-bottom:.75rem;margin-top:0}.inline-content,.sidebar-content{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-bottom:2rem;margin-top:2.5rem;position:relative;width:100%}.inline-content:before,.sidebar-content:before{color:#0002119d;content:"Advertisement";display:block;font-size:10px;font-weight:400;letter-spacing:.2px;position:absolute;text-align:center;text-transform:uppercase;top:-1.5rem;width:100%}.inline-content iframe,.sidebar-content iframe{margin:0 auto}.inline-content{min-height:300px}.inline-content>a{display:block}.inline-content img{--tw-bg-opacity:1;background-color:rgb(252 252 253/var(--tw-bg-opacity))}.ad-free .inline-content,.ad-free .sidebar-content,.logged-in .inline-content a{display:none}@media only screen and (min-width:0px) and (min-height:0px){div[id^=bsa-zone_1719474980702-2_123456]{min-height:200px;min-width:200px}}@media only screen and (min-width:880px) and (min-height:0px){div[id^=bsa-zone_1719474980702-2_123456]{min-height:250px;min-width:300px}}@media only screen and (min-width:0px) and (min-height:0px){div[id^=bsa-zone_1719474689804-7_123456]{min-height:200px;min-width:200px}}@media only screen and (min-width:880px) and (min-height:0px){div[id^=bsa-zone_1719474689804-7_123456]{min-height:250px;min-width:300px}}@media only screen and (min-width:0px) and (min-height:0px){div[id^=bsa-zone_1719474948836-3_123456]{min-height:200px;min-width:200px}}@media only screen and (min-width:880px) and (min-height:0px){div[id^=bsa-zone_1719474948836-3_123456]{min-height:250px;min-width:300px}}.teams-module--hero--46799{background-image:linear-gradient(180deg,#000 20%,#e154fa 120%)}@media (min-width:768px){.teams-module--hero--46799{background-image:radial-gradient(farthest-corner at center 200%,#e154fa 25%,#000 70%)}}.header-module--toggler--f3855 span{height:1.5px;transform:translateY(0);transition:.45s cubic-bezier(.45,.45,.37,1.36);transition-property:background-color,transform}.header-module--toggler--f3855 span:after,.header-module--toggler--f3855 span:before{background-color:inherit;border-radius:inherit;content:"";display:inherit;height:inherit;left:0;position:absolute;top:0;transform-origin:center;transition:transform .45s cubic-bezier(.45,.45,.37,1.36);width:inherit}.header-module--toggler--f3855 span:before{transform:translateY(-.3rem)}.header-module--toggler--f3855 span:after{transform:translateY(.3rem)}.header-module--toggler--f3855[aria-expanded=true] span{background-color:transparent;transform:translate(1rem)}.header-module--toggler--f3855[aria-expanded=true] span:before{--tw-bg-opacity:1;background-color:rgb(31 35 39/var(--tw-bg-opacity));transform:translate(-1rem) rotate(135deg)}.header-module--toggler--f3855[aria-expanded=true] span:after{--tw-bg-opacity:1;background-color:rgb(31 35 39/var(--tw-bg-opacity));transform:translate(-1rem) rotate(-135deg)}</style><link data-react-helmet="true" rel="canonical" href="https://www.sitepoint.com/style-html-details-element/"/><style>.gatsby-image-wrapper{position:relative;overflow:hidden}.gatsby-image-wrapper picture.object-fit-polyfill{position:static!important}.gatsby-image-wrapper img{bottom:0;height:100%;left:0;margin:0;max-width:none;padding:0;position:absolute;right:0;top:0;width:100%;object-fit:cover}.gatsby-image-wrapper [data-main-image]{opacity:0;transform:translateZ(0);transition:opacity .25s linear;will-change:opacity}.gatsby-image-wrapper-constrained{display:inline-block;vertical-align:top}</style><noscript><style>.gatsby-image-wrapper noscript [data-main-image]{opacity:1!important}.gatsby-image-wrapper [data-placeholder-image]{opacity:0!important}</style></noscript><script type="module">const e="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;e&&document.body.addEventListener("load",(function(e){const t=e.target;if(void 0===t.dataset.mainImage)return;if(void 0===t.dataset.gatsbyImageSsr)return;let a=null,n=t;for(;null===a&&n;)void 0!==n.parentNode.dataset.gatsbyImageWrapper&&(a=n.parentNode),n=n.parentNode;const o=a.querySelector("[data-placeholder-image]"),r=new Image;r.src=t.currentSrc,r.decode().catch((()=>{})).then((()=>{t.style.opacity=1,o&&(o.style.opacity=0,o.style.transition="opacity 500ms linear")}))}),!0);</script><link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="48x48" href="/favicons/48x48.png"/><link rel="apple-touch-icon" sizes="72x72" href="/favicons/72x72.png"/><link rel="apple-touch-icon" sizes="96x96" href="/favicons/96x96.png"/><link rel="apple-touch-icon" sizes="144x144" href="/favicons/144x144.png"/><link rel="apple-touch-icon" sizes="192x192" href="/favicons/192x192.png"/><link rel="apple-touch-icon" sizes="256x256" href="/favicons/256x256.png"/><link rel="apple-touch-icon" sizes="384x384" href="/favicons/384x384.png"/><link rel="apple-touch-icon" sizes="512x512" href="/favicons/512x512.png"/><link rel="preconnect" href="https://cdn.sanity.io"/><link rel="alternate" type="application/rss+xml" title="SitePoint" href="/sitepoint.rss"/><script> !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]); posthog.init('phc_HS7HoEdTpP75Ip1VUJ6ie62QlbB8ciTuri8j0lbENPX', {"api_host":"https://eu.posthog.com"}) </script><script>//load TrackerJS !function(t,n,e,o,a){function d(t){var n=~~(Date.now()/3e5),o=document.createElement(e);o.async=!0,o.src=t+"?ts="+n;var a=document.getElementsByTagName(e)[0];a.parentNode.insertBefore(o,a)}t.MooTrackerObject=a,t[a]=t[a]||function(){return t[a].q?void t[a].q.push(arguments):void(t[a].q=[arguments])},window.attachEvent?window.attachEvent("onload",d.bind(this,o)):window.addEventListener("load",d.bind(this,o),!1)}(window,document,"script","//cdn.stat-track.com/statics/moosend-tracking.min.js","mootrack"); //tracker has to be initialized otherwise it will generate warnings and wont sendtracking events mootrack('init', 'ca794cde-3e17-4ecf-a1da-f2c52093ec73');</script><title data-gatsby-head="true">20 Simple Ways to Style the HTML details Element — SitePoint</title><link rel="dns-prefetch" id="s3-images-prefetch" href="https://s3.sitepoint.com" data-gatsby-head="true"/><link rel="dns-prefetch" id="uploads-prefetch" href="https://uploads.sitepoint.com" data-gatsby-head="true"/><link rel="dns-prefetch" id="learnable-images-prefetch" href="https://learnable-images.sitepoint.com" data-gatsby-head="true"/><link rel="dns-prefetch" id="consent-prefetch" href="https://cmp.inmobi.com" data-gatsby-head="true"/><link rel="dns-prefetch" id="gtm-prefetch" href="https://www.googletagmanager.com" data-gatsby-head="true"/><link rel="dns-prefetch" id="tapfiliate-prefetch" href="https://script.tapfiliate.com" data-gatsby-head="true"/><link rel="dns-prefetch" id="facebook-prefetch" href="https://connect.facebook.net" data-gatsby-head="true"/><link rel="dns-prefetch" id="ads-prefetch" href="https://cdn4.buysellads.net" data-gatsby-head="true"/><link id="canonical" rel="canonical" href="https://www.sitepoint.com/style-html-details-element/" data-gatsby-head="true"/><link id="favicon" href="/favicons/32x32.png" rel="icon" type="image/png" data-gatsby-head="true"/><link id="sitemap" rel="sitemap" type="application/xml" href="/sitemap-index.xml" data-gatsby-head="true"/><link rel="preload" as="image" type="image/webp" href="https://uploads.sitepoint.com/wp-content/uploads/2023/10/1697843489style-html-details-element-300x190.jpg" media="(max-width: 500px)" fetchpriority="high" data-gatsby-head="true"/><link rel="preload" as="image" type="image/webp" href="https://uploads.sitepoint.com/wp-content/uploads/2023/10/1697843489style-html-details-element.jpg" fetchpriority="high" media="min-width: 501px" data-gatsby-head="true"/><script id="schema" type="application/ld+json" data-gatsby-head="true">{"@context":"https://schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https://www.sitepoint.com/style-html-details-element/#article","isPartOf":{"@id":"https://www.sitepoint.com/style-html-details-element/"},"author":{"name":"Ralph Mason","@id":"https://www.sitepoint.com/#/schema/person/5d0e20b211d299728e4e577cdf84e6d5"},"headline":"20 Simple Ways to Style the HTML details Element","datePublished":"2023-10-26T13:00:07+00:00","dateModified":"2024-11-14T02:15:25+00:00","mainEntityOfPage":{"@id":"https://www.sitepoint.com/style-html-details-element/"},"wordCount":3099,"publisher":{"@id":"https://www.sitepoint.com/#organization"},"image":{"@id":"https://www.sitepoint.com/style-html-details-element/#primaryimage"},"thumbnailUrl":"https://uploads.sitepoint.com/wp-content/uploads/2023/10/1697843489style-html-details-element.jpg","keywords":["details","html elements"],"articleSection":["CSS","Design & UX","HTML & CSS","HTML & CSS","HTML5"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https://www.sitepoint.com/style-html-details-element/","url":"https://www.sitepoint.com/style-html-details-element/","name":"20 Simple Ways to Style the HTML details Element — SitePoint","isPartOf":{"@id":"https://www.sitepoint.com/#website"},"primaryImageOfPage":{"@id":"https://www.sitepoint.com/style-html-details-element/#primaryimage"},"image":{"@id":"https://www.sitepoint.com/style-html-details-element/#primaryimage"},"thumbnailUrl":"https://uploads.sitepoint.com/wp-content/uploads/2023/10/1697843489style-html-details-element.jpg","datePublished":"2023-10-26T13:00:07+00:00","dateModified":"2024-11-14T02:15:25+00:00","description":"Learn simple ways to style the HTML details element, which is a very useful element for revealing and hiding bits of content on a web page.","inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.sitepoint.com/style-html-details-element/#primaryimage","url":"https://uploads.sitepoint.com/wp-content/uploads/2023/10/1697843489style-html-details-element.jpg","contentUrl":"https://uploads.sitepoint.com/wp-content/uploads/2023/10/1697843489style-html-details-element.jpg","width":600,"height":379,"caption":"20 Simple Ways to Style the HTML details Element"},{"@type":"WebSite","@id":"https://www.sitepoint.com/#website","url":"https://www.sitepoint.com/","name":"SitePoint","description":"Learn Web Design & Development with SitePoint tutorials, courses and books - HTML5, CSS3, JavaScript, PHP, Mobile App Development, Responsive Web Design","publisher":{"@id":"https://www.sitepoint.com/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https://www.sitepoint.com/#organization","name":"SitePoint","url":"https://www.sitepoint.com/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.sitepoint.com/#/schema/logo/image/","url":"https://uploads.sitepoint.com/wp-content/uploads/2021/07/1626171370SitePointLogo.png","contentUrl":"https://uploads.sitepoint.com/wp-content/uploads/2021/07/1626171370SitePointLogo.png","width":143,"height":144,"caption":"SitePoint"},"image":{"@id":"https://www.sitepoint.com/#/schema/logo/image/"},"sameAs":["https://www.facebook.com/sitepoint","https://x.com/sitepointdotcom","https://www.instagram.com/sitepointdotcom/","https://www.linkedin.com/company/sitepoint","https://www.pinterest.com/sitepointdotcom/"]},{"@type":"Person","@id":"https://www.sitepoint.com/#/schema/person/5d0e20b211d299728e4e577cdf84e6d5","name":"Ralph Mason","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.sitepoint.com/#/schema/person/image/641883b8040766807047ca97ac16abe2","url":"https://uploads.sitepoint.com/wp-content/uploads/2015/05/1430879451rm.png","contentUrl":"https://uploads.sitepoint.com/wp-content/uploads/2015/05/1430879451rm.png","caption":"Ralph Mason"},"description":"Ralph is a freelance copyeditor, web designer and teacher at Page Affairs.","sameAs":["http://pageaffairs.com","https://au.linkedin.com/in/ralphmason","https://x.com/ralphmason"],"url":"https://www.sitepoint.com/author/rmason/"}]}</script><script id="breadcrumb" type="application/ld+json" data-gatsby-head="true">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"SitePoint","item":"https://www.sitepoint.com/"},{"@type":"ListItem","position":2,"name":"Design & UX","item":"https://www.sitepoint.com/design-ux/"},{"@type":"ListItem","position":3,"name":"HTML & CSS","item":"https://www.sitepoint.com/design-ux/design-html-css/"},{"@type":"ListItem","position":4,"name":"20 Simple Ways to Style the HTML details Element"}]}</script></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><header class="mb-navbar"><nav aria-label="Main navigation" class="fixed top-0 left-0 w-full z-[10001] bg-white"><div class="flex items-center justify-between py-2 min-h-14 container"><a aria-current="page" class="mr-8" aria-label="SitePoint" href="/"><svg class="h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 35" fill="none"><path fill="currentColor" d="M37.757 21.157c.235.394.56.72.945.948.41.242.855.412 1.318.502.499.103 1.006.155 1.515.153.42 0 .84-.03 1.258-.09a4.536 4.536 0 0 0 1.215-.334c.358-.154.673-.4.914-.718.25-.346.377-.772.36-1.206a1.785 1.785 0 0 0-.18-.87 1.683 1.683 0 0 0-.57-.657 6.354 6.354 0 0 0-1.876-.84 29.672 29.672 0 0 0-2.443-.578 12.491 12.491 0 0 1-2.422-.737 5.051 5.051 0 0 1-1.871-1.328 3.494 3.494 0 0 1-.747-2.38 3.837 3.837 0 0 1 .524-2.046 4.339 4.339 0 0 1 1.348-1.391 6.137 6.137 0 0 1 1.858-.795 8.403 8.403 0 0 1 2.053-.258 12.01 12.01 0 0 1 2.43.23c.694.136 1.36.405 1.961.796a4.082 4.082 0 0 1 1.365 1.526 5.88 5.88 0 0 1 .601 2.399h-2.545a2.668 2.668 0 0 0-.391-1.27 2.591 2.591 0 0 0-.859-.808c-.35-.21-.73-.363-1.124-.452a5.636 5.636 0 0 0-1.245-.135c-.387 0-.773.03-1.155.09a3.823 3.823 0 0 0-1.065.32 2.158 2.158 0 0 0-.781.61c-.21.284-.316.636-.3.994a1.5 1.5 0 0 0 .113.612c.08.193.2.365.35.504.352.322.758.572 1.198.736.522.208 1.059.37 1.605.488.601.133 1.2.27 1.8.411.597.142 1.223.315 1.875.52.574.185 1.12.457 1.619.808.462.329.85.76 1.137 1.265.305.578.454 1.232.43 1.892a4.457 4.457 0 0 1-.584 2.38 4.602 4.602 0 0 1-1.529 1.527c-.665.4-1.391.674-2.146.809a12.39 12.39 0 0 1-2.353.23 10.697 10.697 0 0 1-2.46-.275 5.977 5.977 0 0 1-2.069-.904 4.57 4.57 0 0 1-1.438-1.648 5.797 5.797 0 0 1-.601-2.489h2.567c.004.515.14 1.02.395 1.459ZM53.498 8.898h-2.55V24.68h2.55V8.898ZM64.077 8.898v2.29h-3.104v9.802c-.007.246.018.492.073.731a.751.751 0 0 0 .284.43c.176.114.376.182.583.198.324.034.65.05.975.045h1.167v2.29h-1.949a8.987 8.987 0 0 1-1.695-.135 2.467 2.467 0 0 1-1.138-.502 2.158 2.158 0 0 1-.644-1.038 6.093 6.093 0 0 1-.21-1.77v-10.05h-2.597V8.897h2.636v-4.73h2.515v4.73h3.104ZM77.868 23.673a6.942 6.942 0 0 1-4.374 1.355 7.825 7.825 0 0 1-3.225-.61 6.355 6.355 0 0 1-2.292-1.707 7.31 7.31 0 0 1-1.395-2.625 12.85 12.85 0 0 1-.524-3.328 9.648 9.648 0 0 1 .541-3.298c.34-.96.854-1.84 1.515-2.593a6.886 6.886 0 0 1 2.306-1.725 6.94 6.94 0 0 1 2.923-.61 6.268 6.268 0 0 1 3.435.872 6.867 6.867 0 0 1 2.19 2.213 8.838 8.838 0 0 1 1.137 2.932c.205.992.291 2.007.257 3.021h-11.59a6.358 6.358 0 0 0 .24 1.97c.17.608.462 1.17.858 1.649.423.495.945.885 1.529 1.142.693.302 1.439.448 2.189.43a4.345 4.345 0 0 0 2.653-.764 3.703 3.703 0 0 0 1.357-2.308h2.515c-.237 1.58-1.04 3.006-2.245 3.984Zm-.614-10.136a4.45 4.45 0 0 0-.927-1.418 4.308 4.308 0 0 0-3.13-1.3 4.376 4.376 0 0 0-1.781.351 4.118 4.118 0 0 0-1.365.962 4.62 4.62 0 0 0-.902 1.418 5.487 5.487 0 0 0-.39 1.726h8.903a5.406 5.406 0 0 0-.408-1.735v-.004ZM85.63 8.898v2.137h.06a3.844 3.844 0 0 1 1.979-1.906 7.262 7.262 0 0 1 2.966-.597 6.887 6.887 0 0 1 3.134.673 6.385 6.385 0 0 1 2.22 1.807c.6.784 1.053 1.68 1.335 2.643.296 1.024.44 2.09.43 3.161a11.32 11.32 0 0 1-.43 3.162 7.519 7.519 0 0 1-1.318 2.61 6.231 6.231 0 0 1-2.22 1.758 7.094 7.094 0 0 1-3.103.641 7.546 7.546 0 0 1-2.684-.52 5.348 5.348 0 0 1-1.266-.713 4.14 4.14 0 0 1-1.035-1.174h-.06v8.13h-2.554V8.898h2.546Zm9.157 5.601a5.874 5.874 0 0 0-.859-1.879 4.287 4.287 0 0 0-1.498-1.31 4.486 4.486 0 0 0-2.147-.488 4.316 4.316 0 0 0-2.19.52 4.423 4.423 0 0 0-1.467 1.355 5.754 5.754 0 0 0-.825 1.906 9.331 9.331 0 0 0-.253 2.168 9.227 9.227 0 0 0 .27 2.258c.166.689.458 1.336.86 1.907.4.56.919 1.014 1.515 1.328a4.662 4.662 0 0 0 2.25.501 4.295 4.295 0 0 0 2.201-.52 4.12 4.12 0 0 0 1.426-1.355 6.04 6.04 0 0 0 .781-1.95c.16-.742.242-1.5.24-2.26a8.23 8.23 0 0 0-.3-2.18h-.004ZM100.408 13.555c.3-.97.79-1.865 1.438-2.624a6.796 6.796 0 0 1 2.37-1.757 8.538 8.538 0 0 1 6.491 0 6.836 6.836 0 0 1 2.352 1.757 7.42 7.42 0 0 1 1.438 2.624c.325 1.05.486 2.148.477 3.252.01 1.1-.151 2.194-.477 3.239a7.438 7.438 0 0 1-1.438 2.61 6.657 6.657 0 0 1-2.352 1.74 8.741 8.741 0 0 1-6.491 0 6.629 6.629 0 0 1-2.37-1.74 7.434 7.434 0 0 1-1.438-2.61 10.562 10.562 0 0 1-.48-3.239 10.71 10.71 0 0 1 .48-3.252Zm2.576 5.8a5.335 5.335 0 0 0 1.034 1.86 4.49 4.49 0 0 0 3.42 1.544c.643 0 1.28-.134 1.874-.396a4.484 4.484 0 0 0 1.545-1.148 5.375 5.375 0 0 0 1.035-1.86 8.873 8.873 0 0 0 0-5.1 5.56 5.56 0 0 0-1.035-1.879 4.423 4.423 0 0 0-1.545-1.16 4.64 4.64 0 0 0-3.748 0 4.43 4.43 0 0 0-1.546 1.16 5.543 5.543 0 0 0-1.017 1.893c-.5 1.659-.5 3.44 0 5.1l-.017-.014ZM120.672 8.898h-2.55V24.68h2.55V8.898ZM127.031 8.898V11.4h.056c1.059-1.912 2.738-2.868 5.036-2.868.866-.025 1.73.12 2.545.43a4.01 4.01 0 0 1 1.629 1.166c.442.525.753 1.158.904 1.841a9.96 9.96 0 0 1 .254 2.336v10.388h-2.55V13.997a3.231 3.231 0 0 0-.197-1.256 3.099 3.099 0 0 0-.662-1.065 3.144 3.144 0 0 0-1.074-.67 3.033 3.033 0 0 0-1.236-.184 5.11 5.11 0 0 0-2.022.366 3.814 3.814 0 0 0-1.425 1.039 4.512 4.512 0 0 0-.859 1.572 6.521 6.521 0 0 0-.283 1.97v8.91h-2.55V8.899h2.434ZM147.924 8.898v2.29h-3.087v9.802c-.007.246.017.492.073.731a.755.755 0 0 0 .283.43c.177.114.377.182.584.198.324.034.649.05.975.045h1.167v2.29h-1.944a8.988 8.988 0 0 1-1.692-.135 2.468 2.468 0 0 1-1.137-.502 2.146 2.146 0 0 1-.644-1.038 6.073 6.073 0 0 1-.211-1.77v-10.05h-2.64V8.897h2.64v-4.73h2.55v4.73h3.083ZM.657 14.95l2.361 2.4 7.423 7.307 3.202-3.252a1.157 1.157 0 0 0-.06-1.4l-2.923-2.71-3.151-3.216a1.155 1.155 0 0 1-.269-.767 1.15 1.15 0 0 1 .299-.755l8.487-8.623L12.162 0 3.018 9.3.661 11.694c-.208.21-.375.463-.488.743a2.36 2.36 0 0 0-.003 1.77c.113.28.279.533.487.744Z"></path><path fill="currentColor" d="m25.962 19.12-2.335-2.399-7.444-7.299-3.203 3.252a1.156 1.156 0 0 0 .06 1.4l2.924 2.71L19.115 20c.18.211.276.485.27.768a1.146 1.146 0 0 1-.3.755l-8.492 8.613 3.864 3.934 9.153-9.3 2.357-2.394c.208-.21.373-.464.486-.744a2.36 2.36 0 0 0-.002-1.77 2.263 2.263 0 0 0-.489-.742ZM52.22 7.19c.82 0 1.485-.677 1.485-1.512 0-.836-.665-1.514-1.485-1.514-.82 0-1.486.678-1.486 1.514 0 .835.665 1.513 1.486 1.513ZM119.396 7.19c.821 0 1.486-.677 1.486-1.512 0-.836-.665-1.514-1.486-1.514-.82 0-1.485.678-1.485 1.514 0 .835.665 1.513 1.485 1.513Z"></path></svg></a><div class="ml-0 mr-auto hidden lg:flex"><a href="/premium/library/" class="inline-flex items-center justify-center border whitespace-nowrap font-medium focus-visible:opacity-80 disabled:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 border-transparent bg-transparent text-neutral-12 px-4 py-2.5 rounded-md text-2 hover:bg-neutral-alpha-3 focus-visible:bg-neutral-alpha-3">Premium</a><a href="/community/" class="inline-flex items-center justify-center border whitespace-nowrap font-medium focus-visible:opacity-80 disabled:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 border-transparent bg-transparent text-neutral-12 px-4 py-2.5 rounded-md text-2 hover:bg-neutral-alpha-3 focus-visible:bg-neutral-alpha-3">Forum</a><a href="/jobs-for-developers/" class="inline-flex items-center justify-center border whitespace-nowrap font-medium focus-visible:opacity-80 disabled:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 border-transparent bg-transparent text-neutral-12 px-4 py-2.5 rounded-md text-2 hover:bg-neutral-alpha-3 focus-visible:bg-neutral-alpha-3">Developer Jobs</a><div><div class="relative" data-headlessui-state=""><div><div tabindex="0" class="cursor-pointer inline-flex items-center justify-center border whitespace-nowrap text-2 font-medium focus-visible:opacity-80 disabled:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 border-transparent bg-transparent hover:bg-neutral-alpha-3 text-neutral-12 px-4 py-2.5 rounded-md text-2 hover:bg-neutral-alpha-3 focus-visible:bg-neutral-alpha-3" aria-expanded="false" data-headlessui-state=""><span>Tutorials<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-xs ml-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"></path></svg></span></div></div></div><div style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></div></div><a href="/premium/pricing/?ref_source=sitepoint&ref_medium=topnav" class="inline-flex items-center justify-center border whitespace-nowrap font-medium focus-visible:opacity-80 disabled:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 border-transparent bg-transparent text-neutral-12 px-4 py-2.5 rounded-md text-2 hover:bg-neutral-alpha-3 focus-visible:bg-neutral-alpha-3">Pricing</a><div><div class="relative" data-headlessui-state=""><div><div tabindex="0" class="cursor-pointer inline-flex items-center justify-center border whitespace-nowrap text-2 font-medium focus-visible:opacity-80 disabled:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 border-transparent bg-transparent hover:bg-neutral-alpha-3 text-neutral-12 px-4 py-2.5 rounded-md text-2 hover:bg-neutral-alpha-3 focus-visible:bg-neutral-alpha-3" aria-expanded="false" data-headlessui-state=""><a class="" tabindex="-1" href="/blog/">Blog<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-xs ml-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"></path></svg></a></div></div></div><div style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></div></div></div><div class="flex-1 hidden"><button class="items-center justify-center border whitespace-nowrap font-medium focus-visible:opacity-80 disabled:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 border-transparent bg-transparent text-neutral-12 px-4 py-2.5 rounded-md text-2 hover:bg-neutral-alpha-3 focus-visible:bg-neutral-alpha-3 hidden ml-4 lg:inline-flex">Cancel</button></div><div class="hidden items-center space-x-1 lg:flex"><button class="items-center justify-center border whitespace-nowrap font-medium focus-visible:opacity-80 disabled:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 border-transparent bg-transparent text-neutral-12 px-4 py-2.5 rounded-md text-2 hover:bg-neutral-alpha-3 focus-visible:bg-neutral-alpha-3 hidden lg:inline-flex"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="magnifying-glass" class="svg-inline--fa fa-magnifying-glass mr-2.5" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path></svg>Search</button><a href="/premium/sign-in/" class="inline-flex items-center justify-center whitespace-nowrap font-medium focus-visible:opacity-80 disabled:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 border bg-transparent disabled:border-neutral-alpha-3 text-neutral-12 px-4 py-2.5 rounded-md text-2 border-neutral-alpha-6 hover:bg-neutral-alpha-3 focus-visible:bg-neutral-alpha-3">Login</a><a href="/premium/pricing/?ref_source=sitepoint&ref_medium=topnav" class="inline-flex items-center justify-center border whitespace-nowrap font-medium focus-visible:opacity-80 disabled:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 border-transparent px-4 py-2.5 rounded-md text-2 bg-primary-9 text-white hover:bg-primary-10 focus-visible:bg-primary-10" id="mobile-join-premium">Start Free Trial</a></div></div><div id="mobile-nav" class="bg-white flex flex-col h-navbar-offset hidden"><div class="flex flex-col flex-1 h-full overflow-hidden"><div class="flex flex-col h-full p-3 overflow-y-auto"><a href="/premium/library/" class="inline-flex items-center border whitespace-nowrap font-medium focus-visible:opacity-80 disabled:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 border-transparent bg-transparent text-neutral-12 px-4 py-2.5 rounded-md text-2 hover:bg-neutral-alpha-3 focus-visible:bg-neutral-alpha-3 justify-normal">Premium</a><a href="/community/" class="inline-flex items-center border whitespace-nowrap font-medium focus-visible:opacity-80 disabled:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 border-transparent bg-transparent text-neutral-12 px-4 py-2.5 rounded-md text-2 hover:bg-neutral-alpha-3 focus-visible:bg-neutral-alpha-3 justify-normal">Forum</a><a href="/jobs-for-developers/" class="inline-flex items-center border whitespace-nowrap font-medium focus-visible:opacity-80 disabled:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 border-transparent bg-transparent text-neutral-12 px-4 py-2.5 rounded-md text-2 hover:bg-neutral-alpha-3 focus-visible:bg-neutral-alpha-3 justify-normal">Developer Jobs</a><button class="items-center border whitespace-nowrap font-medium focus-visible:opacity-80 disabled:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 border-transparent bg-transparent text-neutral-12 px-4 py-2.5 rounded-md text-2 hover:bg-neutral-alpha-3 focus-visible:bg-neutral-alpha-3 flex justify-between space-x-1.5">Tutorials<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-sm px-2 py-1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"></path></svg></button><a href="/premium/pricing/?ref_source=sitepoint&ref_medium=topnav" class="inline-flex items-center border whitespace-nowrap font-medium focus-visible:opacity-80 disabled:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 border-transparent bg-transparent text-neutral-12 px-4 py-2.5 rounded-md text-2 hover:bg-neutral-alpha-3 focus-visible:bg-neutral-alpha-3 justify-normal">Pricing</a><button class="items-center border whitespace-nowrap font-medium focus-visible:opacity-80 disabled:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 border-transparent bg-transparent text-neutral-12 px-4 py-2.5 rounded-md text-2 hover:bg-neutral-alpha-3 focus-visible:bg-neutral-alpha-3 flex justify-between space-x-1.5">Blog<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-sm px-2 py-1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"></path></svg></button><a href="/premium/sign-in/" class="inline-flex items-center border whitespace-nowrap font-medium focus-visible:opacity-80 disabled:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 border-transparent bg-transparent text-neutral-12 px-4 py-2.5 rounded-md text-2 hover:bg-neutral-alpha-3 focus-visible:bg-neutral-alpha-3 justify-normal">Login</a></div></div><div class="container py-6 mt-auto mb-0"><a href="/premium/pricing/?ref_source=sitepoint&ref_medium=topnav" class="inline-flex items-center justify-center border whitespace-nowrap font-medium focus-visible:opacity-80 disabled:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 border-transparent px-4 py-2.5 rounded-md text-2 bg-primary-9 text-white hover:bg-primary-10 focus-visible:bg-primary-10 w-full" id="mobile-join-premium">Start Free Trial</a></div></div></nav></header><main><div class="container py-6"><nav aria-label="Breadcrumb"><ul class="flex flex-wrap"><li class="text-neutral-11 text-1 font-normal after:content-['/'] after:mx-1 after:inline-block last:after:content-none"><a class="text-neutral-alpha-11 hover:text-neutral-alpha-12 focus-visible:text-neutral-alpha-12 font-normal" href="/design-ux/">Design & UX</a></li><li class="text-neutral-11 text-1 font-normal after:content-['/'] after:mx-1 after:inline-block last:after:content-none"><a class="text-neutral-alpha-11 hover:text-neutral-alpha-12 focus-visible:text-neutral-alpha-12 font-normal" href="/design-ux/design-html-css/">HTML & CSS</a></li><li class="text-neutral-11 text-1 font-normal after:content-['/'] after:mx-1 after:inline-block last:after:content-none"><span class="text-neutral-alpha-12">20 Simple Ways to Style the HTML details Element</span></li></ul></nav><article data-category="Design & UX" class=""><div class="flex flex-col py-4 mb-12 lg:grid lg:grid-cols-2"><div class="flex flex-col order-2 lg:order-none"><div class="my-4 font-semibold text-3 flex items-center"><a class="mr-2" href="/author/rmason/"><img src="https://uploads.sitepoint.com/wp-content/uploads/2015/05/1430879451rm-96x96.png" alt="Ralph Mason" class="border-2 border-white rounded-full size-8"/></a><a class="transition-colors hover:text-neutral-alpha-11" href="/author/rmason/">Ralph Mason</a></div><time class="font-normal text-2 text-neutral-11" dateTime="2023-10-26">October 26, 2023</time><h1 class="m-0 mt-2 mb-4 font-bold text-8 text-neutral-12">20 Simple Ways to Style the HTML details Element</h1><div class="flex flex-wrap mb-8"><a class="mr-2 mb-2 px-3 py-1.5 text-2 font-medium rounded-md bg-primary-alpha-3 text-primary-12 transition-colors hover:text-primary-12 hover:bg-primary-alpha-4 active:opacity-80" href="/html-css/css/">CSS</a><a class="mr-2 mb-2 px-3 py-1.5 text-2 font-medium rounded-md bg-primary-alpha-3 text-primary-12 transition-colors hover:text-primary-12 hover:bg-primary-alpha-4 active:opacity-80" href="/design-ux/">Design & UX</a><a class="mr-2 mb-2 px-3 py-1.5 text-2 font-medium rounded-md bg-primary-alpha-3 text-primary-12 transition-colors hover:text-primary-12 hover:bg-primary-alpha-4 active:opacity-80" href="/html-css/">HTML & CSS</a><a class="mr-2 mb-2 px-3 py-1.5 text-2 font-medium rounded-md bg-primary-alpha-3 text-primary-12 transition-colors hover:text-primary-12 hover:bg-primary-alpha-4 active:opacity-80" href="/design-ux/design-html-css/">HTML & CSS</a><a class="mr-2 mb-2 px-3 py-1.5 text-2 font-medium rounded-md bg-primary-alpha-3 text-primary-12 transition-colors hover:text-primary-12 hover:bg-primary-alpha-4 active:opacity-80" href="/html-css/html5-html-css/">HTML5</a></div><div class="flex flex-wrap items-center mt-auto mb-0 space-x-2"><p class="mb-0 font-normal text-2 text-neutral-11">Share this article</p><div class="flex space-x-3 items-center justify-evenly"><button aria-label="Share SitePoint on facebook" data-network="facebook" class="social-share-button cursor-pointer transform transition duration-200 hover:scale-125"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="w-6 h-6"><path fill="#1C2024" d="M18 9.95a8.084 8.084 0 0 0-1.309-4.313 8.014 8.014 0 0 0-3.409-2.928A7.956 7.956 0 0 0 4.767 3.96 8.055 8.055 0 0 0 2.334 7.75a8.097 8.097 0 0 0-.027 4.51 8.056 8.056 0 0 0 2.389 3.816A7.98 7.98 0 0 0 8.75 18v-5.705h-2V9.95h2V8.17a2.863 2.863 0 0 1 .766-2.286 2.829 2.829 0 0 1 2.234-.874c.6.008 1.198.062 1.79.161v2.013h-1a1.153 1.153 0 0 0-.953.32 1.167 1.167 0 0 0-.347.947v1.52h2.22l-.36 2.344h-1.85v5.635a7.988 7.988 0 0 0 4.848-2.741A8.08 8.08 0 0 0 18 9.95Z"></path></svg></button><button aria-label="Share SitePoint on reddit" data-network="reddit" class="social-share-button cursor-pointer transform transition duration-200 hover:scale-125"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="w-6 h-6"><path fill="#1C2024" d="M8.19 12.66a.218.218 0 0 0-.155.371 3.064 3.064 0 0 0 1.98.608h-.006a3.048 3.048 0 0 0 1.982-.614l-.008.005a.24.24 0 0 0 .02-.31v.001a.219.219 0 0 0-.31 0 2.625 2.625 0 0 1-1.681.487h.007a2.616 2.616 0 0 1-1.683-.492l.008.006a.217.217 0 0 0-.154-.064H8.19v.002ZM11.832 10a.833.833 0 1 0 .002 1.666.833.833 0 0 0-.002-1.666Zm-3.667 0a.833.833 0 1 1 0 1.665.833.833 0 0 1 0-1.665Zm5.174-4.837a.827.827 0 1 1-.832.872v-.002l-1.731-.365-.534 2.498A5.761 5.761 0 0 1 13.38 9.17l-.02-.013c.203-.202.483-.327.793-.327h.013A1.17 1.17 0 0 1 15.334 10a1.21 1.21 0 0 1-.667 1.073l-.007.003c.018.102.028.22.028.34v.007c0 1.796-2.086 3.246-4.669 3.246-2.582 0-4.669-1.45-4.669-3.246v-.003c0-.125.01-.247.03-.366l-.001.012a1.169 1.169 0 0 1 .476-2.236h.001c.313.003.595.127.805.327a5.629 5.629 0 0 1 3.16-.992h.002l.59-2.788a.229.229 0 0 1 .092-.13h.001a.232.232 0 0 1 .16-.029h-.001l1.937.412a.81.81 0 0 1 .733-.468h.006v.001ZM10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z"></path></svg></button><button aria-label="Share SitePoint on twitter" data-network="twitter" class="social-share-button cursor-pointer transform transition duration-200 hover:scale-125"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="w-6 h-6"><path fill="currentColor" fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.734 5.636H5.381l3.456 4.942-3.277 3.786h1.072l2.682-3.106 2.172 3.106h3.353l-3.673-5.25 3.003-3.478h-1.055l-2.422 2.799-1.958-2.799Zm4.482 7.863h-1.301L7.003 6.497h1.3l4.913 7.002Z" clip-rule="evenodd"></path></svg></button><button aria-label="Share SitePoint on linkedin" data-network="linkedin" class="social-share-button cursor-pointer transform transition duration-200 hover:scale-125"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="w-6 h-6"><path fill="#1C2024" d="M10 2a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8ZM7.763 13.347h-1.56v-4.99h1.56v4.99ZM6.94 7.73h-.013c-.566 0-.931-.381-.931-.865 0-.494.378-.866.953-.866s.928.372.94.866c.004.48-.362.865-.95.865ZM14 13.347h-1.769v-2.581c0-.675-.275-1.138-.884-1.138-.466 0-.725.313-.844.613-.044.106-.037.256-.037.409v2.697H8.713s.021-4.575 0-4.99h1.753v.784c.103-.344.662-.832 1.556-.832 1.11 0 1.978.72 1.978 2.263v2.775Z"></path></svg></button><button aria-label="Share SitePoint on email" data-network="email" class="social-share-button cursor-pointer transform transition duration-200 hover:scale-125"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="w-6 h-6"><path fill="#1C2024" d="M3.334 16.667c-.459 0-.851-.163-1.177-.49A1.605 1.605 0 0 1 1.667 15V5c0-.458.163-.85.49-1.177.326-.326.718-.49 1.177-.49h13.333c.458 0 .85.164 1.177.49.326.326.49.719.49 1.177v10c0 .459-.163.85-.49 1.177-.326.327-.719.49-1.177.49H3.334ZM10 10.687a.867.867 0 0 0 .438-.125l5.896-3.687a.69.69 0 0 0 .333-.604.68.68 0 0 0-.354-.625c-.236-.139-.48-.132-.73.02L10 9.167l-5.583-3.5c-.25-.152-.493-.155-.73-.01a.686.686 0 0 0-.353.615c0 .139.027.26.083.365a.557.557 0 0 0 .25.24l5.896 3.687a.868.868 0 0 0 .437.125Z"></path></svg></button></div></div></div><div class="order-1 lg:self-center lg:order-none lg:pl-8"><div class="overflow-hidden rounded-lg aspect-w-16 aspect-h-9 bg-primary-alpha-3"><picture><source srcSet="https://uploads.sitepoint.com/wp-content/uploads/2023/10/1697843489style-html-details-element-300x190.jpg" media="(max-width: 500px)"/><img src="https://uploads.sitepoint.com/wp-content/uploads/2023/10/1697843489style-html-details-element.jpg" alt="20 Simple Ways to Style the HTML details Element" height="379" width="600" class="object-cover object-center w-full h-full"/></picture></div></div></div><div class="flex flex-col py-8 border-t-neutral-5 md:space-x-6 lg:py-16 lg:border-t lg:flex-row"><div class="flex flex-col order-2 lg:order-none lg:container-post-content xl:flex-row"><div class="xl:container-post-toc xl:pr-4"><div class="mb-16 overflow-y-auto font-medium xl:sticky-dock xl:max-h-screen-dock xl:mb-0"><button class="w-full flex justify-between items-baseline p-6 rounded-2xl bg-neutral-3 text-left xl:bg-transparent xl:p-0 xl:rounded-none"><span class="block text-3 text-neutral-12 xl:mb-4">Table of Contents</span><span class="block transition-transform duration-300 rotate-180 xl:hidden"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"></path></svg></span></button><ul class="mb-0 rounded-b-2xl p-6 -mt-6 bg-neutral-3 space-y-4 xl:bg-transparent xl:p-0 xl:mt-0 xl:rounded-none block"><li class="font-normal text-2"><a href="#h-key-takeaways" class="underline underline-offset-2 text-neutral-alpha-11 hover:text-neutral-alpha-12">Key Takeaways</a></li><li class="font-normal text-2"><a href="#introducingthedetailselement" class="underline underline-offset-2 text-neutral-alpha-11 hover:text-neutral-alpha-12">Introducing the details Element</a></li><li class="font-normal text-2"><a href="#backgroundcolorsbordersandpadding" class="underline underline-offset-2 text-neutral-alpha-11 hover:text-neutral-alpha-12">Background Colors, Borders and Padding</a></li><li class="font-normal text-2"><a href="#stylingthemarker" class="underline underline-offset-2 text-neutral-alpha-11 hover:text-neutral-alpha-12">Styling the Marker</a></li><li class="font-normal text-2"><a href="#creatingacustommarkerforthesummaryelement" class="underline underline-offset-2 text-neutral-alpha-11 hover:text-neutral-alpha-12">Creating a Custom Marker for the summary Element</a></li><li class="font-normal text-2"><a href="#miscellaneousextras" class="underline underline-offset-2 text-neutral-alpha-11 hover:text-neutral-alpha-12">Miscellaneous Extras</a></li><li class="font-normal text-2"><a href="#conclusion" class="underline underline-offset-2 text-neutral-alpha-11 hover:text-neutral-alpha-12">Conclusion</a></li></ul></div></div><div class="w-full space-y-16 xl:container-post-body"><div class="post-body rich-text"> <div class="inline-content"></div> <h2 class="wp-block-heading" id="h-key-takeaways">Key Takeaways</h2> <ul class="wp-block-list"> <li>Enhance the visual appeal of the `<details>` element by adding borders, padding, and background colors to distinguish it from other content.</details></li> <li>Customize the default marker of the `<summary>` element using CSS properties for color, spacing, and shape, or replace it with custom characters or images.</summary></li> <li>Utilize CSS pseudo-elements like `::after` to create dynamic, custom markers that can be animated or styled independently from the `<summary>` text.</summary></li> <li>Experiment with hover effects, animations, and content transitions within the `<details>` element to enrich user interaction and visual engagement.</details></li> <li>Address accessibility and usability by modifying focus styles and cursor types, ensuring that the element is user-friendly across different browsing methods.</li> </ul> <p><strong>In this article, we’ll look at some simple ways to style the HTML <code><details></code> element, which is a very useful element for revealing and hiding bits of content on a web page.</strong></p> <p>It’s handy to have a simple disclosure element in HTML that doesn’t require JavaScript, but the default styling of the <code><details></code> element might be a turn-off for some. Fortunately, it’s quite easy to change the styling of this element.</p> <p>The table of contents below is an example of the <code><details></code> element in use. We’ve added a simple border to it, along with some padding.</p> <details style="padding: 10px; border: 5px solid #f7f7f7; border-radius: 3px; margin-top: 1rem; margin-bottom: 1.5rem;"> <summary>Table of Contents</summary> <ul style="margin-top: 0.5rem; margin-bottom: .25rem;"> <li><a href="#introducingthedetailselement">Introducing the details Element</a></li> <li><a href="#backgroundcolorsbordersandpadding">Background Colors, Borders and Padding</a> <ul style="margin-bottom:0"> <li><a href="#addingaborder">Adding a border</a></li> <li><a href="#addingsomebackgroundcolor">Adding some background color</a></li> </ul> </li> <li><a href="#stylingthemarker">Styling the Marker</a> <ul style="margin-bottom:0"> <li><a href="#changingthemarkercolor">Changing the marker color</a></li> <li><a href="#changingthemarkerspacing">Changing the marker spacing</a></li> <li><a href="#changingthemarkershape">Changing the marker shape</a></li> </ul> </li> <li><a href="#creatingacustommarkerforthesummaryelement">Creating a Custom Marker for the summary Element</a> <ul style="margin-bottom:0"> <li><a href="#removingthecustommarker">Removing the custom marker</a></li> <li><a href="#usingabackgroundimageasamarker">Using a background image as a marker</a></li> <li><a href="#usingabackgroundimageasamarkerwithafter">Using a background image as a marker with ::after</a></li> <li><a href="#makingthesummaryelementlooklikeatab">Making the summary element look like a tab</a></li> <li><a href="#limitingthewidthofthedetailselement">Limiting the width of the details element</a></li> <li><a href="#placingthemarkerarrowatthefarendofthesummary">Placing the marker arrow at the far end of the summary</a></li> <li><a href="#usingafterasamarkerwithoutabackgroundimage">Using ::after as a marker without a background image</a></li> </ul> </li> <li><a href="#miscellaneousextras">Miscellaneous Extras</a> <ul style="margin-bottom:0"> <li><a href="#hovereffectonthedetailselement">Hover effect on the details element</a></li> <li><a href="#animatingtheopeningandclosingofthedetailselement">Animating the opening and closing of the details element</a></li> <li><a href="#changingsummarycontentinopenandclosedstates">Changing summary content in open and closed states</a></li> <li><a href="#changingthesummarycursor">Changing the summary cursor</a></li> <li><a href="#changingtheaccessibilityfocusstyles">Changing the accessibility focus styles</a></li> <li><a href="#usingmultipledetailselementslikeanaccordionlist">Using multiple details elements like an accordion list</a></li> <li><a href="#stylingaheadinginsidethesummary">Styling a heading inside the summary</a></li> </ul> </li> <li><a href="#conclusion">Conclusion</a></li> </ul> </details> <h2 id="introducingthedetailselement">Introducing the details Element</h2> <p>Here’s the basic code for the <code><details></code> element:</p> <pre class="language-markup"><code class="markup language-markup code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> </span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Click me!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> </span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Peekaboo! Here's some hidden content!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> </span></code></pre> <p>Basically any HTML content can be placed inside the <code><details></code> element. The <code><summary></code> element provides the prompt for the user to click on the element to reveal more content, and it must be the first child of the <code><details></code> element.</p> <p>Here’s a live example of this code:</p> <details style="margin: 1em 0;"> <summary>Click me!</summary> <p>Peekaboo! Here’s some hidden content!</p> </details> <p>Let’s look at all the ways we can use CSS to enhance the appearance of our <code><details></code> element.</p> <h2 id="backgroundcolorsbordersandpadding">Background Colors, Borders and Padding</h2> <p>A really simple way to enhance the look of the <code><details></code> element is to add some padding along with a border or some background colors.</p> <h3 id="addingaborder">Adding a border</h3> <p>As shown in the table of contents above, a simple border can do a lot to enhance and define the <code><details></code> element, along with some padding and a slight border radius:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">details</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">5</span><span class="token unit">px</span> solid <span class="token hexcode color">#f7f7f7</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">3</span><span class="token unit">px</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <p>That’s the simple code we’ve used above to style our ToC.</p> <h3 id="addingsomebackgroundcolor">Adding some background color</h3> <p>Let’s add a background color to our <code><details></code> element instead of a border:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">details</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode color">#e4eaef</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">5</span><span class="token unit">px</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <p>The result is shown in the Pen below.</p> <div style="margin: 1em 0"><p class="codepen" data-default-tab="result" data-height="400" data-slug-hash="qBgWXLm" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/SitePoint/pen/qBgWXLm"> Styling the HTML details element: adding padding and a background color</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script></div>  <p>The background color gives the element better definition, and the padding helps to create some space inside it.</p> <p>We can also give a different background color to the <code><summary></code> element to distinguish it from the rest of the content, and change its text color:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">summary</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode color">#2196F3</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">white</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <div style="margin: 1em 0"><p class="codepen" data-default-tab="result" data-height="400" data-slug-hash="bGzbrZZ" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/SitePoint/pen/bGzbrZZ"> Styling the HTML details element: adding a background color to the summary element</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p></div>  <p>Note that changing the text color of the <code><summary></code> element also changes the color of the marker arrow. That’s because the marker is actually attached to the <code><summary></code> element just as markers (such as bullets) are attached to list items. We’ll see below how to style them separately.</p> <h2 id="stylingthemarker">Styling the Marker</h2> <p>The <code><summary></code> element is set to a <code>display</code> of <code>list-item</code>. So the default arrow (▶) that comes with it can be altered just like the default markers on HTML list items. We can change the character that’s used, and independently change its color.</p> <h3 id="changingthemarkercolor">Changing the marker color</h3> <p>Let’s set the default marker to a different color. Just for fun, let’s also bump up the font size of the marker. We can do this with the <code>::marker</code> pseudo-element:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">summary<span class="token pseudo-element">::marker</span></span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode color">#e162bf</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">1.2</span><span class="token unit">em</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <p>The result is shown below.</p> <div style="margin: 1em 0"><p class="codepen" data-default-tab="result" data-height="450" data-slug-hash="NWoKvVV" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/SitePoint/pen/NWoKvVV"> Styling the HTML details element: changing the marker color</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p></div>  <p>It’s a nice, simple solution, although <code>::marker</code> unfortunately <em>isn’t supported in Safari</em>, so see other options below if that’s a dealbreaker.</p> <h3 id="changingthemarkerspacing">Changing the marker spacing</h3> <p>By default, the marker arrow is pretty close to the summary text. Its <code>list-style-position</code> is set to <code>inside</code>. If we change it to <code>outside</code>, we can add space between the summary text and the marker by adding some left padding. We also need to add some left margin so that the triangle doesn’t hang outside the container:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">summary</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">list-style-position</span><span class="token punctuation">:</span> outside<span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token number">30</span><span class="token unit">px</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span> <span class="token number">10</span><span class="token unit">px</span> <span class="token number">10</span><span class="token unit">px</span> <span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">5</span><span class="token unit">px</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <p>The result is shown below.</p> <div style="margin: 1em 0"><p class="codepen" data-default-tab="result" data-height="500" data-slug-hash="GRzKvVX" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/SitePoint/pen/GRzKvVX"> Styling the HTML details element: spacing marker arrow and summary text</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p></div>  <p>I’ve exaggerated the spacing between the arrow marker and the summary text just to make it obvious. Unfortunately, using <code>list-style-position: outside;</code> with the <code><summary></code> element doesn’t work in Safari. Fortunately, there are other options, as we’ll see below.</p> <h3 id="changingthemarkershape">Changing the marker shape</h3> <p>The marker on our <code><summary></code> element doesn’t have to be a triangle. We can replace it with any character we please:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">summary</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">list-style-type</span><span class="token punctuation">:</span> <span class="token string">'⬇ '</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <p>Note that we’ve used <code>'⬇ '</code> (with a space next to the arrow), which is an alternative to the spacing we tried above.</p> <p>We now have a down arrow instead of a triangle. <strong>But …</strong> that down arrow won’t change when the <code><details></code> element is open. That’s because the <code><details></code> element has two states — <code>closed</code> and <code>open</code> — and we’ve only set the marker style for the <code>closed</code> state. So let’s also set a marker for the <code>open</code> state:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">details<span class="token attribute"><span class="token punctuation">[</span><span class="token attr-name">open</span><span class="token punctuation">]</span></span> <span class="token combinator">></span> summary</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">list-style-type</span><span class="token punctuation">:</span> <span class="token string">'⬆ '</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <p>This time, we’ve used an up-pointing arrow. This gives us the result shown below.</p> <div style="margin: 1em 0"><p class="codepen" data-default-tab="result" data-height="650" data-slug-hash="wvNwrwZ" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/SitePoint/pen/wvNwrwZ"> Styling the HTML details element: changing the summary marker with list-style-type</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p></div>  <p>Damn! Once again, Safari lets us down, as it doesn’t support <code>list-style-type</code> on the <code><summary></code> element either. Don’t despair, though, as we’ll look at fancier solutions below.</p> <p>We can try all sorts of other characters, such as + and –, ✓ and Χ or ✗, ⋁ and ⋀ , and even have fun with other characters like ★ or colorful fruits like 🍏 🍌 🍓 🍋 and 🍐, but remember that these characters may not work on all systems, so be a little careful, and once again, <code>list-style-type</code> certainly won’t work in Safari.</p> <h2 id="creatingacustommarkerforthesummaryelement">Creating a Custom Marker for the summary Element</h2> <p>As we saw above, even though we <em>can</em> set a different character for the default marker, and give it styles such as color and font size, there can be issues with doing so. A better option might be to remove the marker altogether and create a completely custom alternative.</p> <h3 id="removingthecustommarker">Removing the custom marker</h3> <p>As with list item markers, we can remove the marker altogether:</p> <div class="inline-content"></div> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">summary</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span><span class="code-line"> </span><span class="code-line"><span class="token comment">/* sigh, Safari again */</span> </span><span class="code-line"> </span><span class="code-line"><span class="token selector">summary<span class="token pseudo-element">::-webkit-details-marker</span></span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <p>The standard <code>list-style: none</code> works on all browsers except … (can you guess?) … Safari. At least there’s a proprietary <code>-webkit-</code> option in this case.</p> <p><em>Note: another way to remove the marker from the <code><summary></code> element is to give the <code><summary></code> element a <code>display</code> value of something other than <code>list-item</code> — such as <code>block</code> or <code>flex</code>. This works in every browser except … (do I even need to say it?) … Safari.</em></p> <p>Now our element has no marker.</p> <div style="margin: 1em 0"><p class="codepen" data-default-tab="result" data-height="480" data-slug-hash="bGzboNy" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/SitePoint/pen/bGzboNy"> Styling the HTML details element: a details element with no marker</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p></div>  <p>Having no marker gives no visual prompt at all that this element is clickable, so it’s not a great idea to leave it at that.</p> <h3 id="usingabackgroundimageasamarker">Using a background image as a marker</h3> <p>We could place an image on the background, like so:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">summary</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span> <span class="token number">10</span><span class="token unit">px</span> <span class="token number">10</span><span class="token unit">px</span> <span class="token number">40</span><span class="token unit">px</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>arrow.svg<span class="token punctuation">)</span></span> no-repeat <span class="token number">14</span><span class="token unit">px</span> <span class="token number">50</span><span class="token unit">%</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">background-size</span><span class="token punctuation">:</span> <span class="token number">18</span><span class="token unit">px</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <p>The result is shown below.</p> <div style="margin: 1em 0"><p class="codepen" data-default-tab="result" data-height="480" data-slug-hash="qBgWPOV" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/SitePoint/pen/qBgWPOV"> Styling the HTML details element: a background image on summary as marker</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p></div>  <p>The downside of using a background image directly on the <code><summary></code> element is that we can’t rotate it when the <code><details></code> element is open, because <a href="https://www.sitepoint.com/css3-transform-background-image/">animations can’t be set directly on background images in CSS</a>. (We could, of course, use a different image for the open state, but we still couldn’t animate it, which is much more fun.) So if we’re going to use a background image, it’s better to place it on an element that <em>can</em> be rotated and/or animated.</p> <h3 id="usingabackgroundimageasamarkerwithafter">Using a background image as a marker with ::after</h3> <p>Let’s put the background image within an <code>::after</code> pseudo-element:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">summary</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span><span class="code-line"> </span><span class="code-line"><span class="token selector">summary<span class="token pseudo-element">::after</span></span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">18</span><span class="token unit">px</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'arrow.svg'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">background-size</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token number">.75</span><span class="token unit">em</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">transition</span><span class="token punctuation">:</span> <span class="token number">0.2</span><span class="token unit">s</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span><span class="code-line"> </span><span class="code-line"><span class="token selector">details<span class="token attribute"><span class="token punctuation">[</span><span class="token attr-name">open</span><span class="token punctuation">]</span></span> <span class="token combinator">></span> summary<span class="token pseudo-element">::after</span></span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span><span class="token number">180</span><span class="token unit">deg</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <p>Here’s a live demo of this code.</p> <div style="margin: 1em 0"><p class="codepen" data-default-tab="result" data-height="650" data-slug-hash="gOqYGPZ" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/SitePoint/pen/gOqYGPZ"> Styling the HTML details element: a background image on summary::after as marker</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p></div>  <p>We’ve used <code>display: flex</code> on the <code><summary></code> element to make it easy to position the arrow horizontally.</p> <p>The nice thing about this setup is that we can add animation to the arrow. (The animation doesn’t seem to work in Safari, but the behavior is good enough, and I’m getting a bit fed up with this browser!)</p> <h3 id="makingthesummaryelementlooklikeatab">Making the summary element look like a tab</h3> <p>We’ve been setting the <code><summary></code> element to full width, but it doesn’t have to be. We could make it look more like a tab, with this simple change:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">summary</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> inline-flex<span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <p>An example is shown below.</p> <div style="margin: 1em 0"><p class="codepen" data-default-tab="result" data-height="350" data-slug-hash="eYxOGzB" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/SitePoint/pen/eYxOGzB"> Styling the HTML details element: the summary element displayed as a tab</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p></div>  <h3 id="limitingthewidthofthedetailselement">Limiting the width of the details element</h3> <p>In all of our examples so far, the <code><details></code> element has stretched to the full width of its container, because it’s a block-level element. We can give it a different width, however, if we don’t want it so wide, such as <code>width: 50%;</code>. Or we could could set it to an inline display so that it’s just as wide as its content:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">details</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <p>Click on the tab below to reveal the narrower width of the <code><details></code> element.</p> <div style="margin: 1em 0"><p class="codepen" data-default-tab="result" data-height="350" data-slug-hash="poGzWNg" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/SitePoint/pen/poGzWNg"> Styling the HTML details element: the details element displayed inline</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p></div>  <p>Try changing <code>display: inline-block</code> to <code>width: 50%</code> in the Pen above.</p> <h3 id="placingthemarkerarrowatthefarendofthesummary">Placing the marker arrow at the far end of the summary</h3> <p>Let’s do something a bit different now, placing the marker arrow on the right-hand side of the <code><summary></code> element. Because we’ve been using <code>display: flex</code>, moving the arrow to the far right is as easy as adding <code>justify-content: space-between</code> to the <code><summary></code> element:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">summary</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <div style="margin: 1em 0"><p class="codepen" data-default-tab="result" data-height="450" data-slug-hash="eYxOGvg" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/SitePoint/pen/eYxOGvg"> Styling the HTML details element: a background image on summary::after as marker, right aligned</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p></div>  <h3 id="usingafterasamarkerwithoutabackgroundimage">Using ::after as a marker without a background image</h3> <p>There are other ways we could use <code>::after</code> without an actual image. Here’s an example that uses just <code>::after</code> with borders:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">summary<span class="token pseudo-element">::after</span></span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">border-top</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span> solid <span class="token hexcode color">#15171b</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">border-inline</span><span class="token punctuation">:</span> <span class="token number">7</span><span class="token unit">px</span> solid <span class="token color">transparent</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">transition</span><span class="token punctuation">:</span> <span class="token number">0.2</span><span class="token unit">s</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <p>Here’s a live demo.</p> <div style="margin: 1em 0"><p class="codepen" data-default-tab="result" data-height="500" data-slug-hash="gOqYGWy" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/SitePoint/pen/gOqYGWy"> Styling the HTML details element: right-aligned marker using summary::after and borders</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p></div>  <p>Now we have an arrow that rotates between the closed and open state. We’ve also added a nice drop shadow to the <code><details></code> element.</p> <p>Another way to use <code>::after</code> without an image is to place Unicode characters within the <code>content</code> property:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">summary<span class="token pseudo-element">::after</span></span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"\25BC"</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">transition</span><span class="token punctuation">:</span> <span class="token number">0.2</span><span class="token unit">s</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <p>This sets a triangle shape (▼) as our marker, as shown in <a href="https://codepen.io/SitePoint/pen/KKJPXba">this CodePen demo</a>.</p> <p>There are thousands of <a href="https://unicode-explorer.com/">Unicode symbols</a>, and they’re quite fun to explore. Each comes with a code like <code>U + 25BC</code> or <code>U + 025BC</code>. To use that code inside the <code>content</code> property, take the characters after the <code>+</code> and place them inside the <code>content</code> quotes, with a <code>\</code> at the front: <code>content: "\25BC"</code>. If there’s one or more zeros at the start, you can leave them out. (For example, <code>U + 02248</code> can become <code>"\02248"</code> or <code>"\2248"</code>.)</p> <h2 id="miscellaneousextras">Miscellaneous Extras</h2> <p>So far, the things we’ve done above are more than enough, but there are other things we can have fun with, so let’s just play with a few of them here.</p> <h3 id="hovereffectonthedetailselement">Hover effect on the details element</h3> <p>We can set various hover effects on the <code><details></code> element. For example, we might do something like this:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">details</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">transition</span><span class="token punctuation">:</span> <span class="token number">0.2</span><span class="token unit">s</span> background linear<span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span><span class="code-line"> </span><span class="code-line"><span class="token selector">details<span class="token pseudo-class">:hover</span></span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode color">#dad3b1</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <p>While we’re at it, let’s also transition the <code><summary></code> text color in the <code>open</code> state:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">details <span class="token combinator">></span> summary</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">transition</span><span class="token punctuation">:</span> color <span class="token number">1</span><span class="token unit">s</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span><span class="code-line"> </span><span class="code-line"><span class="token selector">details<span class="token attribute"><span class="token punctuation">[</span><span class="token attr-name">open</span><span class="token punctuation">]</span></span> <span class="token combinator">></span> summary</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode color">#d9103e</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <p>The result is shown below.</p> <div style="margin: 1em 0"><p class="codepen" data-default-tab="result" data-height="600" data-slug-hash="poGzWrb" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/SitePoint/pen/poGzWrb"> Styling the HTML details element: background and text transition effects</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p></div>  <p>We could also just set a background change on the <code><summary></code> element instead.</p> <h3 id="animatingtheopeningandclosingofthedetailselement">Animating the opening and closing of the details element</h3> <p>Haha, fooled ya! It appears it’s not possible to animate the opening and closing of the <code><details></code> element. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details">According to MDN</a>:</p> <div class="inline-content"></div> <blockquote> <p>Unfortunately, at this time, there’s no built-in way to animate the transition between open and closed.</p> </blockquote> <p>However, this ability is <a href="https://x.com/wesbos/status/1813207251311640895">coming soon</a> (as of late 2024) via <code>calc-size(auto)</code>. (Here’s <a href="https://stackoverflow.com/questions/38213329/how-to-add-css3-transition-with-html5-details-summary-tag-reveal/79142029#79142029">an example of how it might work</a>.)</p> <p>In the meantime, we can have a bit of fun by animating the <em>contents</em> of the <code><details></code> element. For example, we could set the contents to fade in once revealed:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">details article</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span><span class="code-line"> </span><span class="code-line"><span class="token selector">details<span class="token attribute"><span class="token punctuation">[</span><span class="token attr-name">open</span><span class="token punctuation">]</span></span> article</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">animation</span><span class="token punctuation">:</span> fadeIn <span class="token number">.75</span><span class="token unit">s</span> linear forwards<span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span><span class="code-line"> </span><span class="code-line"><span class="token atrule"><span class="token rule">@keyframes</span> fadeIn</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token selector">0%</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token punctuation">}</span> </span><span class="code-line"> <span class="token selector">100%</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token punctuation">}</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <p>The result is shown below.</p> <div style="margin: 1em 0"><p class="codepen" data-default-tab="result" data-height="650" data-slug-hash="BaMBwmB" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/SitePoint/pen/BaMBwmB"> Styling the HTML details element: fading in the contents of the details element</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p></div>  <p>Another trick might be to slide in the content, like so:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">details</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span><span class="code-line"> </span><span class="code-line"><span class="token selector">details<span class="token attribute"><span class="token punctuation">[</span><span class="token attr-name">open</span><span class="token punctuation">]</span></span> article</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">animation</span><span class="token punctuation">:</span> animateUp <span class="token number">.5</span><span class="token unit">s</span> linear forwards<span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span><span class="code-line"> </span><span class="code-line"><span class="token atrule"><span class="token rule">@keyframes</span> animateUp</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token selector">0%</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translatey</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token unit">%</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token punctuation">}</span> </span><span class="code-line"> <span class="token selector">100%</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translatey</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span><span class="code-line"> <span class="token punctuation">}</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <p>The result is shown below.</p> <div style="margin: 1em 0"><p class="codepen" data-default-tab="result" data-height="650" data-slug-hash="KKJPXQM" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/SitePoint/pen/KKJPXQM"> Styling the HTML details element: sliding in the contents of the details element</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p></div>  <p>It’s a bit cheesy, and perhaps overkill, but worth trying anyway. Unfortunately, these animations only work the first time the element is clicked (<em>unless the browser devtools are open, for some weird reason!</em>). You basically need <a href="https://css-tricks.com/restart-css-animation/">the intervention of JavaScript</a> to make the effect work repeatedly.</p> <h3 id="changingsummarycontentinopenandclosedstates">Changing summary content in open and closed states</h3> <p>In the demos above, the <code><select></code> has always had the same text, whether the <code><details></code> element is open or closed. But we could change that. Firstly, let’s leave the current “Click me” text in place, but also add some extra text for each state using the <code>::after</code> pseudo-element:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">summary<span class="token pseudo-element">::after</span></span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" to show hidden content"</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span><span class="code-line"> </span><span class="code-line"><span class="token selector">details<span class="token attribute"><span class="token punctuation">[</span><span class="token attr-name">open</span><span class="token punctuation">]</span></span> summary<span class="token pseudo-element">::after</span></span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" to hide extra content"</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <p>That gives us the result shown below.</p> <div style="margin: 1em 0"><p class="codepen" data-default-tab="result" data-height="450" data-slug-hash="xxMKXWW" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/SitePoint/pen/xxMKXWW"> Styling the HTML details element: toggling the select text</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p></div>  <h3 id="changingthesummarycursor">Changing the summary cursor</h3> <p>The default cursor (or mouse pointer) for the <code><details></code> element is kind of weird. It’s a standard arrow for the most part, and a text pointer (or I-beam) when hovering over the <code><summary></code> text.</p> <p>For fun, let’s change to the hand cursor (or “pointer”):</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">summary</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <p>This sets the mouse pointer to a hand when hovering anywhere over the <code><summary></code> element, as shown below.</p> <div style="margin: 1em 0"><p class="codepen" data-default-tab="result" data-height="600" data-slug-hash="ZEwzXoK" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/SitePoint/pen/ZEwzXoK"> Styling the HTML details element: Changing the summary cursor to a hand (pointer)</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p></div>  <p>We could set the cursor on the <code><details></code> element instead, which would force the hand cursor across the entire <code><details></code> element. I prefer to keep it just on the thing we’re meant to click, though.</p> <h3 id="changingtheaccessibilityfocusstyles">Changing the accessibility focus styles</h3> <p>If we’re navigating a page via the keyboard, we can tab to the <code><details></code> element and then open it by hitting <kbd>return</kbd>. During focus, the <code><summary></code> element has a default outline. The image below shows what this looks like in various browsers.</p> <p><img width="1000" height="566" decoding="async" alt="The default focus outline of Chrome, Firefox, Edge and Safari" src="https://uploads.sitepoint.com/wp-content/uploads/2023/10/1697701100details-focus.jpg" loading="lazy"></p> <p>They’re much of a muchness: mostly a simple, dark (blue or black), solid outline that’s about <code>3px</code> wide.</p> <p>There are many styles we could set for the focused <code><details></code> element, but let’s do something simple here as proof of concept, changing the outline to a red dotted line:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">summary<span class="token pseudo-class">:focus</span></span> <span class="token punctuation">{</span><span class="token property">outline</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token punctuation">}</span> </span><span class="code-line"><span class="token selector">summary<span class="token pseudo-class">:focus-visible</span></span> <span class="token punctuation">{</span><span class="token property">outline</span><span class="token punctuation">:</span> <span class="token number">3</span><span class="token unit">px</span> dotted <span class="token hexcode color">#ff0060</span><span class="token punctuation">;</span><span class="token punctuation">}</span> </span><span class="code-line"><span class="token selector">summary</span> <span class="token punctuation">{</span><span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span><span class="token punctuation">}</span> </span></code></pre> <p>By default, the focus outline doesn’t display when we click on the <code><summary></code> element. But if we change the focus style, that style <em>does</em> display even to non-keyboard users (that is, when we click on the <code><details></code> element with a mouse). So in the code above, we’ve set the <code>outline</code> to <code>none</code> and instead used <code>focus-visible</code> to set the styles, as this means the focus styles will only be visible to keyboard users (for whom it’s actually useful).</p> <p>The image below shows our new styling.</p> <p><img width="1000" height="77" decoding="async" alt="Our new custom focus style on the summary element" src="https://uploads.sitepoint.com/wp-content/uploads/2023/10/1697701217custom-focus.jpg" loading="lazy"></p> <p>Here’s a live demo.</p> <div style="margin: 1em 0"><p class="codepen" data-default-tab="result" data-height="300" data-slug-hash="VwgZMdq" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/SitePoint/pen/VwgZMdq"> Styling the HTML details element: styling the focus outline</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p></div>  <p>We could have a lot of fun with this, using animations, background colors and so on when the <code><details></code> element is in focus. I’ll leave it to you to experiment further.</p> <h3 id="usingmultipledetailselementslikeanaccordionlist">Using multiple details elements like an accordion list</h3> <p>As of 2024, we can create an “exclusive accordion” effect in some browsers. That is, we can create an accordion with multiple <code>details</code> elements where one closes when another opens — by using the <code>name</code> attribute. We simply put the same <code>name</code> attribute on any element we want as part of the accordion — such as <code>name="exclusive"</code>. (These related <code>details</code> elements can be anywhere on the page; they don’t have to be side by side!)</p> <p>Here’s an example:</p> <div><pre class="language-markup"><code class="language-markup code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>exclusive<span class="token punctuation">"</span></span> <span class="token attr-name">open</span><span class="token punctuation">></span></span> </span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Exclusive accordions<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> </span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span class="token punctuation">></span></span> </span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>I will be open when the page loads (because of the <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>open<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> attribute, but I’ll close when the next <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>details<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> element is clicked.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span> </span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> </span><span class="code-line"> </span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>exclusive<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Click me instead!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> </span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span class="token punctuation">></span></span> </span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>When we open this <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>details<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> element, the one above it will close.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span> </span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span></span></code></pre></div> <div style="margin: 1em 0"><p class="codepen" data-default-tab="result" data-height="650" data-slug-hash="bGzboxV" data-user="SitePoint" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/SitePoint/pen/bGzboxV">Styling the HTML details element: exclusive accordion</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p></div> <p>If older browser support is important, there are some nifty examples of doing it with JavaScript (such as <a href="https://codepen.io/web-dot-dev/pen/PodYGBz">here</a>, <a href="https://codepen.io/aardrian/pen/gOQJraZ">here</a>, <a href="https://codepen.io/aardrian/pen/qBLNYBe">here</a> and <a href="https://developer.chrome.com/docs/css-ui/exclusive-accordion">here</a>).</p> <p>We could also use CSS to style the currently open element differently from the others, using some of the techniques we’ve covered above. </p> <p>Here’s a simple example:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">details</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode color">#2196F3</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span><span class="code-line"> </span><span class="code-line"><span class="token selector">details<span class="token attribute"><span class="token punctuation">[</span><span class="token attr-name">open</span><span class="token punctuation">]</span></span></span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode color">#ce0e99</span><span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre>  <h3 id="stylingaheadinginsidethesummary">Styling a heading inside the summary</h3> <p>Some developers, concerned about the structure of their HTML, like to place a heading element inside the <code><summary></code> element. Whether that’s useful or not is <a href="https://css-tricks.com/two-issues-styling-the-details-element-and-how-to-solve-them/">up for debate</a>, but the default rendering is not nice, with the heading sitting on the line below the arrow. This can be fixed by setting the heading to <code>display: inline</code> or <code>display: inline-block</code>:</p> <pre class="language-css"><code class="css language-css code-highlight"><span class="code-line"><span class="token selector">summary h2</span> <span class="token punctuation">{</span> </span><span class="code-line"> <span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span> </span><span class="code-line"><span class="token punctuation">}</span> </span></code></pre> <p>You can see check out a demo of this on <a href="https://codepen.io/SitePoint/pen/MWLgEPm">CodePen</a>.</p> <h2 id="conclusion">Conclusion</h2> <p>As we’ve tried to show above, there are lots of simple ways to style the <code><details></code> element. Setting borders, padding and background colors is easy, and these in themselves improve the look greatly. Some of the methods for styling the default marker are very handy, but given that <a href="https://www.youtube.com/watch?v=SNa4EMUWnAc">Forrest’s fruit company</a> () has so many issues with styling the marker, it may be better to steer away from that option, in favor of creating a completely custom marker element. (That said, styling the marker doesn’t <em>break</em> the <code><details></code> element in Safari.)</p> <p>There have been attempts to animate the opening and closing of the <code><details></code> element just with CSS, but they are hacky at best, so it’s not worth trying to go down that rabbit hole. If you really want animated opening and closing, you’ll need JavaScript.</p> <p>To learn more about the <code><details></code> element, check out the following:</p> <ul> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details">MDN entry on the details element</a></li> <li>the <a href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element">whatwg.org specification for the details element</a></li> </ul> <p>If you come up with any other cool ways to style the <code><details></code> element, let me know on <a href="https://twitter.com/ralphmason">Twitter</a>, and we might feature them here.</p><script type="text/javascript">window.hcbVars = { showCopyBtn: true };</script><script type="text/javascript" src="/scripts/hcb/clipboard.js"></script><script type="text/javascript" src="/scripts/hcb/script.js"></script></div><div class="w-full py-8 space-y-12 border-t border-t-neutral-5"><address class="not-italic text-neutral-12"><div class="flex flex-wrap mb-6 space-x-3"><div class="flex items-center flex-grow space-x-3"><img src="https://uploads.sitepoint.com/wp-content/uploads/2015/05/1430879451rm-96x96.png" alt="Ralph Mason" class="size-6 rounded-full" loading="lazy"/><span class="font-semibold text-3">Ralph Mason</span></div><a class="px-3 py-1.5 rounded-md bg-neutral-alpha-3 text-neutral-12 hover:text-neutral-12 hover:bg-neutral-alpha-4 active:opacity-80" href="/author/rmason/">View Author</a></div><p class="mb-0 font-normal text-3 text-neutral-12 rich-text">Ralph is a freelance copyeditor, web designer and teacher at <a href="http://pageaffairs.com" rel="nofollow">Page Affairs</a>.</p></address></div><div class="flex flex-wrap"><span data-href="https://www.sitepoint.com/tag/details/" data-tag="details" tabindex="0" role="link" class="px-3 py-1.5 text-2 font-medium rounded-md bg-primary-alpha-3 text-primary-12 transition-colors cursor-pointer hover:text-primary-12 hover:bg-primary-alpha-4 active:opacity-80 mb-2 mr-2">details</span><span data-href="https://www.sitepoint.com/tag/html-elements/" data-tag="html elements" tabindex="0" role="link" class="px-3 py-1.5 text-2 font-medium rounded-md bg-primary-alpha-3 text-primary-12 transition-colors cursor-pointer hover:text-primary-12 hover:bg-primary-alpha-4 active:opacity-80 mb-2 mr-2">html elements</span></div><div class="pt-8 pb-12 rounded-2xl bg-neutral-alpha-2"><div class="mb-6 font-normal text-center text-2 text-neutral-11">Share this article</div><div class="flex space-x-3 items-center justify-evenly mx-auto max-w-screen-xs"><button aria-label="Share SitePoint on facebook" data-network="facebook" class="social-share-button cursor-pointer transform transition duration-200 hover:scale-125"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="w-6 h-6"><path fill="#1C2024" d="M18 9.95a8.084 8.084 0 0 0-1.309-4.313 8.014 8.014 0 0 0-3.409-2.928A7.956 7.956 0 0 0 4.767 3.96 8.055 8.055 0 0 0 2.334 7.75a8.097 8.097 0 0 0-.027 4.51 8.056 8.056 0 0 0 2.389 3.816A7.98 7.98 0 0 0 8.75 18v-5.705h-2V9.95h2V8.17a2.863 2.863 0 0 1 .766-2.286 2.829 2.829 0 0 1 2.234-.874c.6.008 1.198.062 1.79.161v2.013h-1a1.153 1.153 0 0 0-.953.32 1.167 1.167 0 0 0-.347.947v1.52h2.22l-.36 2.344h-1.85v5.635a7.988 7.988 0 0 0 4.848-2.741A8.08 8.08 0 0 0 18 9.95Z"></path></svg></button><button aria-label="Share SitePoint on reddit" data-network="reddit" class="social-share-button cursor-pointer transform transition duration-200 hover:scale-125"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="w-6 h-6"><path fill="#1C2024" d="M8.19 12.66a.218.218 0 0 0-.155.371 3.064 3.064 0 0 0 1.98.608h-.006a3.048 3.048 0 0 0 1.982-.614l-.008.005a.24.24 0 0 0 .02-.31v.001a.219.219 0 0 0-.31 0 2.625 2.625 0 0 1-1.681.487h.007a2.616 2.616 0 0 1-1.683-.492l.008.006a.217.217 0 0 0-.154-.064H8.19v.002ZM11.832 10a.833.833 0 1 0 .002 1.666.833.833 0 0 0-.002-1.666Zm-3.667 0a.833.833 0 1 1 0 1.665.833.833 0 0 1 0-1.665Zm5.174-4.837a.827.827 0 1 1-.832.872v-.002l-1.731-.365-.534 2.498A5.761 5.761 0 0 1 13.38 9.17l-.02-.013c.203-.202.483-.327.793-.327h.013A1.17 1.17 0 0 1 15.334 10a1.21 1.21 0 0 1-.667 1.073l-.007.003c.018.102.028.22.028.34v.007c0 1.796-2.086 3.246-4.669 3.246-2.582 0-4.669-1.45-4.669-3.246v-.003c0-.125.01-.247.03-.366l-.001.012a1.169 1.169 0 0 1 .476-2.236h.001c.313.003.595.127.805.327a5.629 5.629 0 0 1 3.16-.992h.002l.59-2.788a.229.229 0 0 1 .092-.13h.001a.232.232 0 0 1 .16-.029h-.001l1.937.412a.81.81 0 0 1 .733-.468h.006v.001ZM10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z"></path></svg></button><button aria-label="Share SitePoint on twitter" data-network="twitter" class="social-share-button cursor-pointer transform transition duration-200 hover:scale-125"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="w-6 h-6"><path fill="currentColor" fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.734 5.636H5.381l3.456 4.942-3.277 3.786h1.072l2.682-3.106 2.172 3.106h3.353l-3.673-5.25 3.003-3.478h-1.055l-2.422 2.799-1.958-2.799Zm4.482 7.863h-1.301L7.003 6.497h1.3l4.913 7.002Z" clip-rule="evenodd"></path></svg></button><button aria-label="Share SitePoint on linkedin" data-network="linkedin" class="social-share-button cursor-pointer transform transition duration-200 hover:scale-125"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="w-6 h-6"><path fill="#1C2024" d="M10 2a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8ZM7.763 13.347h-1.56v-4.99h1.56v4.99ZM6.94 7.73h-.013c-.566 0-.931-.381-.931-.865 0-.494.378-.866.953-.866s.928.372.94.866c.004.48-.362.865-.95.865ZM14 13.347h-1.769v-2.581c0-.675-.275-1.138-.884-1.138-.466 0-.725.313-.844.613-.044.106-.037.256-.037.409v2.697H8.713s.021-4.575 0-4.99h1.753v.784c.103-.344.662-.832 1.556-.832 1.11 0 1.978.72 1.978 2.263v2.775Z"></path></svg></button><button aria-label="Share SitePoint on email" data-network="email" class="social-share-button cursor-pointer transform transition duration-200 hover:scale-125"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" class="w-6 h-6"><path fill="#1C2024" d="M3.334 16.667c-.459 0-.851-.163-1.177-.49A1.605 1.605 0 0 1 1.667 15V5c0-.458.163-.85.49-1.177.326-.326.718-.49 1.177-.49h13.333c.458 0 .85.164 1.177.49.326.326.49.719.49 1.177v10c0 .459-.163.85-.49 1.177-.326.327-.719.49-1.177.49H3.334ZM10 10.687a.867.867 0 0 0 .438-.125l5.896-3.687a.69.69 0 0 0 .333-.604.68.68 0 0 0-.354-.625c-.236-.139-.48-.132-.73.02L10 9.167l-5.583-3.5c-.25-.152-.493-.155-.73-.01a.686.686 0 0 0-.353.615c0 .139.027.26.083.365a.557.557 0 0 0 .25.24l5.896 3.687a.868.868 0 0 0 .437.125Z"></path></svg></button></div></div></div></div><div class="order-1 lg:order-none lg:container-post-sidebar"><a href="https://www.sitepoint.com/premium/pricing/?ref_source=premium&ref_medium=sidebar" class="text-center min-h-[250px] !sticky mb-6 transition-[top] duration-500 ease-out mx-auto block !top-[calc(var(--navbar)_+_1.5rem)]" id="ad_sidebar-1" rel="" target="_blank" alt="SitePoint Premium"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:300px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg%20height='374'%20width='300'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"/></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#3e3955;position:absolute;top:0;left:0;bottom:0;right:0"></div><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 282px) 282px, 100vw" decoding="async" loading="lazy" data-src="https://cdn.sanity.io/images/708bnrs8/production/56eefa864f8139d1f9340235a77b6e7fdcf7ed52-282x352.png?w=282&h=352&auto=format" data-srcset="https://cdn.sanity.io/images/708bnrs8/production/56eefa864f8139d1f9340235a77b6e7fdcf7ed52-282x352.png?w=282&h=352&auto=format 282w" alt="SitePoint Premium"/><noscript><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 282px) 282px, 100vw" decoding="async" loading="lazy" src="https://cdn.sanity.io/images/708bnrs8/production/56eefa864f8139d1f9340235a77b6e7fdcf7ed52-282x352.png?w=282&h=352&auto=format" srcSet="https://cdn.sanity.io/images/708bnrs8/production/56eefa864f8139d1f9340235a77b6e7fdcf7ed52-282x352.png?w=282&h=352&auto=format 282w" alt="SitePoint Premium"/></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></a></div></div></article><div><div class="mb-10 font-bold text-left sm:text-center text-neutral-12 text-7">Read Next</div><div><div class="flex space-x-6 mb-8 overflow-x-auto scrollbar-none sm:mb-10 sm:grid sm:grid-cols-3 sm:gap-6 sm:space-x-0 lg:grid-cols-4"><a class="flex-auto flex-shrink-0 w-4/5 sm:w-full" href="/create-a-polyline-using-the-geolocation-and-the-google-maps-api/"><div class="flex flex-col transition-opacity cursor-pointer hover:opacity-80"><div class="relative mb-2 overflow-hidden rounded-lg aspect-w-16 aspect-h-9 bg-neutral-3"><img src="https://uploads.sitepoint.com/wp-content/uploads/2023/08/1692781397fallback.svg" alt="Creating a Polyline Using Geolocation and the Google Maps" loading="lazy" class="absolute object-cover w-full h-full rounded-lg"/></div><div class="flex space-between"><div class="flex flex-col space-y-1 basis-80%"><span class="text-3-medium text-neutral-12">Creating a Polyline Using Geolocation and the Google Maps</span><div><span class="block text-3-regular text-neutral-12">Aurelio De Rosa</span></div></div></div></div></a><a class="flex-auto flex-shrink-0 w-4/5 sm:w-full" href="/filtering-and-chaining-in-functional-javascript/"><div class="flex flex-col transition-opacity cursor-pointer hover:opacity-80"><div class="relative mb-2 overflow-hidden rounded-lg aspect-w-16 aspect-h-9 bg-neutral-3"><img src="https://uploads.sitepoint.com/wp-content/uploads/2017/01/1483373735filtering-and-chaining-in-functional-javascript-300x167.png" alt="Filtering and Chaining in Functional JavaScript" loading="lazy" class="absolute object-cover w-full h-full rounded-lg"/></div><div class="flex space-between"><div class="flex flex-col space-y-1 basis-80%"><span class="text-3-medium text-neutral-12">Filtering and Chaining in Functional JavaScript</span><div><span class="block text-3-regular text-neutral-12">M. David Green</span></div></div></div></div></a><a class="flex-auto flex-shrink-0 w-4/5 sm:w-full" href="/onmouseover-html-element/"><div class="flex flex-col transition-opacity cursor-pointer hover:opacity-80"><div class="relative mb-2 overflow-hidden rounded-lg aspect-w-16 aspect-h-9 bg-neutral-3"><img src="https://uploads.sitepoint.com/wp-content/uploads/2023/08/1692781397fallback.svg" alt="onmouseover (HTML element)" loading="lazy" class="absolute object-cover w-full h-full rounded-lg"/></div><div class="flex space-between"><div class="flex flex-col space-y-1 basis-80%"><span class="text-3-medium text-neutral-12">onmouseover (HTML element)</span><div><span class="block text-3-regular text-neutral-12">Adam Roberts</span></div></div></div></div></a><a class="flex-auto flex-shrink-0 w-4/5 sm:w-full" href="/child-selector-css-selector/"><div class="flex flex-col transition-opacity cursor-pointer hover:opacity-80"><div class="relative mb-2 overflow-hidden rounded-lg aspect-w-16 aspect-h-9 bg-neutral-3"><img src="https://uploads.sitepoint.com/wp-content/uploads/2023/08/1692781397fallback.svg" alt="Child Selector (CSS selector)" loading="lazy" class="absolute object-cover w-full h-full rounded-lg"/></div><div class="flex space-between"><div class="flex flex-col space-y-1 basis-80%"><span class="text-3-medium text-neutral-12">Child Selector (CSS selector)</span><div><span class="block text-3-regular text-neutral-12">Adam Roberts</span></div></div></div></div></a><a class="flex-auto flex-shrink-0 w-4/5 sm:w-full" href="/background-image-css-property/"><div class="flex flex-col transition-opacity cursor-pointer hover:opacity-80"><div class="relative mb-2 overflow-hidden rounded-lg aspect-w-16 aspect-h-9 bg-neutral-3"><img src="https://uploads.sitepoint.com/wp-content/uploads/2023/08/1692781397fallback.svg" alt="background-image (CSS property)" loading="lazy" class="absolute object-cover w-full h-full rounded-lg"/></div><div class="flex space-between"><div class="flex flex-col space-y-1 basis-80%"><span class="text-3-medium text-neutral-12">background-image (CSS property)</span><div><span class="block text-3-regular text-neutral-12">Adam Roberts</span></div></div></div></div></a><a class="flex-auto flex-shrink-0 w-4/5 sm:w-full" href="/relative-positioning/"><div class="flex flex-col transition-opacity cursor-pointer hover:opacity-80"><div class="relative mb-2 overflow-hidden rounded-lg aspect-w-16 aspect-h-9 bg-neutral-3"><img src="https://uploads.sitepoint.com/wp-content/uploads/2023/08/1692781397fallback.svg" alt="Relative Positioning" loading="lazy" class="absolute object-cover w-full h-full rounded-lg"/></div><div class="flex space-between"><div class="flex flex-col space-y-1 basis-80%"><span class="text-3-medium text-neutral-12">Relative Positioning</span><div><span class="block text-3-regular text-neutral-12">Adam Roberts</span></div></div></div></div></a><a class="flex-auto flex-shrink-0 w-4/5 sm:w-full" href="/getelementsbytagname-w3c-dom-core-method/"><div class="flex flex-col transition-opacity cursor-pointer hover:opacity-80"><div class="relative mb-2 overflow-hidden rounded-lg aspect-w-16 aspect-h-9 bg-neutral-3"><img src="https://uploads.sitepoint.com/wp-content/uploads/2023/08/1692781397fallback.svg" alt="getElementsByTagName (W3C DOM Core method)" loading="lazy" class="absolute object-cover w-full h-full rounded-lg"/></div><div class="flex space-between"><div class="flex flex-col space-y-1 basis-80%"><span class="text-3-medium text-neutral-12">getElementsByTagName (W3C DOM Core method)</span><div><span class="block text-3-regular text-neutral-12">Adam Roberts</span></div></div></div></div></a><a class="flex-auto flex-shrink-0 w-4/5 sm:w-full" href="/useful-creative-commons-resources/"><div class="flex flex-col transition-opacity cursor-pointer hover:opacity-80"><div class="relative mb-2 overflow-hidden rounded-lg aspect-w-16 aspect-h-9 bg-neutral-3"><img src="https://uploads.sitepoint.com/wp-content/uploads/2014/09/1411970195treasure.jpg" alt="Treasure! More Awesome Creative Commons Resources" loading="lazy" class="absolute object-cover w-full h-full rounded-lg"/></div><div class="flex space-between"><div class="flex flex-col space-y-1 basis-80%"><span class="text-3-medium text-neutral-12">Treasure! More Awesome Creative Commons Resources</span><div><span class="block text-3-regular text-neutral-12">Elio Qoshi</span></div></div></div></div></a></div></div></div></div></main><div class="relative overflow-hidden isolate bg-neutral-inverse-1"><svg xmlns="http://www.w3.org/2000/svg" width="17.12500rem" height="25.12500rem" fill="none" class="absolute bottom-0 hidden lg:block -z-10" viewBox="0 0 274 402"><path fill="url(#paint0_linear_1288_14088)" fill-opacity="0.15" d="M51.397 4.16a40.97 40.97 0 00-34.794 0L-142.71 78.877a40.972 40.972 0 00-22.493 27.745l-38.943 166.166a40.971 40.971 0 008.191 35.305l109.625 133.877a40.97 40.97 0 0031.699 15.014h177.264a40.971 40.971 0 0031.699-15.014l109.625-133.877a40.971 40.971 0 008.191-35.305l-38.943-166.166a40.97 40.97 0 00-22.493-27.745L51.397 4.16z"></path><defs><linearGradient id="paint0_linear_1288_14088" x1="34" x2="34" y1="-4" y2="481" gradientUnits="userSpaceOnUse"><stop stop-color="#FBFBFB"></stop><stop offset="1" stop-color="#FBFBFB" stop-opacity="0"></stop></linearGradient></defs></svg><svg xmlns="http://www.w3.org/2000/svg" width="9.87500rem" height="16.0625rem" fill="none" class="absolute bottom-0 hidden lg:block -z-10" viewBox="0 0 158 257"><path fill="url(#paint0_linear_1288_14089)" fill-opacity="0.17" d="M-65.132 4.13a40.97 40.97 0 00-34.736 0l-159.72 74.759a40.968 40.968 0 00-22.517 27.74l-39.012 166.127a40.97 40.97 0 008.212 35.354l109.858 133.893a40.972 40.972 0 0031.673 14.982H6.374a40.97 40.97 0 0031.673-14.982L147.905 308.11a40.97 40.97 0 008.212-35.354l-39.012-166.127a40.969 40.969 0 00-22.517-27.74l-159.72-74.76z"></path><defs><linearGradient id="paint0_linear_1288_14089" x1="-82.5" x2="-82.5" y1="-4" y2="481" gradientUnits="userSpaceOnUse"><stop stop-color="#FBFBFB"></stop><stop offset="1" stop-color="#FBFBFB" stop-opacity="0"></stop></linearGradient></defs></svg><svg xmlns="http://www.w3.org/2000/svg" width="18.12500rem" height="23.75rem" fill="none" class="absolute top-0 right-0 hidden lg:block -z-10" viewBox="0 0 290 380"><path fill="url(#paint0_linear_1288_14092)" fill-opacity="0.17" d="M307.365-168.873a40.966 40.966 0 00-34.73 0L72.649-75.285a40.97 40.97 0 00-22.52 27.74L1.177 160.879a40.97 40.97 0 008.214 35.358l137.718 167.817a40.97 40.97 0 0031.671 14.979h222.442a40.97 40.97 0 0031.671-14.979L570.61 196.237a40.968 40.968 0 008.214-35.358L529.87-47.545a40.966 40.966 0 00-22.519-27.74l-199.986-93.588z"></path><defs><linearGradient id="paint0_linear_1288_14092" x1="290" x2="290" y1="-177" y2="408" gradientUnits="userSpaceOnUse"><stop stop-color="#FBFBFB"></stop><stop offset="1" stop-color="#FBFBFB" stop-opacity="0"></stop></linearGradient></defs></svg><svg xmlns="http://www.w3.org/2000/svg" width="15.87500rem" height="15.1875rem" fill="none" class="lg:hidden absolute -top-[4.601875rem] -right-[8.28125rem] -z-10" viewBox="0 0 254 243"><path fill="url(#paint0_linear_1789_43772)" fill-opacity="0.17" d="M144.439 4.495a40.97 40.97 0 00-34.731 0L41.012 36.643a40.97 40.97 0 00-22.519 27.74L1.965 134.75a40.97 40.97 0 008.214 35.358l46.863 57.105a40.969 40.969 0 0031.67 14.98h76.723a40.97 40.97 0 0031.67-14.98l46.863-57.105a40.97 40.97 0 008.214-35.358l-16.528-70.369a40.971 40.971 0 00-22.519-27.739L144.439 4.495z"></path><defs><linearGradient id="paint0_linear_1789_43772" x1="127.074" x2="127.074" y1="-3.632" y2="255" gradientUnits="userSpaceOnUse"><stop stop-color="#FBFBFB"></stop><stop offset="1" stop-color="#FBFBFB" stop-opacity="0"></stop></linearGradient></defs></svg><svg xmlns="http://www.w3.org/2000/svg" width="15.8125rem" height="15.125rem" fill="none" class="lg:hidden absolute -top-[9.4375rem] -right-[12.370625rem] -z-10" viewBox="0 0 253 242"><path fill="url(#paint0_linear_1789_43771)" fill-opacity="0.15" d="M143.869 4.127a40.97 40.97 0 00-34.731 0L40.442 36.275a40.97 40.97 0 00-22.519 27.74L1.395 134.382a40.97 40.97 0 008.214 35.358l46.863 57.105a40.968 40.968 0 0031.67 14.979h76.722a40.97 40.97 0 0031.671-14.979l46.863-57.105a40.974 40.974 0 008.214-35.358l-16.528-70.369a40.971 40.971 0 00-22.519-27.74L143.869 4.128z"></path><defs><linearGradient id="paint0_linear_1789_43771" x1="126.503" x2="126.503" y1="-4" y2="254.632" gradientUnits="userSpaceOnUse"><stop stop-color="#FBFBFB"></stop><stop offset="1" stop-color="#FBFBFB" stop-opacity="0"></stop></linearGradient></defs></svg><div class="container py-16 lg:py-32"><div class="w-full max-w-screen-md mb-8 text-neutral-inverse-12 text-5 font-bold sm:text-7 sm:mx-auto sm:text-center sm:mb-10">Get the freshest news and resources for developers, designers and digital creators in your inbox each week</div><div data-mooform-id="5a715e72-99bb-4d4c-a372-1594e87b401d" class="flex justify-center align-center min-h-32 text-neutral-inverse-12 sm:min-h-16"><div class="text-center hidden only:block"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="spinner" class="svg-inline--fa fa-spinner animate-spin" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z"></path></svg> Loading form</div></div></div></div><div class="py-16 px-5 container-12 lg:py-20"><div class="flex flex-col gap-8 mb-8 lg:flex-row lg:justify-between lg:mb-10 lg:items-center"><a class="" href="/"><svg viewBox="0 0 123 27" class="fill-current text-black w-[115.5px] h-[24px] mx-auto lg:mx-0"><title>SitePoint</title><g fill-rule="evenodd"><path d="M31.36,16.75 C31.56,17.07 31.82,17.31 32.14,17.50 C32.46,17.68 32.82,17.82 33.23,17.89 C33.63,17.97 34.05,18.01 34.48,18.01 C34.81,18.01 35.16,17.99 35.52,17.94 C35.89,17.89 36.22,17.81 36.53,17.68 C36.83,17.55 37.08,17.36 37.28,17.11 C37.48,16.87 37.58,16.55 37.58,16.17 C37.58,15.64 37.37,15.24 36.96,14.97 C36.55,14.69 36.03,14.47 35.41,14.31 C34.79,14.14 34.12,13.99 33.39,13.85 C32.66,13.71 31.99,13.52 31.37,13.27 C30.75,13.03 30.23,12.68 29.82,12.23 C29.41,11.78 29.20,11.16 29.20,10.36 C29.20,9.73 29.34,9.20 29.63,8.75 C29.92,8.30 30.30,7.94 30.75,7.66 C31.20,7.38 31.72,7.17 32.29,7.03 C32.86,6.90 33.42,6.83 33.99,6.83 C34.71,6.83 35.38,6.89 35.99,7.01 C36.61,7.13 37.15,7.34 37.62,7.63 C38.09,7.93 38.46,8.33 38.75,8.83 C39.03,9.34 39.19,9.96 39.24,10.72 L37.13,10.72 C37.10,10.32 36.99,9.98 36.81,9.72 C36.63,9.46 36.40,9.25 36.12,9.08 C35.84,8.92 35.53,8.81 35.19,8.74 C34.85,8.66 34.51,8.63 34.16,8.63 C33.84,8.63 33.53,8.65 33.20,8.70 C32.88,8.75 32.59,8.83 32.32,8.95 C32.06,9.07 31.84,9.23 31.68,9.43 C31.51,9.63 31.43,9.89 31.43,10.21 C31.43,10.56 31.56,10.86 31.82,11.09 C32.07,11.32 32.40,11.51 32.80,11.66 C33.19,11.82 33.64,11.95 34.13,12.05 C34.63,12.15 35.13,12.26 35.62,12.37 C36.15,12.49 36.67,12.62 37.17,12.78 C37.67,12.94 38.12,13.15 38.51,13.42 C38.90,13.68 39.21,14.01 39.45,14.41 C39.69,14.81 39.81,15.31 39.81,15.90 C39.81,16.66 39.65,17.28 39.33,17.77 C39.01,18.27 38.58,18.67 38.06,18.98 C37.54,19.28 36.96,19.49 36.30,19.61 C35.65,19.73 35.00,19.79 34.36,19.79 C33.65,19.79 32.97,19.72 32.32,19.58 C31.68,19.43 31.11,19.20 30.61,18.87 C30.12,18.54 29.72,18.11 29.42,17.57 C29.13,17.03 28.96,16.38 28.93,15.61 L31.03,15.61 C31.05,16.06 31.16,16.44 31.36,16.75" id="Fill-1"></path><path d="M42.27,7.12 L44.37,7.12 L44.37,19.53 L42.27,19.53 L42.27,7.12 Z" id="Fill-2"></path><path d="M53.13,7.12 L53.13,8.92 L50.57,8.92 L50.57,16.62 C50.57,16.86 50.59,17.05 50.63,17.20 C50.67,17.34 50.75,17.46 50.87,17.54 C50.99,17.62 51.15,17.67 51.35,17.69 C51.56,17.71 51.83,17.73 52.16,17.73 L53.13,17.73 L53.13,19.53 L51.51,19.53 C50.97,19.53 50.50,19.49 50.11,19.42 C49.72,19.35 49.41,19.22 49.17,19.02 C48.93,18.83 48.75,18.56 48.64,18.21 C48.52,17.86 48.46,17.39 48.46,16.81 L48.46,8.92 L46.28,8.92 L46.28,7.12 L48.46,7.12 L48.46,3.39 L50.57,3.39 L50.57,7.12 L53.13,7.12" id="Fill-3"></path><path d="M64.53,18.73 C63.57,19.44 62.36,19.79 60.91,19.79 C59.89,19.79 59.00,19.63 58.25,19.31 C57.49,18.99 56.86,18.54 56.35,17.97 C55.84,17.39 55.45,16.70 55.20,15.90 C54.94,15.10 54.80,14.23 54.76,13.29 C54.76,12.34 54.91,11.48 55.21,10.69 C55.51,9.91 55.92,9.23 56.46,8.65 C57.00,8.08 57.63,7.63 58.37,7.31 C59.11,6.99 59.91,6.83 60.79,6.83 C61.93,6.83 62.87,7.05 63.63,7.51 C64.38,7.97 64.98,8.55 65.44,9.25 C65.89,9.96 66.20,10.73 66.38,11.56 C66.55,12.39 66.62,13.18 66.59,13.93 L56.99,13.93 C56.98,14.48 57.04,14.99 57.19,15.48 C57.34,15.97 57.58,16.40 57.91,16.78 C58.24,17.16 58.66,17.46 59.18,17.68 C59.69,17.90 60.29,18.01 60.98,18.01 C61.88,18.01 62.61,17.82 63.18,17.41 C63.75,17.02 64.13,16.41 64.31,15.59 L66.39,15.59 C66.11,16.98 65.49,18.03 64.53,18.73 L64.53,18.73 Z M64.02,10.76 C63.83,10.33 63.58,9.96 63.25,9.65 C62.93,9.34 62.55,9.09 62.11,8.90 C61.68,8.72 61.19,8.63 60.66,8.63 C60.12,8.63 59.62,8.72 59.19,8.90 C58.75,9.09 58.37,9.34 58.06,9.66 C57.75,9.98 57.50,10.35 57.32,10.78 C57.13,11.20 57.03,11.65 56.99,12.13 L64.36,12.13 C64.32,11.65 64.21,11.20 64.02,10.76 L64.02,10.76 Z" id="Fill-4"></path><path d="M70.95,7.12 L70.95,8.80 L71.00,8.80 C71.35,8.11 71.89,7.61 72.64,7.30 C73.38,6.98 74.20,6.83 75.09,6.83 C76.09,6.83 76.95,7.00 77.68,7.36 C78.42,7.71 79.03,8.18 79.52,8.78 C80.01,9.38 80.37,10.08 80.62,10.86 C80.87,11.65 80.99,12.48 80.99,13.36 C80.99,14.24 80.87,15.07 80.63,15.85 C80.39,16.64 80.03,17.32 79.54,17.91 C79.06,18.49 78.44,18.95 77.71,19.29 C76.97,19.62 76.12,19.79 75.14,19.79 C74.83,19.79 74.48,19.76 74.09,19.70 C73.70,19.63 73.32,19.53 72.94,19.38 C72.56,19.24 72.20,19.04 71.86,18.79 C71.52,18.55 71.23,18.24 71.00,17.87 L70.95,17.87 L70.95,24.26 L68.84,24.26 L68.84,7.12 L70.95,7.12 L70.95,7.12 Z M78.53,11.52 C78.37,10.97 78.13,10.48 77.81,10.04 C77.49,9.61 77.07,9.27 76.57,9.01 C76.06,8.76 75.47,8.63 74.79,8.63 C74.08,8.63 73.48,8.76 72.98,9.04 C72.49,9.31 72.08,9.67 71.77,10.10 C71.46,10.55 71.23,11.05 71.09,11.60 C70.95,12.17 70.88,12.73 70.88,13.31 C70.88,13.92 70.95,14.51 71.10,15.07 C71.25,15.64 71.48,16.14 71.81,16.57 C72.13,17.01 72.55,17.35 73.06,17.62 C73.57,17.88 74.19,18.01 74.92,18.01 C75.65,18.01 76.25,17.88 76.74,17.61 C77.23,17.34 77.62,16.98 77.92,16.53 C78.22,16.08 78.43,15.57 78.56,14.99 C78.70,14.41 78.76,13.82 78.76,13.21 C78.76,12.64 78.68,12.07 78.53,11.52 L78.53,11.52 Z" id="Fill-5"></path><path d="M83.17,10.78 C83.44,9.98 83.84,9.30 84.36,8.71 C84.89,8.13 85.55,7.67 86.33,7.33 C87.10,7.00 87.99,6.83 89.00,6.83 C90.03,6.83 90.92,7.00 91.69,7.33 C92.46,7.67 93.11,8.13 93.64,8.71 C94.17,9.30 94.56,9.98 94.83,10.78 C95.09,11.57 95.23,12.42 95.23,13.33 C95.23,14.25 95.09,15.09 94.83,15.88 C94.56,16.66 94.17,17.35 93.64,17.93 C93.11,18.52 92.46,18.97 91.69,19.30 C90.92,19.63 90.03,19.79 89.00,19.79 C87.99,19.79 87.10,19.63 86.33,19.30 C85.55,18.97 84.89,18.52 84.36,17.93 C83.84,17.35 83.44,16.66 83.17,15.88 C82.91,15.09 82.78,14.25 82.78,13.33 C82.78,12.42 82.91,11.57 83.17,10.78 L83.17,10.78 Z M85.32,15.34 C85.53,15.92 85.81,16.41 86.18,16.80 C86.54,17.19 86.96,17.49 87.45,17.70 C87.94,17.91 88.46,18.01 89.00,18.01 C89.55,18.01 90.06,17.91 90.55,17.70 C91.04,17.49 91.46,17.19 91.83,16.80 C92.19,16.41 92.48,15.92 92.68,15.34 C92.89,14.75 92.99,14.09 92.99,13.33 C92.99,12.58 92.89,11.91 92.68,11.33 C92.48,10.75 92.19,10.25 91.83,9.85 C91.46,9.45 91.04,9.15 90.55,8.94 C90.06,8.73 89.55,8.63 89.00,8.63 C88.46,8.63 87.94,8.73 87.45,8.94 C86.96,9.15 86.54,9.45 86.18,9.85 C85.81,10.25 85.53,10.75 85.32,11.33 C85.11,11.91 85.01,12.58 85.01,13.33 C85.01,14.09 85.11,14.75 85.32,15.34 L85.32,15.34 Z" id="Fill-6"></path><path d="M97.83,7.12 L99.94,7.12 L99.94,19.53 L97.83,19.53 L97.83,7.12 Z" id="Fill-7"></path><path d="M105.19,7.12 L105.19,9.08 L105.24,9.08 C106.12,7.58 107.51,6.83 109.41,6.83 C110.25,6.83 110.95,6.94 111.51,7.16 C112.08,7.39 112.53,7.70 112.88,8.10 C113.23,8.50 113.47,8.98 113.61,9.53 C113.75,10.08 113.82,10.69 113.82,11.36 L113.82,19.53 L111.71,19.53 L111.71,11.12 C111.71,10.36 111.48,9.75 111.02,9.30 C110.56,8.85 109.92,8.63 109.11,8.63 C108.46,8.63 107.91,8.72 107.43,8.92 C106.96,9.11 106.57,9.38 106.26,9.73 C105.94,10.08 105.71,10.50 105.55,10.97 C105.39,11.44 105.32,11.96 105.32,12.52 L105.32,19.53 L103.21,19.53 L103.21,7.12 L105.19,7.12" id="Fill-8"></path><path d="M122.47,7.12 L122.47,8.92 L119.92,8.92 L119.92,16.62 C119.92,16.86 119.94,17.05 119.98,17.20 C120.02,17.34 120.10,17.46 120.22,17.54 C120.33,17.62 120.49,17.67 120.70,17.69 C120.91,17.71 121.18,17.73 121.50,17.73 L122.47,17.73 L122.47,19.53 L120.86,19.53 C120.32,19.53 119.85,19.49 119.46,19.42 C119.07,19.35 118.76,19.22 118.52,19.02 C118.28,18.83 118.10,18.56 117.99,18.21 C117.87,17.86 117.81,17.39 117.81,16.81 L117.81,8.92 L115.63,8.92 L115.63,7.12 L117.81,7.12 L117.81,3.39 L119.92,3.39 L119.92,7.12 L122.47,7.12" id="Fill-9"></path><path d="M0.67,11.87 L2.62,13.76 L8.76,19.50 L11.41,16.94 C11.65,16.61 11.64,16.16 11.36,15.84 L8.94,13.72 L8.95,13.72 L6.34,11.19 C6.04,10.84 6.04,10.32 6.37,9.99 L13.38,3.21 L10.20,0.12 L0.68,9.31 C-0.05,10.02 -0.05,11.17 0.67,11.87" id="Fill-10"></path><path d="M21.60,15.15 L19.66,13.27 L13.51,7.53 L10.86,10.08 C10.62,10.42 10.64,10.87 10.91,11.19 L13.33,13.31 L13.33,13.31 L15.93,15.84 C16.24,16.19 16.23,16.70 15.91,17.04 L8.89,23.82 L12.08,26.91 L19.65,19.60 L21.60,17.71 C22.33,17.01 22.33,15.86 21.60,15.15" id="Fill-11"></path><path d="M44.55,4.58 C44.55,5.24 44.00,5.77 43.32,5.77 C42.64,5.77 42.09,5.24 42.09,4.58 C42.09,3.93 42.64,3.39 43.32,3.39 C44.00,3.39 44.55,3.93 44.55,4.58" id="Fill-12"></path><path d="M100.11,4.58 C100.11,5.24 99.56,5.77 98.88,5.77 C98.20,5.77 97.65,5.24 97.65,4.58 C97.65,3.93 98.20,3.39 98.88,3.39 C99.56,3.39 100.11,3.93 100.11,4.58" id="Fill-13"></path></g></svg></a><a id="footer-cta" href="/premium/pricing/?ref_source=sitepoint&unlock=true&ref_medium=hp-footer" class="inline-flex items-center justify-center border whitespace-nowrap font-medium focus-visible:opacity-80 disabled:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 border-transparent px-4 py-2.5 rounded-md text-2 bg-primary-9 text-white hover:bg-primary-10 focus-visible:bg-primary-10 w-full lg:w-fit">Start Free Trial</a></div><div class="grid grid-cols-2 gap-y-8 mb-8 lg:mb-10 lg:grid-cols-4"><div class="flex flex-col gap-4"><div class="text-2 font-semibold text-neutral-11">Stuff we do</div><a href="/premium/library/" class="text-neutral-12 hover:text-neutral-alpha-11 focus-visible:text-neutral-alpha-11 font-medium inline-flex items-center space-x-1">Premium</a><a class="text-neutral-12 hover:text-neutral-alpha-11 focus-visible:text-neutral-alpha-11 font-medium inline-flex items-center space-x-1" href="/newsletters/">Newsletters</a><a href="/premium/library/paths/" class="text-neutral-12 hover:text-neutral-alpha-11 focus-visible:text-neutral-alpha-11 font-medium inline-flex items-center space-x-1">Learning paths</a><a href="/premium/library/" class="text-neutral-12 hover:text-neutral-alpha-11 focus-visible:text-neutral-alpha-11 font-medium inline-flex items-center space-x-1">Library</a><a href="/community/" class="text-neutral-12 hover:text-neutral-alpha-11 focus-visible:text-neutral-alpha-11 font-medium inline-flex items-center space-x-1">Forums</a></div><div class="flex flex-col gap-4"><div class="text-2 font-semibold text-neutral-11">Contact</div><a class="text-neutral-12 hover:text-neutral-alpha-11 focus-visible:text-neutral-alpha-11 font-medium inline-flex items-center space-x-1" href="/contact-us/">Contact us</a><a href="https://sitepointhq.notion.site/Sitepoint-FAQs-619b2b88af4f4a5db27beade7ca2cce6" class="text-neutral-12 hover:text-neutral-alpha-11 focus-visible:text-neutral-alpha-11 font-medium inline-flex items-center space-x-1">FAQ</a><a href="https://sitepoint.typeform.com/to/HtAXVN" class="text-neutral-12 hover:text-neutral-alpha-11 focus-visible:text-neutral-alpha-11 font-medium inline-flex items-center space-x-1">Publish your book with us</a><a class="text-neutral-12 hover:text-neutral-alpha-11 focus-visible:text-neutral-alpha-11 font-medium inline-flex items-center space-x-1" href="/write-for-us/">Write an article with us</a><a class="text-neutral-12 hover:text-neutral-alpha-11 focus-visible:text-neutral-alpha-11 font-medium inline-flex items-center space-x-1" href="/partnerships/">Advertise</a></div><div class="flex flex-col gap-4"><div class="text-2 font-semibold text-neutral-11">About</div><a class="text-neutral-12 hover:text-neutral-alpha-11 focus-visible:text-neutral-alpha-11 font-medium inline-flex items-center space-x-1" href="/about-us/">Our story</a><a class="text-neutral-12 hover:text-neutral-alpha-11 focus-visible:text-neutral-alpha-11 font-medium inline-flex items-center space-x-1" href="/premium-for-teams/">Corporate memberships</a><a class="text-neutral-12 hover:text-neutral-alpha-11 focus-visible:text-neutral-alpha-11 font-medium inline-flex items-center space-x-1" href="/legals/">Terms of use</a><a class="text-neutral-12 hover:text-neutral-alpha-11 focus-visible:text-neutral-alpha-11 font-medium inline-flex items-center space-x-1" href="/privacy-policy/">Privacy policy</a></div><div class="flex flex-col gap-4"><div class="text-2 font-semibold text-neutral-11">Connect</div><a href="/sitepoint.rss" class="text-neutral-12 hover:text-neutral-alpha-11 focus-visible:text-neutral-alpha-11 font-medium inline-flex items-center space-x-1" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path d="M4.167 17.5c-.459 0-.851-.163-1.177-.49a1.605 1.605 0 01-.49-1.177c0-.458.163-.85.49-1.177.326-.326.718-.49 1.177-.49.458 0 .85.164 1.177.49.326.327.49.719.49 1.177 0 .459-.164.851-.49 1.177-.327.327-.719.49-1.177.49zm11.25 0c-.361 0-.663-.132-.907-.396a1.625 1.625 0 01-.427-.937 11.43 11.43 0 00-1.093-3.782 11.69 11.69 0 00-2.24-3.135 11.69 11.69 0 00-3.135-2.24 11.43 11.43 0 00-3.782-1.093 1.624 1.624 0 01-.937-.427 1.182 1.182 0 01-.396-.907c0-.36.125-.656.375-.885.25-.23.549-.33.896-.302 1.708.153 3.309.587 4.802 1.302a14.229 14.229 0 013.948 2.781 14.23 14.23 0 012.781 3.948 13.882 13.882 0 011.302 4.802c.028.347-.073.646-.302.896-.23.25-.524.375-.885.375zm-5 0a1.24 1.24 0 01-.896-.365 1.66 1.66 0 01-.48-.885 6.326 6.326 0 00-.656-1.885 6.795 6.795 0 00-1.177-1.573 6.797 6.797 0 00-1.573-1.177 6.325 6.325 0 00-1.885-.657 1.66 1.66 0 01-.885-.479 1.24 1.24 0 01-.365-.896c0-.36.125-.66.375-.895.25-.237.549-.327.896-.271a8.821 8.821 0 012.844.885 9.34 9.34 0 014.083 4.083c.451.882.746 1.83.885 2.844.056.347-.034.646-.27.896a1.18 1.18 0 01-.896.375z"></path></svg><span>RSS</span></a><a href="https://www.facebook.com/sitepoint" class="text-neutral-12 hover:text-neutral-alpha-11 focus-visible:text-neutral-alpha-11 font-medium inline-flex items-center space-x-1" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path d="M18 9.95a8.084 8.084 0 00-1.309-4.313 8.014 8.014 0 00-3.409-2.928A7.956 7.956 0 004.767 3.96 8.055 8.055 0 002.334 7.75a8.097 8.097 0 00-.027 4.51 8.056 8.056 0 002.389 3.816A7.98 7.98 0 008.75 18v-5.705h-2V9.95h2V8.17a2.863 2.863 0 01.766-2.286 2.829 2.829 0 012.234-.874c.6.008 1.198.062 1.79.161v2.013h-1a1.153 1.153 0 00-.953.32 1.167 1.167 0 00-.347.947v1.52h2.22l-.36 2.344h-1.85v5.635a7.988 7.988 0 004.848-2.741A8.08 8.08 0 0018 9.95z"></path></svg><span>Facebook</span></a><a href="https://www.instagram.com/sitepointdotcom/?hl=en" class="text-neutral-12 hover:text-neutral-alpha-11 focus-visible:text-neutral-alpha-11 font-medium inline-flex items-center space-x-1" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path d="M13.248 7.543a1.38 1.38 0 00-.791-.791 2.305 2.305 0 00-.774-.144c-.439-.02-.57-.025-1.683-.025s-1.244.005-1.683.025a2.305 2.305 0 00-.774.144 1.38 1.38 0 00-.791.791c-.092.248-.14.51-.144.774-.02.439-.025.57-.025 1.683s.005 1.244.025 1.683c.003.265.052.527.144.774a1.381 1.381 0 00.791.791c.248.092.51.14.774.144.439.02.57.024 1.683.024s1.244-.004 1.683-.025c.265-.003.527-.051.774-.143a1.38 1.38 0 00.791-.791c.092-.248.14-.51.144-.774.02-.439.024-.57.024-1.683s-.004-1.244-.025-1.683a2.302 2.302 0 00-.143-.774zM10 12.14a2.14 2.14 0 110-4.28 2.14 2.14 0 010 4.28zm2.224-3.864a.5.5 0 110-1 .5.5 0 010 1zM11.39 10a1.39 1.39 0 11-2.78 0 1.39 1.39 0 012.78 0zM10 2a8 8 0 100 16 8 8 0 000-16zm4.142 9.717a3.059 3.059 0 01-.194 1.012 2.13 2.13 0 01-1.219 1.219 3.06 3.06 0 01-1.01.194c-.446.02-.587.025-1.719.025-1.132 0-1.273-.005-1.718-.025a3.059 3.059 0 01-1.011-.194 2.13 2.13 0 01-1.218-1.219 3.06 3.06 0 01-.195-1.01c-.02-.446-.025-.587-.025-1.719 0-1.132.005-1.273.025-1.718.007-.346.073-.688.194-1.011A2.13 2.13 0 017.27 6.05a3.058 3.058 0 011.01-.193c.446-.02.587-.025 1.719-.025 1.132 0 1.273.005 1.718.025.346.007.688.073 1.011.194a2.13 2.13 0 011.219 1.219c.12.323.186.665.194 1.01.02.446.025.587.025 1.719 0 1.132-.005 1.273-.025 1.717z"></path></svg><span>Instagram</span></a><a href="https://twitter.com/sitepointdotcom" class="text-neutral-12 hover:text-neutral-alpha-11 focus-visible:text-neutral-alpha-11 font-medium inline-flex items-center space-x-1" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.734 5.636H5.381l3.456 4.942-3.277 3.786h1.072l2.682-3.106 2.172 3.106h3.353l-3.673-5.25 3.003-3.478h-1.055l-2.422 2.799-1.958-2.799zm4.482 7.863h-1.301L7.003 6.497h1.3l4.913 7.002z" clip-rule="evenodd"></path></svg><span>Twitter (X)</span></a><div class="text-1-regular text-neutral-10">This site is protected by reCAPTCHA and the Google<a href="https://policies.google.com/privacy" class="text-current" rel="noopener noreferrer" target="_blank"> Privacy Policy </a>and<a href="https://policies.google.com/terms" class="text-current" rel="noopener noreferrer" target="_blank"> Terms of Service </a>apply.</div></div></div><div class="text-1-medium text-neutral-10 text-center mb-8">© 2000 – 2024 SitePoint Pty. Ltd.</div><div class="mx-auto w-fit lg:mx-0 lg:float-right"><button class="inline-flex items-center justify-center border whitespace-nowrap font-medium focus-visible:opacity-80 disabled:bg-neutral-alpha-3 disabled:text-neutral-alpha-8 border-transparent bg-transparent text-neutral-12 px-3 py-1.5 rounded-md text-2 hover:bg-neutral-alpha-3 focus-visible:bg-neutral-alpha-3">Back to top<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-up" class="svg-inline--fa fa-chevron-up fa-xs ml-2" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"></path></svg></button></div></div><noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=721455246308784&ev=PageView&noscript=1" /></noscript></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/style-html-details-element/";/*]]>*/</script> <script id="gatsby-chunk-mapping" > window.___chunkMapping="{\"app\":[\"/app-48386ace099fa9c70532.js\"],\"gatsby-plugin-image\":[\"/gatsby-plugin-image-efa17f1fd767100af6e9.js\"],\"component---src-pages-404-js\":[\"/component---src-pages-404-js-13133228f30e0afaf2a6.js\"],\"component---src-pages-about-us-tsx\":[\"/component---src-pages-about-us-tsx-fbabcd61683a1f57eb73.js\"],\"component---src-pages-contact-us-js\":[\"/component---src-pages-contact-us-js-59e5417356065cf23085.js\"],\"component---src-pages-legals-js\":[\"/component---src-pages-legals-js-0eb5faa65d1c2c8bde92.js\"],\"component---src-pages-newsletters-tsx\":[\"/component---src-pages-newsletters-tsx-03f6e1137da0d9d45c26.js\"],\"component---src-pages-partnerships-js\":[\"/component---src-pages-partnerships-js-ac307a41d9323fada183.js\"],\"component---src-pages-premium-js\":[\"/component---src-pages-premium-js-4f8b4f2ef95caf06324b.js\"],\"component---src-pages-privacy-policy-js\":[\"/component---src-pages-privacy-policy-js-7e44d44cc62997aced4d.js\"],\"component---src-templates-author-index-js\":[\"/component---src-templates-author-index-js-da2607c3507e1dc605e9.js\"],\"component---src-templates-category-post-list-tsx\":[\"/component---src-templates-category-post-list-tsx-1152aa2a2f6c63062c6a.js\"],\"component---src-templates-home-js\":[\"/component---src-templates-home-js-de29024c7610fbf75571.js\"],\"component---src-templates-hub-article-tsx\":[\"/component---src-templates-hub-article-tsx-6a0707ac787dd30b71ac.js\"],\"component---src-templates-hub-tsx\":[\"/component---src-templates-hub-tsx-7d4bc1c9e3e36a685d83.js\"],\"component---src-templates-post-list-tsx\":[\"/component---src-templates-post-list-tsx-e14ef8cdabb0e850f2aa.js\"],\"component---src-templates-post-tsx\":[\"/component---src-templates-post-tsx-58a45c7d3234539f73c8.js\"],\"component---src-templates-tag-list-index-js\":[\"/component---src-templates-tag-list-index-js-33915d7948a1b1c49893.js\"],\"component---src-templates-teams-js\":[\"/component---src-templates-teams-js-0de1e8f3a7795cbc51da.js\"],\"slice---src-slices-header-index-tsx\":[\"/slice---src-slices-header-index-tsx-f88f5a20c263a23f35bd.js\"],\"slice---src-slices-subcategory-navigation-tsx\":[\"/slice---src-slices-subcategory-navigation-tsx-ef65f83a8f4b91366558.js\"]}"; </script> <script>window.___webpackCompilationHash="428128aabf12af27e6a9";</script><script src="/webpack-runtime-07b27ea23707b7a75edf.js" async></script><script src="/framework-6a525285796fb83f2864.js" async></script><script src="/c0d53ec4-3909e07c071752347e8c.js" async></script><script src="/app-48386ace099fa9c70532.js" async></script></body></html>