diff --git a/.changeset/gorgeous-months-attack.md b/.changeset/gorgeous-months-attack.md
new file mode 100644
index 0000000..10ff815
--- /dev/null
+++ b/.changeset/gorgeous-months-attack.md
@@ -0,0 +1,11 @@
+---
+"water.css": major
+---
+
+Globally set box-sizing to border-box
+
+This is a breaking change because of the potential to break many layouts/sites
+
+We made this change because it makes many facets of writing CSS easier and more convenient
+
+If it's an issue, you can apply `html { box-sizing: content-box; }` 
\ No newline at end of file
diff --git a/dist/dark.css b/dist/dark.css
index 43a72e9..26db6fd 100644
--- a/dist/dark.css
+++ b/dist/dark.css
@@ -237,5 +237,3 @@ tbody tr:nth-child(even) {
 ::-webkit-scrollbar-thumb:hover {
   background: #415c73;
 }
-
-/*# sourceMappingURL=dark.css.map */
diff --git a/docs/scripts/docs.js b/docs/scripts/docs.js
index 6662770..0ce8070 100644
--- a/docs/scripts/docs.js
+++ b/docs/scripts/docs.js
@@ -327,18 +327,12 @@ for (const category of categories) {
     const pre = document.createElement('pre')
     const code = document.createElement('code')
     code.innerText = snippet.code.trim()
-    code.style.position = 'relative'
+    pre.style.position = 'relative'
+    pre.appendChild(code)
 
     const button = document.createElement('button')
     button.innerText = 'Copy'
-    Object.assign(button.style, {
-      position: 'absolute',
-      top: '0',
-      right: '0',
-      margin: '6px',
-      padding: '8px'
-    })
-
+    button.className = 'snippet-copy'
     let timeout = null
     button.addEventListener('click', () => {
       navigator.clipboard.writeText(snippet.code.trim())
@@ -347,9 +341,7 @@ for (const category of categories) {
       timeout = setTimeout(() => { button.innerText = 'Copy' }, 1000)
     })
 
-    code.appendChild(button)
-
-    pre.appendChild(code)
+    pre.appendChild(button)
     demosContainer.appendChild(pre)
 
     const details = document.createElement('details')
diff --git a/docs/style.css b/docs/style.css
index 4e9b064..f76f9f5 100755
--- a/docs/style.css
+++ b/docs/style.css
@@ -36,13 +36,6 @@
   transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1) 220ms;
 }
 
-/* This is a really *really* evil hack to get around a half-char of overflow. */
-@media only screen and (min-width: 840px) {
-  #link-snippet-container > pre > code {
-    overflow: hidden;
-  }
-}
-
 #link-snippet-container > pre[hidden] {
   display: block;
   visibility: hidden;
@@ -69,7 +62,6 @@ body > footer {
   justify-content: space-between;
 }
 
-/* Hmmm yes great class name */
 .top-theme-form {
   padding: 10px 0;
   top: 0;
@@ -79,3 +71,16 @@ body > footer {
   z-index: 999;
   background: var(--background-body);
 }
+
+.snippet-copy {
+  opacity: 0.5;
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 6px;
+  padding: 8px;
+}
+
+.snippet-copy:hover {
+  opacity: 1;
+}
diff --git a/src/parts/_base.css b/src/parts/_base.css
index ddf8040..03338e1 100644
--- a/src/parts/_base.css
+++ b/src/parts/_base.css
@@ -1,3 +1,13 @@
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
 body {
   font-family:
     system-ui,
@@ -31,5 +41,6 @@ textarea {
     border-color var(--animation-duration) linear,
     color var(--animation-duration) linear,
     box-shadow var(--animation-duration) linear,
-    transform var(--animation-duration) ease;
+    transform var(--animation-duration) ease-in-out,
+    opacity var(--animation-duration) linear;
 }
diff --git a/src/parts/_forms.css b/src/parts/_forms.css
index be71b3d..0395cc1 100644
--- a/src/parts/_forms.css
+++ b/src/parts/_forms.css
@@ -88,7 +88,6 @@ textarea {
 textarea {
   display: block;
   margin-right: 0;
-  box-sizing: border-box;
   resize: vertical;
 }