*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;}
@font-face {font-family: 'inter-light'; src: url(assets/fonts/Inter-Light-18pt.ttf) format('truetype');}
@font-face {font-family: 'inter-regular'; src: url(assets/fonts/Inter-Regular.ttf) format('truetype');}
@font-face {font-family: 'inter-medium'; src: url(assets/fonts/Inter-Medium.otf) format('opentype');}
@font-face {font-family: 'inter-bold'; src: url(assets/fonts/Inter-Bold.ttf) format('truetype');}
:root {
	--max-width: 50rem;
	--min-width: 18rem;
	--col-linkA: #FFFFFF;
	--col-linkB: #262932;
	--col-linkC: #7A89AD;
	--col-linkD: #3E4660;
	--col-linkE: #1D1D1D;
	--bd-radA: .375rem;
	--bd-radB: .75rem;
}

html {background: linear-gradient(180deg, #161616, #202020); color: #FFFFFF; font-family: inter-light, calibri; padding: 1.5rem .75rem; min-height: 100vh;}
body {display: flex; flex-direction: column; gap: .75rem; justify-content: center; max-width: var(--max-width); margin: auto;}
h1 {font-family: inter-regular, calibri; font-weight: normal;}
h3 {font-family: inter-medium, calibri; font-size: 1rem; font-weight: normal;}
h4 {font-family: inter-regular, calibri; font-weight: normal;}
a {display: inline-block; text-decoration: none; color: var(--col-linkC); transition: all ease .1s;}
a:hover {cursor: pointer;}
b {font-family: inter-medium, calibri;}
img {display: block;}
input {border: none;}
input:focus {border: none; outline: 1px solid var(--col-linkB);}
input::placeholder {color: var(--col-linkD);}

.hide {display: none !important;}
.center {text-align: center;}
.colA {color: var(--col-linkA);} .colB {color: var(--col-linkB);} .colC {color: var(--col-linkC);}

.social-links-container {display: flex; justify-content: center; gap: .25rem;}
.social-links-container * {transition: all ease .15s;}
.social-links-container a {aspect-ratio: 1/1; min-width: 2.5rem; width: fit-content; align-content: center; background-color: #1F1F1F; border-radius: .5rem;}
.social-links-container a:hover {background-color: #282828; border-radius: .75rem;}
.social-links-container img {margin: auto;}
.social-links-container a:hover img {transform: scale(1.15);}

h4.hero {margin: 2.5rem 0rem;}

.category-tabs {display: flex; gap: .375rem; flex-wrap: wrap; justify-content: center;}
.category-tabs * {padding: .5rem 1rem; min-height: 2.5rem; background-color: var(--col-linkB); border-radius: var(--bd-radA); align-content: center; font-family: inter-regular, calibri;}
.category-tabs input {flex: 1; background-color: #202020; color: var(--col-linkA); padding: .5rem .7rem; min-width: var(--min-width);}
.category-tabs a.active, .category-tabs a:hover {color: var(--col-linkB); background-color: var(--col-linkA);}

#assets-container {display: flex; flex-direction: column; gap: .5rem;}
.component-container {display: flex; flex-direction: column; gap: .25rem; padding: .75rem; background-color: var(--col-linkB); border-radius: var(--bd-radA);}
.component-container > :first-child {margin-bottom: .5rem;}
.component-header {display: flex; gap: 1rem; justify-content: space-between; align-items: center;}
.component-header > :first-child {text-transform: capitalize;}
.component-header > :last-child {font-family: inter-regular, calibri; font-size: .75rem; color: var(--col-linkC); text-align: right;}
.component-nav a {padding: .5rem 1rem; font-size: .875rem; background-color: var(--col-linkE); color: var(--col-linkD); border-radius: var(--bd-radA) var(--bd-radA) 0 0; font-family: inter-regular, calibri;}
.component-nav a.active, .component-nav a:hover {background-color: var(--col-linkA); color: var(--col-linkE);}
.component-preview {
	display: flex; justify-content: center; align-content: center; align-items: center; z-index: 0;
	resize: horizontal; overflow: hidden; width: 100%; max-width: 100%; padding: 1.5rem 1rem; background-color: var(--col-linkE); margin: auto; margin-bottom: .5rem; border-radius: var(--bd-radA);
}
.component-code-container {position: relative;}
div.component-code-block {background-color: var(--col-linkE); padding: 1rem; border-radius: 0 var(--bd-radA) var(--bd-radA) var(--bd-radA); white-space: pre; overflow-x: auto; font-size: .875rem; min-height: 3.5rem;}
#btn-copy {position: absolute; right: 12px; top: 12px; margin-right: 0; border-radius: 4px; min-width: 2rem; aspect-ratio: 1/1; background: url('/assets/icons/icon-button-copy.svg') no-repeat center, rgba(42,47,60, .25); transition: all ease-in-out .1s; }
#btn-copy:hover {background: url('/assets/icons/icon-button-copy.svg') no-repeat center, rgba(42,47,60, .75);}
#btn-copy.active {transform: scale(1.1); background: url('/assets/icons/icon-button-tick.svg') no-repeat center, rgba(42,47,60, 1);}
/*#btn-copy img {pointer-events: none;}*/

#banner-no-component {width: 100%; padding: .75rem 1rem; background: rgba(0,0,0, .1); color: var(--col-linkC); text-align: center; border-radius: var(--bd-radA);}

footer {width: 100%; text-align: center; padding: .75rem; border-top: 1px solid var(--col-linkB); color: var(--col-linkC); font-family: inter-regular, calibri; font-size: .75rem;}