{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; serial *; vr *; web-share *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"featureFlags":[],"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails"},"__user":{"anon":true,"base_url":"/anon/","cohorts":[],"current_team_hashid":null,"current_team_id":0,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzQ5NzcyODk0LCJpYXQiOjE3NDk3NjkyOTQsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.wXGndNBsqSew8tTp_t0vQtMBGKwCfNbaeiCAhVP4dvBiAujWquZzkSJ90KhNqWVgEQZW8hLMy2xrTUEfHcTVBWU3tpl-FOwYoJG6YSXLwKeuZdn-NylSqOPIeTVbC57a8w3abjDv9sV7xG4v6--n7xkBLcp7wf7_XM3bTwHKZKfmvKv5htzD-KFisPXg3GKeCirUnDlej_W2Jzhs8DG0MIfs_650piarUJulJ5YqxoZhXCYoxRh0XE-76dNpp88CeXSXo_P9aO4Dz2WwblN4-KIBY9rIcuY8gL4UGHXad5Sbe3I0kuII0jMQXOnhs6Uo1WQNH0qYNiOGG6SdH1XMdQ"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":53511423,\"user_id\":1731220,\"html\":\"<link rel=\\\"preconnect\\\" href=\\\"https:\\/\\/fonts.gstatic.com\\\">\\n<link href=\\\"https:\\/\\/fonts.googleapis.com\\/css2?family=Montserrat:wght@100;400;600;700&display=swap\\\" rel=\\\"stylesheet\\\">\\n\\n<section class=\\\"color-section\\\">\\n <h2 class=\\\"title\\\">Colours<\\/h2>\\n\\n <div class=\\\"color-swatch dark\\\">\\n <section class=\\\"color-details light-text\\\">\\n <h3>Dark Colour<\\/h3>\\n <p><span class=\\\"semi-bold\\\">HSB:<\\/span> 0, 0, 11<\\/p>\\n <p><span class=\\\"semi-bold\\\">RGB:<\\/span> 27, 27, 27<\\/p>\\n <p><span class=\\\"semi-bold\\\">Hex:<\\/span> #1b1b1b<\\/p>\\n <\\/section>\\n <\\/div>\\n <div class=\\\"color-swatch dark-alt\\\">\\n <section class=\\\"color-details light-text\\\">\\n <h3>Dark Alt<\\/h3>\\n <p><span class=\\\"semi-bold\\\">HSB:<\\/span> 266, 87, 47<\\/p>\\n <p><span class=\\\"semi-bold\\\">RGB:<\\/span> 60, 15, 119<\\/p>\\n <p><span class=\\\"semi-bold\\\">Hex:<\\/span> #3c0f77<\\/p>\\n <\\/section>\\n <\\/div>\\n <div class=\\\"color-swatch accent\\\">\\n <section class=\\\"color-details light-text\\\">\\n <h3>Accent<\\/h3>\\n <p><span class=\\\"semi-bold\\\">HSB:<\\/span> 296, 71, 67<\\/p>\\n <p><span class=\\\"semi-bold\\\">RGB:<\\/span> 162, 50, 170<\\/p>\\n <p><span class=\\\"semi-bold\\\">Hex:<\\/span> #a232aa<\\/p>\\n <\\/section>\\n <\\/div>\\n <div class=\\\"color-swatch light\\\">\\n <section class=\\\"color-details dark-text\\\">\\n <h3>Light<\\/h3>\\n <p><span class=\\\"semi-bold\\\">HSB:<\\/span> 0, 0, 100<\\/p>\\n <p><span class=\\\"semi-bold\\\">RGB:<\\/span> 255, 255, 255<\\/p>\\n <p><span class=\\\"semi-bold\\\">Hex:<\\/span> #d7d7d7<\\/p>\\n <\\/section>\\n <\\/div>\\n\\n <h2 class=\\\"title\\\">Text Colours<\\/h2>\\n\\n <div class=\\\"color-swatch dark\\\">\\n <section class=\\\"color-details light-text\\\">\\n <h3>Dark Text<\\/h3>\\n <p><span class=\\\"semi-bold\\\">HSB:<\\/span> 0, 0, 11<\\/p>\\n <p><span class=\\\"semi-bold\\\">RGB:<\\/span> 27, 27, 27<\\/p>\\n <p><span class=\\\"semi-bold\\\">Hex:<\\/span> #1b1b1b<\\/p>\\n <\\/section>\\n <\\/div>\\n <div class=\\\"color-swatch light\\\">\\n <section class=\\\"color-details dark-text\\\">\\n <h3>Light Text<\\/h3>\\n <p><span class=\\\"semi-bold\\\">HSB:<\\/span> 0, 0, 100<\\/p>\\n <p><span class=\\\"semi-bold\\\">RGB:<\\/span> 255, 255, 255<\\/p>\\n <p><span class=\\\"semi-bold\\\">Hex:<\\/span> #d7d7d7<\\/p>\\n <\\/section>\\n <\\/div>\\n\\n<\\/section>\\n\\n<span class=\\\"divide\\\"> <\\/span>\\n\\n<section class=\\\"font-section\\\">\\n <h2 class=\\\"title\\\">Fonts<\\/h2>\\n\\n <div class=\\\"header-size\\\">\\n <h1>H1<\\/h1>\\n <p>Heading One - 38px<\\/p>\\n <h2>H2<\\/h2>\\n <p>Heading Two - 32px<\\/p>\\n <h3>H3<\\/h3>\\n <p>Heading Three - 28px<\\/p>\\n <h4>H4<\\/h4>\\n <p>Heading Four - 24px<\\/p>\\n <h5>H5<\\/h5>\\n <p>Heading Five - 20px<\\/p>\\n <h6>H6 <\\/h6>\\n <p>Heading Six - 16px<\\/p>\\n <p>p<\\/p>\\n <p>Paragraph Text - 16px<\\/p>\\n <\\/div>\\n\\n <div class=\\\"font-family\\\">\\n <p class=\\\"thin\\\"><span class=\\\"font-size\\\">Montserrat Thin 100<\\/span>\\n <span class=\\\"text-break\\\">abcdefghijklmnopqrstuvwxyz<span class=\\\"text-break uppercase\\\">abcdefghijklmnopqrstuvwxyz<\\/span><\\/span>\\n <\\/p>\\n\\n <p class=\\\"regular\\\"><span class=\\\"font-size\\\">Montserrat Regular 400<\\/span>\\n <span class=\\\"text-break\\\">abcdefghijklmnopqrstuvwxyz<span class=\\\"text-break uppercase\\\">abcdefghijklmnopqrstuvwxyz<\\/span><\\/span>\\n <\\/p>\\n\\n <p class=\\\"semi-bold\\\"><span class=\\\"font-size\\\">Montserrat Semi-Bold 600<\\/span>\\n <span class=\\\"text-break\\\">abcdefghijklmnopqrstuvwxyz<span class=\\\"text-break uppercase\\\">abcdefghijklmnopqrstuvwxyz<\\/span><\\/span>\\n <\\/p>\\n\\n <p class=\\\"bold\\\"><span class=\\\"font-size\\\">Montserrat Bold 700<\\/span>\\n <span class=\\\"text-break bold\\\">abcdefghijklmnopqrstuvwxyz<span class=\\\"text-break uppercase\\\">abcdefghijklmnopqrstuvwxyz<\\/span><\\/span>\\n <\\/p>\\n <\\/div>\\n\\n<\\/section>\\n\\n<span class=\\\"divide\\\"> <\\/span>\",\"css\":\"$dark-colour: #1b1b1b;\\n$dark-alt: #3c0f77;\\n$accent: #a232aa;\\n$light: #fff;\\n\\n$dark-text: #1b1b1b;\\n$light-text: #fff;\\n\\n$custom-font: \\\"Montserrat\\\", sans-serif;\\n\\n$small: 0.9em;\\n$small: clamp(0.8em, 5vw, 0.9em);\\n$medium: 1em;\\n$medium: clamp(0.9em, 5vw, 1em);\\n$large: 1.25em;\\n$large: clamp(1em, 5vw, 1.25em);\\n$x-large: 1.5em;\\n$x-large: clamp(1em, 3vw, 1.5em);\\n\\n\\/\\/Put in heading sizes and remove small medium large\\n\\n$thin: 100;\\n$regular: 400;\\n$semi-bold: 600;\\n$bold: 700;\\n\\n@mixin spacing {\\n padding: 50px;\\n}\\n\\nbody {\\n font-family: $custom-font;\\n font-size: 16px;\\n background-color: #ffffff;\\n background-image: url(\\\"data:image\\/svg+xml,%3Csvg xmlns='http:\\/\\/www.w3.org\\/2000\\/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23d7d7d7' fill-opacity='0.17'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'\\/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'\\/%3E%3C\\/g%3E%3C\\/g%3E%3C\\/svg%3E\\\");\\n}\\n\\nh1 {\\n font-size: 2.375em;\\n font-size: clamp(1.375em, 5vw, 2.375em);\\n}\\n\\nh2 {\\n font-size: 2em;\\n font-size: clamp(1em, 5vw, 2em);\\n}\\n\\nh3 {\\n font-size: 1.75em;\\n font-size: clamp(1em, 5vw, 1.75em);\\n}\\n\\nh4 {\\n font-size: 1.5em;\\n font-size: clamp(1em, 5vw, 1.5em);\\n}\\n\\nh5 {\\n font-size: 1.25em;\\n font-size: clamp(1em, 5vw, 1.25em);\\n}\\n\\nh6 {\\n font-size: 1em;\\n font-size: clamp(1em, 5vw, 1em);\\n}\\n\\np {\\n font-size: 1em;\\n}\\n\\n.dark {\\n background: $dark-colour;\\n}\\n.dark-alt {\\n background: $dark-alt;\\n}\\n.accent {\\n background: $accent;\\n}\\n.light {\\n background: $light;\\n}\\n.dark-text {\\n color: $dark-text;\\n}\\n.light-text {\\n color: $light-text;\\n}\\n\\n\\/* Global Styles *\\/\\n.title {\\n font-size: $x-large;\\n width: 100%;\\n margin-bottom: 25px;\\n}\\n\\n\\/* Font Size *\\/\\n.small-font {\\n font-size: $small;\\n}\\n\\n.medium-font {\\n font-size: $medium;\\n}\\n\\n.large-font {\\n font-size: $large;\\n}\\n\\n.x-large-font {\\n font-size: $x-large;\\n}\\n\\n\\/* Font Weight *\\/\\n.thin {\\n font-weight: $thin;\\n}\\n\\n.regular {\\n font-weight: $regular;\\n}\\n\\n.semi-bold {\\n font-weight: $semi-bold;\\n}\\n\\n.bold {\\n font-weight: $bold;\\n}\\n\\n.divide {\\n width: 90%;\\n height: 1px;\\n display: block;\\n background: $dark-colour;\\n margin: 0 auto;\\n opacity: 10%;\\n}\\n\\n\\/* Color Section *\\/\\n.color-section {\\n display: flex;\\n flex-wrap: wrap;\\n flex-direction: row;\\n @include spacing;\\n\\n .color-swatch {\\n display: flex;\\n flex-direction: column;\\n position: relative;\\n width: 210px;\\n box-sizing: border-box;\\n padding: 20px;\\n }\\n\\n .color-details {\\n font-size: $small;\\n display: flex;\\n flex-direction: column;\\n margin-top: auto;\\n }\\n\\n h3 {\\n font-size: $medium;\\n }\\n\\n h2:nth-of-type(2) {\\n margin-top: 20px;\\n }\\n}\\n\\n\\/* Font Section *\\/\\n.header-size {\\n p {\\n margin-bottom: 10px;\\n\\n &:nth-of-type(7) {\\n margin: 0;\\n }\\n }\\n}\\n.font-section {\\n @include spacing;\\n\\n .font-size {\\n margin-bottom: 5px;\\n display: block;\\n }\\n\\n .font-family {\\n p {\\n padding: 10px 0;\\n }\\n }\\n}\\n\",\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2021-07-02T19:33:25.000Z\",\"updated_at\":\"2021-07-04T17:13:35.000Z\",\"title\":\"almatthews.co.uk - styleguide\",\"description\":\"\",\"slug_hash\":\"BaRoaoQ\",\"head\":\"\",\"private\":true,\"slug_hash_private\":\"4c7fb7b751d112dcfa0e52e7892d98c8\",\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"017a68b6-2388-77aa-94ae-e87ae37e6318\",\"is_new_editor_pen\":false,\"access\":\"Private\",\"pen_hash\":null,\"hashid\":\"BaRoaoQ\"}"}