*,
:before,
:after {
    box-sizing: border-box
}

:where(ul, ol):where([class]) {
    padding-left: 0
}

body,
:where(blockquote, figure):where([class]) {
    margin: 0
}

:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl):where([class]) {
    margin-block: 0
}

:where(dd[class]) {
    margin-left: 0
}

:where(fieldset[class]) {
    margin-left: 0;
    padding: 0;
    border: none
}

:where(ul[class]) {
    list-style: none
}

:where(address[class]) {
    font-style: normal
}

p {
    --paragraphMarginBottom: 24px;
    margin-block: 0
}

p:where(:not([class]):not(:last-child)) {
    margin-bottom: var(--paragraphMarginBottom)
}

img,
video {
    display: block;
    max-width: 100%;
    height: auto
}

input,
textarea,
select,
button {
    font: inherit
}

html {
    height: 100%;
    scrollbar-gutter: stable
}

html,
:has(:target) {
    scroll-behavior: smooth
}

body {
    min-height: 100%;
    line-height: 1.5
}

a:where([class]) {
    display: inline-flex
}

button,
label {
    cursor: pointer
}

[fill] {
    fill: currentColor
}

[stroke] {
    stroke: currentColor
}

svg * {
    transition-property: fill, stroke
}

:where(table) {
    border-collapse: collapse;
    border-color: currentColor
}

@media (prefers-reduced-motion: reduce) {

    *,
    :before,
    :after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }
}

@font-face {
    font-family: Inter;
    src: url(Inter-Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Inter;
    src: url(Inter-Medium.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Inter;
    src: url(Inter-Bold.woff2) format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Inter;
    src: url(Inter-Extra-Bold.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

:root {
    --color-light: #ffffff;
    --color-light-alt: #ebebeb;
    --color-dark: #000000;
    --color-dark-alt: rgb(42, 42, 42);
    --color-dark-gray: #696969;
    --color-medium-gray: rgb(155, 154, 154);
    --color-light-gray: #c0c0c0;
    --font-family-base: "Inter", sans-serif;
    --border: ;
    --border-radius: ;
    --shadow-dark: 0 2px 6px rgba(0, 0, 0, .1);
    --shadow-light: 0 2px 6px rgba(255, 255, 255, .08);
    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, .1);
    --input-height: ;
    --button-height: ;
    --header-height: 50px;
    --container-width: 700px;
    --transition-duration: .2s;
    --gray-100: #f7fafc;
    --gray-200: #edf2f7;
    --gray-300: #e2e8f0;
    --gray-400: #cbd5e0;
    --gray-500: #a0aec0;
    --gray-600: #718096;
    --gray-700: #4a5568;
    --gray-800: #2d3748;
    --gray-900: #1a202c;
    --gray-950: #0f1117;
    --gray-975: rgb(17, 19, 24)
}

.container {
    max-width: calc(var(--container-width) + var(--container-padding-x) * 2);
    margin-inline: auto;
    padding-inline: var(--container-padding-x)
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    border: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    clip-path: inset(100%) !important;
    clip: rect(0 0 0 0) !important;
    overflow: hidden !important
}

@media (max-width: 767px) {
    .hide-mobile {
        opacity: 0;
        pointer-events: none
    }
}

.hover-effect {
    transition-property: opacity;
    transition-duration: var(--transition-duration)
}

@media (hover: hover) {
    .hover-effect:hover {
        opacity: .7
    }
}

@media (hover: none) {
    .hover-effect:active {
        opacity: .7
    }
}

@media (max-width: 767px) {
    .hidden-mobile {
        display: none !important
    }
}

@media (min-width: 768px) {
    .visible-mobile {
        display: none !important
    }
}

body {
    font-size: clamp(16px, 1.1538461538vw, 18px) !important;
    font-family: var(--font-family-base);
    font-weight: 400;
    line-height: 1.28;
    color: var(--color-dark);
    background-color: var(--color-light-alt);
    transition-duration: var(--transition-duration)
}

body.dark-theme {
    background-color: var(--color-dark)
}

a,
button,
input,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
svg * {
    transition-duration: var(--transition-duration)
}

button {
    padding: 0;
    background-color: transparent;
    border: none
}

a {
    color: inherit;
    text-decoration: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: 1;
    color: var(--color-dark);
    margin: 0
}

h1,
.h1 {
    font-size: clamp(220px, 16.0256410256vw, 250px) !important
}

h2,
.h2 {
    font-size: clamp(35px, 2.8846153846vw, 45px) !important
}

h3,
.h3 {
    font-size: clamp(20px, 1.6025641026vw, 25px) !important
}

h4,
.h4 {
    font-size: clamp(14px, 1.2820512821vw, 20px) !important
}

.counter-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background-color: transparent;
    width: 80px;
    height: 80px;
    --counterButtonShadow: 0 2px 6px rgba(0, 0, 0, .1);
    flex-shrink: 0;
    background-color: var(--color-light-gray);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--counterButtonShadow);
    user-select: none;
}

.counter-button--light-shadow {
    --counterButtonShadow: 0 2px 6px rgba(255, 255, 255, .08), 0 4px 12px rgba(255, 255, 255, .03)
}

@media (hover: hover) {
    .counter-button:hover {
        background-color: var(--color-medium-gray)
    }
}

@media (hover: none) {
    .counter-button:active {
        background-color: var(--color-medium-gray)
    }
}

.counter-button:active {
    transition-property: opacity;
    transition-duration: var(--transition-duration)
}

@media (hover: hover) {
    .counter-button:active:hover {
        opacity: .7
    }
}

@media (hover: none) {
    .counter-button:active:active {
        opacity: .7
    }
}

.counter-button svg {
    width: 70%;
    height: 70%
}

.config {
    transition-property: opacity;
    transition-duration: var(--transition-duration)
}

@media (hover: hover) {
    .config:hover {
        opacity: .7
    }
}

@media (hover: none) {
    .config:active {
        opacity: .7
    }
}

.config {
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    --configSVGColor: var(--gray-700);
    display: flex;
    border-radius: 50%;
    overflow: hidden
}

.config--light {
    --configSVGColor: var(--gray-400)
}

.config svg {
    width: 80%;
    height: 80%;
    color: var(--configSVGColor);
    stroke-width: 2
}

.header {
    display: flex;
    justify-content: center;
    padding: 20px 5px
}

.header__inner {
    display: flex;
    justify-content: center;
    max-width: 500px;
    width: 100%;
    padding: 8px;
    border-radius: 20px
}

.counter-display {
    margin-top: 60px;
    margin-bottom: auto
}

.counter-display--light {
    color: var(--color-light)
}

.content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 50px
}

.App {
    display: flex;
    flex-direction: column;
    height: 100vh
}

.controls {
    display: flex;
    align-items: center;
    column-gap: 50px;
    margin-bottom: 60px
}

.configurations {
    display: flex;
    align-items: center;
    column-gap: 20px
}

.counter-name {
    margin-top: 20px
}

@media (max-width: 767px) {
    .counter-name {
        margin-top: 30px
    }
}

.counter-name__input {
    font-size: clamp(22px, 1.6666666667vw, 26px) !important;
    padding-block: 5px;
    text-align: center;
    border: none;
    border-radius: 10px;
    background-color: transparent
}

.counter-name__input--dark {
    color: var(--color-light)
}

@media (hover: hover) {
    .counter-name__input--dark:hover {
        background-color: var(--color-dark-alt) !important
    }
}

@media (hover: none) {
    .counter-name__input--dark:active {
        background-color: var(--color-dark-alt) !important
    }
}

@media (hover: hover) {
    .counter-name__input:hover {
        background-color: var(--color-light)
    }
}

@media (hover: none) {
    .counter-name__input:active {
        background-color: var(--color-light)
    }
}

.counter-name__input:focus {
    outline: none
}