* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    list-style: none;
    font-family: var(--main-font);
    font-weight: 400;
    text-decoration: none;
    color: var(--grey-color-1);
}

:root {
    --text-color-dark: #222;
    --text-color-light: #FFF;
    --dark-color-1: #0B0B0B;
    --dark-color-2: #1d1d1d;
    --dark-color-3: #303030;
    --grey-color-1: #858585;
    --main-color: #DAB68E;
    --main-color-pale: #fbe7cf;
    --main-color-dark: #c7a37a;
    --line-color: #ffffff85;
    --container: 640px;
    --main-font: 'Onest', Arial, sans-serif;
    --second-font: 'Yeseva One', Arial, sans-serif;
}

html {
    background-color: var(--dark-color-1);
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-thumb {
    background: var(--dark-color-3);
    border-radius: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--dark-color-2);
    border-radius: 10px;
    margin: 10px;
}

.container {
    width: var(--container);
    margin: 0 auto;
}

a {
    cursor: pointer;
}

button {
    border: none;
    background-color: unset;
    cursor: pointer;
}

.btn {
    --size: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 5px;
    transition-duration: .2s;
    font-weight: 400;
    font-size: 16px;
    min-height: var(--size);
    font-family: var(--main-font);
}

.btn:active {
    transform: scale(.9);
}

.btn span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: inherit;
    font-family: inherit;
}

.btn img, 
.btn svg {
    width: calc(var(--size) / 2);
    height: calc(var(--size) / 2);
}

.btn:not(:has(span)) {
    min-width: var(--size);
}

.btn.btn_light {
    border: 1px solid var(--main-color);
}

.btn.btn_light:hover {
    color: white;
    background-color: var(--main-color);
}

.btn.btn_fill {
    background-color: var(--main-color);
}

.btn.btn_fill:hover {
    background-color: var(--main-color-dark);
}

.btn.btn_dark {
    color: white;
    background-color: var(--dark-color-1);
}

.btn.btn_dark:hover {
    color: white;
    background-color: var(--dark-color-2);
}