commit abd5159819c52da8b28967a62da9b6ad5dda3a23
parent a8fa315001c0cc23aff4653619bf5fdf4607ba59
Author: Zane Schaffer <znschaffer@gmail.com>
Date: Sat, 2 Dec 2023 10:04:15 -0800
change css
Diffstat:
| D | src/_main.scss | | | 231 | ------------------------------------------------------------------------------- |
| A | src/concrete.css | | | 400 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| D | src/custom.css | | | 228 | ------------------------------------------------------------------------------- |
| D | src/custom.css.map | | | 2 | -- |
| D | src/custom.scss | | | 15 | --------------- |
| A | src/normalize.css | | | 349 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
6 files changed, 749 insertions(+), 476 deletions(-)
diff --git a/src/_main.scss b/src/_main.scss
@@ -1,231 +0,0 @@
-/* Sakura.css v1.5.0
- * ================
- * Minimal css theme.
- * Project: https://github.com/oxalorg/sakura/
- */
-
-/* Body */
-
-html {
- font-size: 62.5%; // So that root size becomes 10px
- font-family: $font-family-base;
-}
-
-body {
- // $font-size-base must be a rem value
- font-size: $font-size-base;
- line-height: 1.618;
- max-width: 38em;
- margin: auto;
- color: $color-text;
- background-color: $color-bg;
- padding: 13px;
-}
-
-@media (max-width: 684px) {
- body {
- font-size: $font-size-base * 0.85;
- }
-}
-
-@media (max-width: 382px) {
- body {
- font-size: $font-size-base * 0.75;
- }
-}
-
-@mixin word-wrap() {
- overflow-wrap: break-word;
- word-wrap: break-word;
- -ms-word-break: break-all;
- word-break: break-word;
-}
-
-h1, h2, h3, h4, h5, h6 {
- line-height: 1.1;
- font-family: $font-family-heading;
- font-weight: 700;
- margin-top: 3rem;
- margin-bottom: 1.5rem;
- @include word-wrap;
-}
-
-h1 { font-size: 2.35em }
-h2 { font-size: 2.00em }
-h3 { font-size: 1.75em }
-h4 { font-size: 1.5em }
-h5 { font-size: 1.25em }
-h6 { font-size: 1em }
-
-p {
- margin-top: 0px;
- margin-bottom: 2.5rem;
-}
-
-small, sub, sup {
- font-size: 75%;
-}
-
-hr {
- border-color: $color-blossom;
-}
-
-a {
- text-decoration: none;
- color: $color-blossom;
-
- &:visited {
- color: darken($color-blossom, 10%);
- }
-
- &:hover {
- color: $color-fade;
- border-bottom: 2px solid $color-text;
- }
-
-}
-
-ul {
- padding-left: 1.4em;
- margin-top: 0px;
- margin-bottom: 2.5rem;
-}
-
-li {
- margin-bottom: 0.4em;
-}
-
-blockquote {
- margin-left: 0px;
- margin-right: 0px;
- padding-left: 1em;
- padding-top: 0.8em;
- padding-bottom: 0.8em;
- padding-right: 0.8em;
- border-left: 5px solid $color-blossom;
- margin-bottom: 2.5rem;
- background-color: $color-bg-alt;
-}
-
-blockquote p {
- margin-bottom: 0;
-}
-
-img, video {
- height: auto;
- max-width: 100%;
- margin-top: 0px;
- margin-bottom: 2.5rem;
-}
-
-/* Pre and Code */
-
-pre {
- background-color: $color-bg-alt;
- display: block;
- padding: 1em;
- overflow-x: auto;
- margin-top: 0px;
- margin-bottom: 2.5rem;
- font-size: 0.9em;
-}
-
-code, kbd, samp {
- font-size: 0.9em;
- padding: 0 0.5em;
- background-color: $color-bg-alt;
- white-space: pre-wrap;
-}
-
-pre > code {
- padding: 0;
- background-color: transparent;
- white-space: pre;
- font-size: 1em;
-}
-
-/* Tables */
-
-table {
- text-align: justify;
- width: 100%;
- border-collapse: collapse;
- margin-bottom: 2rem;
-}
-
-td, th {
- padding: 0.5em;
- border-bottom: 1px solid $color-bg-alt;
-}
-
-/* Buttons, forms and input */
-
-input, textarea {
- border: 1px solid $color-text;
-
- &:focus {
- border: 1px solid $color-blossom;
- }
-}
-
-textarea {
- width: 100%;
-}
-
-.button, button, input[type="submit"], input[type="reset"], input[type="button"], input[type=file]::file-selector-button {
- display: inline-block;
- padding: 5px 10px;
- text-align: center;
- text-decoration: none;
- white-space: nowrap;
-
- background-color: $color-blossom;
- color: $color-bg;
- border-radius: 1px;
- border: 1px solid $color-blossom;
- cursor: pointer;
- box-sizing: border-box;
-
- &[disabled] {
- cursor: default;
- opacity: .5;
- }
-
- &:hover {
- background-color: $color-fade;
- color: $color-bg;
- outline: 0;
- }
-
- &:focus-visible {
- outline-style: solid;
- outline-width: 2px;
- }
-}
-
-textarea, select, input {
- color: $color-text;
- padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
- margin-bottom: 10px;
- background-color: $color-bg-alt;
- border: 1px solid $color-bg-alt;
- border-radius: 4px;
- box-shadow: none;
- box-sizing: border-box;
-
- &:focus {
- border: 1px solid $color-blossom;
- outline: 0;
- }
-}
-
-input[type="checkbox"]:focus {
- outline: 1px dotted $color-blossom;
-}
-
-label, legend, fieldset {
- display: block;
- margin-bottom: .5rem;
- font-weight: 600;
-}
-
diff --git a/src/concrete.css b/src/concrete.css
@@ -0,0 +1,400 @@
+/*! concrete.css v2.0.3 | MIT License | github.com/louismerlin/concrete.css */
+
+/**
+ * 1. Modify the base font-size to 62.5% so that 1.6rem = 16px.
+ * 2. Set box-sizing globally to handle padding and border widths.
+ */
+
+html {
+ font-size: 62.5%; /* 1 */
+ box-sizing: border-box; /* 2 */
+}
+
+/**
+ * 1. Continue the global box-sizing modification.
+ * 2. Set the underline size for all elements.
+ */
+
+*, ::after, ::before {
+ box-sizing: inherit; /* 1 */
+ text-decoration-thickness: .2rem; /* 2 */
+}
+
+/**
+ * 1. Set global font size to 2rem (20px) with a normal weight.
+ * 2. Set the text and background color to white and black by default.
+ * 3. Set the font-family to Helvetica, or equivalent.
+ */
+
+body {
+ font-size: 2rem; /* 1 */
+ font-weight: 400; /* 1 */
+ background: #fff; /* 2 */
+ color: #111; /* 2 */
+ font-family: Helvetica, Arial, sans-serif; /* 3 */
+}
+
+/**
+ * Set the link color to black
+ */
+
+a {
+ color: #111;
+}
+
+/**
+ * 1. Set the max width of images to 100%, so that they don't overflow.
+ * 2. Set the height of images relative to their width.
+ */
+
+img {
+ max-width: 100%; /* 1 */
+ height: auto; /* 2 */
+}
+
+/**
+ * 1. Center the main element horizontally.
+ * 2. Set the width of the element to 640px, with padding for mobile screens.
+ */
+
+main {
+ margin: auto; /* 1 */
+ max-width: 66rem; /* 2 */
+ padding: 0 1rem; /* 2 */
+ width: 100%; /* 2 */
+}
+
+/**
+ * 1. Add some padding around the header.
+ * 2. Increase the size of text in the header.
+ */
+
+header {
+ padding: 16rem 0; /* 1 */
+ font-size: 1.2em; /* 2 */
+}
+
+/**
+ * Center the text in the footer.
+ */
+
+footer {
+ text-align: center;
+}
+
+/**
+ * Add some padding around the sections.
+ */
+
+section {
+ padding: 4rem 0;
+}
+
+/**
+ * 1. Change the style of the button.
+ * 2. Set the color and border of the button.
+ * 3. Add the pointer cursor when hovering a button.
+ */
+
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+ display: inline-block; /* 1 */
+ vertical-align: middle; /* 1 */
+ padding: .4rem 1rem; /* 1 */
+ font-size: 2rem; /* 1 */
+ font-weight: normal; /* 1 */
+ margin-bottom: 1rem; /* 1 */
+ background: #fff; /* 2 */
+ color: #111; /* 2 */
+ border: .2rem solid #111; /* 2 */
+ border-radius: 0; /* 2 */
+ cursor: pointer; /* 3 */
+}
+
+/**
+ * 1. Invert the colors of the disabled button.
+ * 2. Add the not-allowed cursor when hovering a disabled button.
+ */
+
+button:disabled,
+input[type="button"]:disabled,
+input[type="reset"]:disabled,
+input[type="submit"]:disabled{
+ color: #fff; /* 1 */
+ background: #111; /* 1 */
+ cursor: not-allowed; /* 2 */
+}
+
+/**
+ * Set the list bullet to square.
+ */
+
+ul {
+ list-style: square;
+}
+
+/**
+ * Set the border around a fieldset.
+ */
+
+fieldset {
+ border: .2rem solid #111;
+}
+
+/**
+ * 1. Modify the display of labels and legends.
+ * 2. Add a margin underneath.
+ */
+
+label, legend {
+ display: block; /* 1 */
+ font-weight: bold; /* 1 */
+ margin-bottom: .8rem; /* 2 */
+}
+
+/**
+ * 1. Change the appearance of the text input.
+ * 2. Set the color and border of the text input.
+ */
+
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="text"],
+input[type="url"],
+textarea,
+select {
+ -webkit-appearance: none; /* 1 */
+ -moz-appearance: none; /* 1 */
+ appearance: none; /* 1 */
+ box-shadow: none; /* 1 */
+ box-sizing: inherit; /* 1 */
+ padding: .4rem 1rem; /* 1 */
+ width: 100%; /* 1 */
+ font-size: 2rem; /* 1 */
+ color: #111; /* 2 */
+ background-color: #fff; /* 2 */
+ border: .2rem solid #111; /* 2 */
+ border-radius: 0; /* 2 */
+}
+
+/**
+ * Set margin for form elements.
+ */
+
+fieldset, input, select, textarea {
+ margin: 0 0 1.6rem 0;
+}
+
+/**
+ * 1. Set the font color for the placeholder in inputs.
+ * 2. Set font-style to italic for the placeholder in inputs.
+ */
+
+input::placeholder,
+textarea::placeholder {
+ color: #111; /* 1 */
+ font-style: italic; /* 2 */
+}
+
+/**
+ * 1. Expand width to 100% for the table element.
+ * 2. Remove the distance between the borders of adjacent table cells.
+ */
+
+table {
+ width: 100%; /* 1 */
+ border-spacing: 0; /* 2 */
+}
+
+/**
+ * Add padding around table cells.
+ */
+
+td, th {
+ padding: .8rem;
+}
+
+/**
+ * Remove left padding for first cell in a row.
+ */
+
+td:first-child, th:first-child {
+ padding-left: 0;
+}
+
+/**
+ * Remove right padding for last cell in a row.
+ */
+
+td:last-child, th:last-child {
+ padding-right: 0;
+}
+
+/**
+ * 1. Add a border under the table header.
+ * 2. Align the text to the left in the table header.
+ */
+
+th {
+ border-bottom: .2rem solid #111; /* 1 */
+ text-align: left; /* 2 */
+}
+
+/**
+ * Add a thiner border under table rows.
+ */
+
+td {
+ border-bottom: .1rem solid #111;
+}
+
+/**
+ * 1. Change the margins and padding.
+ * 2. Add a border on the left of these elements.
+ * 3. Set the y overflow to hidden to hide the navigation bar.
+ */
+
+blockquote, pre {
+ margin-left: 0; /* 1 */
+ margin-right: 0; /* 1 */
+ padding: 1rem 1.6rem; /* 1 */
+ border-left: .2rem solid #111; /* 2 */
+ overflow-y: hidden; /* 3 */
+}
+
+/**
+ * 1. Set the rest of the border of the preformatted element to dotted.
+ * 2. Re-set the left border style.
+ */
+
+pre {
+ border: 0.1rem dotted #111;
+ border-left: 0.2rem solid #111;
+}
+
+/**
+ * 1. Modify the display of the code block.
+ * 2. Reduce the font size of the code block.
+ */
+
+pre > code {
+ white-space: pre; /* 1 */
+ display: block; /* 1 */
+ font-size: 1.6rem; /* 2 */
+}
+
+/**
+ * 1. Modify the display of the progress bar in all browsers.
+ * 2. Set the colors and border of the progress bar.
+ */
+
+progress {
+ -moz-appearance: none; /* 1 */
+ -webkit-appearance: none; /* 1 */
+ display: block; /* 1 */
+ height: 1rem; /* 1 */
+ overflow: hidden; /* 1 */
+ padding: 0; /* 1 */
+ width: 100%; /* 1 */
+ background: #fff; /* 2 */
+ color: #111; /* 2 */
+ border: .2rem solid #111; /* 2 */
+ border-radius: 0; /* 2 */
+}
+
+/**
+ * Set the background color of the webkit progress bar.
+ */
+
+progress::-webkit-progress-bar {
+ background-color: #fff;
+}
+
+/**
+ * Set the color of the webkit progress bar.
+ */
+
+progress::-webkit-progress-value {
+ background-color: #111;
+}
+
+/**
+ * Set the color of the mozilla progress bar.
+ */
+
+progress::-moz-progress-bar {
+ background-color: #111;
+}
+
+/**
+ * Set the border for the horizontal rule.
+ */
+
+hr {
+ border: .1rem solid #111;
+}
+
+/**
+ * Invert the colors if the user has dark mode activated.
+ */
+
+@media (prefers-color-scheme: dark) {
+ body {
+ background: #111;
+ color: #fff;
+ }
+ a,
+ input::placeholder,
+ textarea::placeholder {
+ color: #fff;
+ }
+ button,
+ input[type="button"],
+ input[type="reset"],
+ input[type="submit"],
+ input[type="email"],
+ input[type="number"],
+ input[type="password"],
+ input[type="search"],
+ input[type="tel"],
+ input[type="text"],
+ input[type="url"],
+ textarea,
+ select,
+ progress {
+ background: #111;
+ color: #fff;
+ border-color: #fff;
+ }
+ button:disabled,
+ input[type="button"]:disabled,
+ input[type="reset"]:disabled,
+ input[type="submit"]:disabled{
+ color: #111;
+ background: #fff;
+ }
+ fieldset {
+ border-color: #fff;
+ }
+ td,
+ th,
+ blockquote,
+ pre,
+ hr {
+ border-color: #fff;
+ }
+ progress::-webkit-progress-bar {
+ background-color: #111;
+ }
+ progress::-webkit-progress-value {
+ background-color: #fff;
+ }
+ progress::-moz-progress-bar {
+ background-color: #fff;
+ }
+}
diff --git a/src/custom.css b/src/custom.css
@@ -1,228 +0,0 @@
-/* Sakura.css v1.5.0
- * ================
- * Minimal css theme.
- * Project: https://github.com/oxalorg/sakura/
- */
-/* Body */
-html {
- font-size: 62.5%;
- font-family: "SF Pro";
-}
-
-body {
- font-size: 1.8rem;
- line-height: 1.618;
- max-width: 38em;
- margin: auto;
- color: #222222;
- background-color: #ffffff;
- padding: 13px;
-}
-
-@media (max-width: 684px) {
- body {
- font-size: 1.53rem;
- }
-}
-@media (max-width: 382px) {
- body {
- font-size: 1.35rem;
- }
-}
-h1, h2, h3, h4, h5, h6 {
- line-height: 1.1;
- font-family: "SF Pro";
- font-weight: 700;
- margin-top: 3rem;
- margin-bottom: 1.5rem;
- overflow-wrap: break-word;
- word-wrap: break-word;
- -ms-word-break: break-all;
- word-break: break-word;
-}
-
-h1 {
- font-size: 2.35em;
-}
-
-h2 {
- font-size: 2em;
-}
-
-h3 {
- font-size: 1.75em;
-}
-
-h4 {
- font-size: 1.5em;
-}
-
-h5 {
- font-size: 1.25em;
-}
-
-h6 {
- font-size: 1em;
-}
-
-p {
- margin-top: 0px;
- margin-bottom: 2.5rem;
-}
-
-small, sub, sup {
- font-size: 75%;
-}
-
-hr {
- border-color: #007559;
-}
-
-a {
- text-decoration: none;
- color: #007559;
-}
-a:visited {
- color: #004232;
-}
-a:hover {
- color: #006994;
- border-bottom: 2px solid #222222;
-}
-
-ul {
- padding-left: 1.4em;
- margin-top: 0px;
- margin-bottom: 2.5rem;
-}
-
-li {
- margin-bottom: 0.4em;
-}
-
-blockquote {
- margin-left: 0px;
- margin-right: 0px;
- padding-left: 1em;
- padding-top: 0.8em;
- padding-bottom: 0.8em;
- padding-right: 0.8em;
- border-left: 5px solid #007559;
- margin-bottom: 2.5rem;
- background-color: #f7f7f7;
-}
-
-blockquote p {
- margin-bottom: 0;
-}
-
-img, video {
- height: auto;
- max-width: 100%;
- margin-top: 0px;
- margin-bottom: 2.5rem;
-}
-
-/* Pre and Code */
-pre {
- background-color: #f7f7f7;
- display: block;
- padding: 1em;
- overflow-x: auto;
- margin-top: 0px;
- margin-bottom: 2.5rem;
- font-size: 0.9em;
-}
-
-code, kbd, samp {
- font-size: 0.9em;
- padding: 0 0.5em;
- background-color: #f7f7f7;
- white-space: pre-wrap;
-}
-
-pre > code {
- padding: 0;
- background-color: transparent;
- white-space: pre;
- font-size: 1em;
-}
-
-/* Tables */
-table {
- text-align: justify;
- width: 100%;
- border-collapse: collapse;
- margin-bottom: 2rem;
-}
-
-td, th {
- padding: 0.5em;
- border-bottom: 1px solid #f7f7f7;
-}
-
-/* Buttons, forms and input */
-input, textarea {
- border: 1px solid #222222;
-}
-input:focus, textarea:focus {
- border: 1px solid #007559;
-}
-
-textarea {
- width: 100%;
-}
-
-.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
- display: inline-block;
- padding: 5px 10px;
- text-align: center;
- text-decoration: none;
- white-space: nowrap;
- background-color: #007559;
- color: #ffffff;
- border-radius: 1px;
- border: 1px solid #007559;
- cursor: pointer;
- box-sizing: border-box;
-}
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
- cursor: default;
- opacity: 0.5;
-}
-.button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover {
- background-color: #006994;
- color: #ffffff;
- outline: 0;
-}
-.button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible {
- outline-style: solid;
- outline-width: 2px;
-}
-
-textarea, select, input {
- color: #222222;
- padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
- margin-bottom: 10px;
- background-color: #f7f7f7;
- border: 1px solid #f7f7f7;
- border-radius: 4px;
- box-shadow: none;
- box-sizing: border-box;
-}
-textarea:focus, select:focus, input:focus {
- border: 1px solid #007559;
- outline: 0;
-}
-
-input[type=checkbox]:focus {
- outline: 1px dotted #007559;
-}
-
-label, legend, fieldset {
- display: block;
- margin-bottom: 0.5rem;
- font-weight: 600;
-}
-
-/*# sourceMappingURL=custom.css.map */
diff --git a/src/custom.css.map b/src/custom.css.map
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["_main.scss","custom.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AAEA;EACI;EACA,aCFe;;;ADKnB;EAEI,WCRa;EDSb;EACA;EACA;EACA,OCbS;EDcT,kBCjBO;EDkBP;;;AAGJ;EACI;IACI;;;AAIR;EACI;IACI;;;AAWR;EACI;EACA,aCpCkB;EDqClB;EACA;EACA;EAXA;EACA;EACA;EACA;;;AAYJ;EAAK;;;AACL;EAAK;;;AACL;EAAK;;;AACL;EAAK;;;AACL;EAAK;;;AACL;EAAK;;;AAEL;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI,cCrEY;;;ADwEhB;EACI;EACA,OC1EY;;AD4EZ;EACI;;AAGJ;EACI,OChFK;EDiFL;;;AAKR;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCtGW;;;ADyGf;EACI;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;AAEA;EACI,kBCvHW;EDwHX;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA,kBCnIW;EDoIX;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;AAEA;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;AAEA;EACI;;AAEA;EACI;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA,kBCrLY;EDsLZ,OCnLO;EDoLP;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI,kBCjMK;EDkML,OChMG;EDiMH;;AAGJ;EACI;EACA;;;AAIR;EACI,OCxMS;EDyMT;EACA;EACA,kBC7MW;ED8MX;EACA;EACA;EACA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA","file":"custom.css"}
-\ No newline at end of file
diff --git a/src/custom.scss b/src/custom.scss
@@ -1,14 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Overpass&display=swap');
-
-$color-blossom: #3b22ea;
-$color-fade: #DA4453;
-
-$color-bg: #ffffff;
-$color-bg-alt: #f7f7f7;
-
-$color-text: rgba(0, 0, 0, 0.85);
-$font-size-base: 1.8rem;
-$font-family-base: "Overpass", sans-serif;
-$font-family-heading: "Overpass", sans-serif;
-
-@import "main";
-\ No newline at end of file
diff --git a/src/normalize.css b/src/normalize.css
@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+ line-height: 1.15; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+ ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+ margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+ display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+ border-style: none;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+ overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+ text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+ padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+legend {
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+ vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/* Interactive
+ ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+ display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+ display: list-item;
+}
+
+/* Misc
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+ display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+ display: none;
+}
