/* Bear Days */
@font-face {
font-family: 'bear-days';
font-style: normal;
src: url('fonts/bear-days.woff2') format('woff2'); }

/* billie-eilish */
@font-face {
font-family: 'billie-eilish';
font-style: normal;
src: url('fonts/billie-eilish.woff2') format('woff2'); }

/* cafe-matcha */
@font-face {
font-family: 'cafe-matcha';
font-style: normal;
src: url('fonts/cafe-matcha.woff2') format('woff2'); }

/* catfiles */
@font-face {
font-family: 'catfiles';
font-style: normal;
src: url('fonts/catfiles.woff2') format('woff2'); }

/* goblin-one */
@font-face {
font-family: 'goblin-one';
font-style: normal;
src: url('fonts/goblin-one.woff2') format('woff2'); }

/* lemon-days */
@font-face {
font-family: 'lemon-days';
font-style: normal;
src: url('fonts/lemon-days.woff2') format('woff2'); }

/* popping-cute */
@font-face {
font-family: 'popping-cute';
font-style: normal;
src: url('fonts/popping-cute.woff2') format('woff2'); }

/* silvano-western */
@font-face {
font-family: 'silvano-western';
font-style: normal;
src: url('fonts/silvano-western.woff2') format('woff2'); }

/* yay-holiday */
@font-face {
font-family: 'yay-holiday';
font-style: normal;
src: url('fonts/yay-holiday.woff2') format('woff2'); }

figure img {
inline-size: 100%;
max-inline-size: 100%; }

main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-r);
margin-trim: block;
margin-block: var(--spacing-m) var(--spacing-l); }

@media screen and (min-width: 48em) {
main {
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
}

article {
margin-block-end: var(--spacing-r);
padding-block: var(--spacing-r); }

@media screen and (min-width: 48em) {
article {
display: grid;
grid-template-columns: 320px 1fr;
gap: 0 1.5rem;
align-items: end; }
}

#svg-container {
position: relative; }

#svg-container button {
position: absolute;
top: 10px;
right: 10px;
display: inline-block;
margin: 0;
padding: 5px 7px;
background-color:transparent;
border: 1px solid var(--color-text-alt);
border-radius: 5px;
font-family: inherit;
font-size: 12px;
line-height: 1;
text-transform: uppercase;
text-decoration: none;
color: var(--color-text-alt);
text-align: center;
cursor: pointer; }

/* controls */

.alt-controls {
display: grid;
gap: var(--spacing-r);
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

@media (max-width: 768px) {
.alt-controls {
grid-template-columns: 1fr; }
}

/* boxes */

.alt-controls-item {
margin-block-end: var(--spacing-r); }

.alt-controls-item h3 {
margin-block: 0 var(--spacing-s); }

/* buttons */

.preset-btn {
background-color: transparent !important;
border: none !important;
cursor: pointer !important;
font-size: var(--font-size-2xl) !important;
padding: 0 !important; }

/* color */

.color-input-group {
align-items: center;
display: flex;
gap: var(--spacing-s); }

.color-input-group input[type="color"] {
flex: 0 0 2.5rem; }

.color-input-group input[type="text"] {
flex: 1; }

input[type="color"] {
block-size: 2.5rem;
inline-size: 2.5rem; }

/* checkboxes */

.checkbox-group {
align-items: center;
display: flex;
gap: var(--spacing-s);
margin-block-start: var(--spacing-s); }

.alt-label {
align-items: center;
display: flex;
gap: var(--spacing-s);
position: relative; }

.alt-checkbox input[type="checkbox"] {
display: none; }

.alt-checkbox label {
background-color: var(--color-text-default);
block-size: 21px;
border: 3px solid transparent;
border-radius: 5px;
cursor: pointer;
display: block;
inline-size: 21px;
position: relative;
transition: all var(--animate-duration-faster) var(--animate-function); }

.alt-checkbox input[type="checkbox"]:checked + label {
background-color: var(--color-accent); }

.alt-checkbox input[type="checkbox"]:checked + label::after {
align-items: center;
color: var(--color-text-alt);
content: "✓";
display: flex;
font-size: 18px;
height: 21px;
justify-content: center;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 21px; }

/* radios */

.radio-group {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-r);
margin-block-start: var(--spacing-s); }

.radio-option {
align-items: center;
cursor: pointer;
display: flex;
gap: var(--spacing-s); }

.radio-option input[type="radio"] {
margin: 0; }

/* shadows */

.shadow-controls {
display: grid;
gap: var(--spacing-r);
grid-template-columns: 1fr 1fr; }

.shadow-control:last-of-type{
grid-column: 1 / -1; }

#text-preview {
border: var(--border-width-l) dotted var(--color-border);
font-family: 'bear-days';
font-size: 10vw;
font-weight: 600;
line-height: 1;
padding: var(--spacing-r);
text-align: center;
transition: all 0.3s ease; }

#text-preview[contenteditable]:focus {
border-color: var(--color-text-default);
outline: none; }

/* code */

.code-tabs {
display: flex;
gap: var(--spacing-r);
margin-block-end: var(--spacing-r); }

.code-content {
display: none; }

.code-content.active {
display: block; }

.code-container {
overflow-x: auto;
margin-block-end: var(--spacing-r); }