@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans+Condensed:wght@200..900&display=swap');

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    overflow: hidden;
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
[type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

*,
*::after,
*::before {
    box-sizing: border-box;
    font-family: "Reddit Sans Condensed",
        sans-serif
}

html {
    font-size: 62.5%
}

body {
    font-weight: 400;
    min-height: 100vh;
    font-size: var(--font-size-5);
    color: var(--color-text);
    background: var(--color-bg);
    display: flex;
    flex-direction: column
}

fieldset {
    padding: 0;
    margin: 0;
    border: 0
}

a {
    text-decoration: none;
    transition: var(--transition-main);
    cursor: pointer;
    outline: transparent
}

button {
    outline: transparent;
    border: 0;
    transition: var(--transition-main);
    cursor: pointer
}

input {
    outline: transparent;
    border: 0;
    transition: var(--transition-main)
}

h1,
h2,
h3,
h4,
h5,
ul,
p {
    padding: 0;
    margin: 0
}

h1 {
    font-size: var(--font-size-1)
}

h2 {
    font-size: var(--font-size-2)
}

h3 {
    font-size: var(--font-size-3)
}

h4 {
    font-size: var(--font-size-4)
}

h5 {
    font-size: var(--font-size-5)
}

ul {
    list-style: none
}

p {
    font-size: var(--font-size-5)
}

b {
    color: var(--color-main);
    font-weight: 700
}

:root {
    --color-main: #485fc7;
    --color-text: black;
    --color-text-light: white;
    --color-bg: #f0f8ff;
    --color-bg-dark: black;
    --color-bg-dark-transparent: rgba(0, 0, 0, .75);
    --color-bg-light: white;
    --color-bg-lightdark: #ededed;
    --color-bg-lightdark-accent: #d9d9d9;
    --color-border: #989898;
    --color-rating: #EDDA2C;
    --color-delete: tomato;
    --color-facebook: #0165e1;
    --color-twitter: #1da1f2;
    --color-reddit: #ff4500;
    --color-telegram: #27a7e7;
    --color-whatsapp: #28d146;
    --color-linkedin: #0A66C2;
    --color-pinterest: #E60023;
    --font-size-extrabig: clamp(12rem, 18vw, 21rem);
    --font-size-0: clamp(5rem, 8vw, 6rem);
    --font-size-1: clamp(3.5rem, 6vw, 4.2rem);
    --font-size-2: clamp(2.4rem, 3vw, 2.8rem);
    --font-size-3: clamp(2rem, 2.1vw, 2.4rem);
    --font-size-4: clamp(1.6rem, 1.75vw, 2rem);
    --font-size-5: clamp(1.4rem, 1.4vw, 1.6rem);
    --font-size-6: clamp(1rem, 1vw, 1.2rem);
    --border-radius-main: 1rem;
    --border-radius-big: 1.5rem;
    --border-radius-small: .5rem;
    --transition-main: 150ms;
    --transition-slow: 300ms;
    --transition-superslow: 800ms;
    --border-main: .5px solid var(--color-border);
    --box-shadow-main: 0 0 10px 0 rgba(0, 0, 0, .25);
    --width-main-content: min(1200px, 100%);
    --width-main-content-for-fixed: min(1200px - 1.5em, 100% - 1.5em);
    --padding-main-content: 1.5em .75em;
    --padding-block: 1.5em 2.5em;
    --padding-button: .5em 2.5em;
    --padding-input: .5em 1.25em;
    --gap-block: 2em;
    --line-height-main: 1.9
}

@media screen and (width < 680px) {
    :root {
        --padding-block: 1em;
        --gap-block: 1.25em
    }
}

.main-footer {
    margin-top: 4rem;
    background: var(--color-bg-light);
    z-index: 2
}

.main-footer__content {
    position: relative;
    width: var(--width-main-content);
    margin: 0 auto;
    padding: var(--padding-main-content);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em
}

.main-footer__content .content__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1em;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%
}

.main-footer__content .content__row .language-chooser {
    margin-left: auto
}

@media screen and (width < 600px) {
    .main-footer__content .content__row .language-chooser {
        margin-left: 0
    }
}

.main-footer__content .content__row.mobile-view .language-chooser {
    display: none
}

.main-footer__content .content__row.mobile-view .language-chooser summary,
.main-footer__content .content__row.mobile-view .language-chooser label {
    font-size: var(--font-size-4)
}

@media screen and (width < 600px) {
    .main-footer__content .content__row.mobile-view .language-chooser {
        display: block
    }
}

.main-footer__content .content__row:last-child {
    margin-top: 1.75em
}

@media screen and (width < 600px) {
    .main-footer__content .content__row:last-child {
        justify-content: center
    }
}

.main-footer__content .content__row:last-child::after {
    content: "";
    position: absolute;
    font-size: inherit;
    top: -1.75em;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--color-bg-dark);
    opacity: .15
}

@media screen and (width < 600px) {
    .main-footer__content .content__row:last-child .language-chooser {
        display: none
    }
}

@media screen and (width < 600px) {
    .main-footer__content .content__row {
        justify-content: center;
        flex-direction: column
    }
}

.main-footer__content .content__row.center {
    justify-content: center
}

.main-footer__content .content__part.part_link {
    color: var(--color-text);
    font-size: var(--font-size-5)
}

.main-footer__content .content__part.part_link:hover,
.main-footer__content .content__part.part_link:focus-within:focus-visible {
    text-decoration: underline;
    text-decoration-color: var(--color-main)
}

.main-footer__content .content__part.part_rights {
    text-align: left;
    width: min(70%, 80rem)
}

@media screen and (width < 600px) {
    .main-footer__content .content__part.part_rights {
        width: auto;
        text-align: center
    }
}

.main-footer__content .content__part.part_contact-btn {
    color: var(--color-text);
    font-size: var(--font-size-5);
    background: none
}

.main-footer__content .content__part.part_contact-btn:hover,
.main-footer__content .content__part.part_contact-btn:focus-within:focus-visible {
    text-decoration: underline;
    text-decoration-color: var(--color-main)
}

.main-footer__content .content__part.part_contact-btn.disabled {
    display: none
}

@media screen and (width < 600px) {
    .main-footer__content .content__part:is(a, button) {
        font-size: var(--font-size-4) !important
    }
}

.main-footer .socials {
    margin-left: auto;
    flex-wrap: nowrap
}

.main-footer .socials a {
    font-size: var(--font-size-4)
}

@media screen and (width < 600px) {
    .main-footer .socials {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
        order: -1
    }

    .main-footer .socials a {
        font-size: var(--font-size-3)
    }
}

.contact-modal {
    transition: var(--transition-main);
    background: var(--color-bg-light);
    border-radius: var(--border-radius-main);
    border: var(--border-main);
    width: min(100%, 45rem);
    height: min(100%, 70rem)
}

.contact-modal::backdrop {
    background: rgba(0, 0, 0, .75)
}

.contact-modal__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
    width: 100%;
    height: 100%;
    position: relative
}

.contact-modal__content .content__titles .titles__title {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    font-size: var(--font-size-2);
    text-align: center
}

.contact-modal__content .content__titles .titles__subtitle {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    font-weight: 200;
    font-size: var(--font-size-4);
    text-align: center
}

.contact-modal__content .content__close {
    padding: none;
    font-size: var(--font-size-3);
    color: var(--color-text);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text);
    background: none;
    transition: var(--transition-main);
    position: absolute;
    top: 0;
    right: 0
}

.contact-modal__content .content__close svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.contact-modal__content .content__close:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.contact-modal__content .content__close * {
    z-index: 999
}

.contact-modal__content .content__close:hover:before,
.contact-modal__content .content__close:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.contact-modal__content .content__form {
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: stretch;
    flex-grow: 1;
    width: 100%
}

.contact-modal__content .content__form .g-recaptcha {
    margin-inline: auto
}

.contact-modal__content .content__form .form__field {
    display: flex;
    flex-direction: column;
    width: 100%
}

.contact-modal__content .content__form .form__field p {
    margin-left: 1em;
    font-size: var(--font-size-5)
}

.contact-modal__content .content__form .form__field input,
.contact-modal__content .content__form .form__field textarea {
    background: var(--color-bg-lightdark);
    border-radius: var(--border-radius-small);
    padding: var(--padding-input);
    color: var(--color-text)
}

.contact-modal__content .content__form .form__field input::-moz-placeholder,
.contact-modal__content .content__form .form__field textarea::-moz-placeholder {
    opacity: .75
}

.contact-modal__content .content__form .form__field input::placeholder,
.contact-modal__content .content__form .form__field textarea::placeholder {
    opacity: .75
}

.contact-modal__content .content__form .form__field input::-moz-placeholder,
.contact-modal__content .content__form .form__field textarea::-moz-placeholder {
    opacity: .65
}

.contact-modal__content .content__form .form__field input::placeholder,
.contact-modal__content .content__form .form__field textarea::placeholder {
    opacity: .65
}

.contact-modal__content .content__form .form__field textarea {
    resize: vertical;
    width: 100%;
    outline: transparent;
    border: 0;
    height: 15rem
}

.contact-modal__content .content__form .form__status {
    text-align: center;
    color: var(--color-text);
    width: 100%;
    padding: .75em;
    display: none;
    border-radius: var(--border-radius-main);
    font-weight: 400
}

.contact-modal__content .content__form .form__status span {
    text-align: center;
    display: none
}

.contact-modal__content .content__form .form__status[data-state=error] {
    background: tomato;
    display: block
}

.contact-modal__content .content__form .form__status[data-state=error] .status__error {
    display: block
}

.contact-modal__content .content__form .form__status[data-state=success] {
    background: #0ab50a;
    display: block;
    color: var(--color-text-light)
}

.contact-modal__content .content__form .form__status[data-state=success] .status__success {
    display: block
}

.contact-modal__content .content__form button {
    padding: var(--padding-button);
    font-size: var(--font-size-5);
    color: var(--color-text-light);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text-light);
    background: var(--color-main);
    transition: var(--transition-main);
    width: 100%;
    margin-top: auto;
    padding-block: .65em
}

.contact-modal__content .content__form button svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.contact-modal__content .content__form button:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.contact-modal__content .content__form button * {
    z-index: 999
}

.contact-modal__content .content__form button:hover:before,
.contact-modal__content .content__form button:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.language-chooser {
    cursor: pointer;
    width: 10em
}

.language-chooser option {
    padding: .35em .75em;
    background: var(--color-bg-light);
    border: var(--border-main);
    border-radius: var(--border-radius-main);
    overflow: hidden
}

.language-chooser option .icon {
    font-family: "Flag"
}

details summary::marker {
    display: none
}

.rad {
    display: none
}

.opt {
    display: none;
    cursor: pointer
}

[open] .opt,
.rad:checked+.opt {
    display: block
}

.as-console-wrapper {
    width: 50%;
    min-height: 100%;
    margin-left: 50%;
    font-variant: normal
}

.as-console-row.as-console-row::after {
    content: "";
    padding: 0;
    margin: 0;
    border: 0;
    width: 0
}

.language-chooser {
    position: relative;
    width: 12.5em;
    z-index: 9999;
    border: 0;
    padding: 0
}

.language-chooser__flag {
    width: 1.5em;
    border-radius: 2px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .25)
}

.language-chooser .language-chooser__arrow {
    transform: rotateX(180deg)
}

.language-chooser details[open] .language-chooser__arrow {
    transform: rotateX(0)
}

.language-chooser__arrow {
    width: 1em;
    position: absolute;
    right: .5em;
    top: 50%;
    translate: 0 -50%;
    transform-origin: center;
    transition: var(--transition-main)
}

.language-chooser fieldset {
    width: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    background: var(--color-bg-light);
    border-radius: var(--border-radius-main)
}

.language-chooser summary {
    width: 100%;
    outline: 0;
    list-style: none;
    padding: .75em;
    position: relative;
    background: var(--color-bg-light);
    border-radius: var(--border-radius-main)
}

.language-chooser label {
    padding: .35em .75em;
    box-shadow: none;
    margin: 0
}

.language-chooser label:hover {
    background: rgb(161, 161, 161)
}

.language-chooser label.disabled {
    pointer-events: none
}

.language-chooser label,
.language-chooser summary {
    display: flex !important;
    align-items: center;
    gap: 1em;
    font-weight: 500;
    font-size: var(--font-size-5);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.popover {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: calc(100% + 1.5rem);
    background: var(--color-bg-light);
    border: var(--border-main);
    border-radius: var(--border-radius-main);
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
    padding: .35em 0
}

.menu {
    position: relative;
    z-index: 99999999
}

.menu.active .menu__content {
    opacity: 1;
    -webkit-user-select: all;
    -moz-user-select: all;
    user-select: all;
    pointer-events: all
}

.menu__button {
    padding: .5em 1.25em;
    font-size: var(--font-size-5);
    color: var(--color-text);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text);
    background: var(--color-bg-light);
    transition: var(--transition-main);
    border: var(--border-main)
}

.menu__button svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.menu__button:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.menu__button * {
    z-index: 999
}

.menu__button:hover:before,
.menu__button:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.menu__button svg {
    font-size: var(--font-size-4)
}

.menu__content {
    background: var(--color-bg-light);
    box-shadow: 0 0 10px rgba(0, 0, 0, .25);
    border-radius: var(--border-radius-main);
    padding: 2rem;
    position: absolute;
    right: 0;
    top: calc(100% + 1rem);
    width: 30rem;
    transition: var(--transition-main);
    opacity: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none
}

.menu__content .content__wrapper {
    position: relative
}

.menu__content .content__wrapper .wrapper__nav {
    display: flex;
    flex-direction: column;
    gap: 2rem
}

.menu__content .content__wrapper .wrapper__nav .nav__main-links {
    display: flex;
    gap: .5em;
    align-items: stretch;
    width: 100%
}

.menu__content .content__wrapper .wrapper__nav .nav__main-links .main-links__link {
    padding: .5em;
    font-size: var(--font-size-5);
    color: var(--color-text);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text);
    background: var(--color-bg-lightdark);
    transition: var(--transition-main);
    flex: 1 1 100%;
    border: var(--border-main);
    flex-direction: column;
    gap: 1rem
}

.menu__content .content__wrapper .wrapper__nav .nav__main-links .main-links__link svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.menu__content .content__wrapper .wrapper__nav .nav__main-links .main-links__link:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.menu__content .content__wrapper .wrapper__nav .nav__main-links .main-links__link * {
    z-index: 999
}

.menu__content .content__wrapper .wrapper__nav .nav__main-links .main-links__link:hover:before,
.menu__content .content__wrapper .wrapper__nav .nav__main-links .main-links__link:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.menu__content .content__wrapper .wrapper__nav .nav__main-links .main-links__link svg {
    width: auto;
    height: 1.5em
}

.menu__content .content__wrapper .wrapper__nav .nav__links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%
}

.menu__content .content__wrapper .wrapper__nav .nav__links .links__el {
    width: 100%;
    position: relative
}

.menu__content .content__wrapper .wrapper__nav .nav__links .links__el:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(100% + .5rem);
    width: 100%;
    left: 0;
    height: 1px;
    background: var(--color-bg-dark);
    opacity: .15
}

.menu__content .content__wrapper .wrapper__nav .nav__links .links__el .el__btn {
    padding: 1em;
    font-size: var(--font-size-5);
    color: var(--color-text);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text);
    background: var(--color-bg-light);
    transition: var(--transition-main);
    width: 100%;
    justify-content: flex-start
}

.menu__content .content__wrapper .wrapper__nav .nav__links .links__el .el__btn svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.menu__content .content__wrapper .wrapper__nav .nav__links .links__el .el__btn:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.menu__content .content__wrapper .wrapper__nav .nav__links .links__el .el__btn * {
    z-index: 999
}

.menu__content .content__wrapper .wrapper__nav .nav__links .links__el .el__btn:hover:before,
.menu__content .content__wrapper .wrapper__nav .nav__links .links__el .el__btn:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.main-header__top-banner {
    background: var(--color-main);
    font-size: var(--font-size-4);
    padding: .5em;
    display: flex;
    align-items: center;
    justify-content: center
}

.main-header__top-banner p {
    text-align: center;
    color: var(--color-text-light);
    background: var(--color-text);
    padding: .35em 1em;
    border-radius: .25em
}

.main-header__top-banner p a {
    font-weight: 900;
    color: var(--color-text-light);
    text-decoration: underline;
    animation: gMove 20s linear infinite;
    background: linear-gradient(45deg, #e45cff, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #e45cff);
    transition: opactiy .3s ease-in-out;
    -webkit-background-clip: text;
    background-clip: text
}

.main-header .main-header__content {
    position: relative;
    width: var(--width-main-content);
    margin: 0 auto;
    padding: var(--padding-main-content);
    display: flex;
    align-items: center;
    gap: 1em;
    justify-content: space-between
}

.main-header__title {
    font-size: var(--font-size-2)
}

@keyframes gMove {
    0% {
        background-position: 0 0
    }

    50% {
        background-position: 400% 0
    }

    100% {
        background-position: 0 0
    }
}

.logo {
    position: relative;
    color: var(--color-text)
}

.logo .logo__img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    color: var(--color-text);
    display: grid;
    place-content: center;
    transition: var(--transition-main);
    font-size: var(--font-size-4);
    width: auto;
    height: 3.5em;
    max-width: 45vw
}

@media screen and (width < 800px) {
    .logo .logo__img {
        height: 2.35em
    }
}

.socials {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1em;
    flex-wrap: wrap
}

.socials__social {
    flex: 1 1 10%
}

.socials__social .social__wrapper {
    padding: var(--padding-button);
    font-size: var(--font-size-3);
    color: var(--color-text-light);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text-light);
    background: var(--color-main);
    transition: var(--transition-main);
    padding-inline: .5em
}

.socials__social .social__wrapper svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.socials__social .social__wrapper:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.socials__social .social__wrapper * {
    z-index: 999
}

.socials__social .social__wrapper:hover:before,
.socials__social .social__wrapper:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.socials__social.social_twitter .social__wrapper {
    background: var(--color-twitter)
}

.socials__social.social_facebook .social__wrapper {
    background: var(--color-facebook)
}

.socials__social.social_telegram .social__wrapper {
    background: var(--color-telegram)
}

.socials__social.social_reddit .social__wrapper {
    background: var(--color-reddit)
}

.socials__social.social_whatsapp .social__wrapper {
    background: var(--color-whatsapp)
}

.socials__social.social_linkedin .social__wrapper {
    background: var(--color-linkedin)
}

.socials__social.social_pinterest .social__wrapper {
    background: var(--color-pinterest)
}

.socials__social.socials_favourite .social__wrapper {
    background: var(--color-main)
}

.go-top {
    padding: .75em;
    font-size: var(--font-size-3);
    color: var(--color-text);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text);
    background: var(--color-bg-light);
    transition: var(--transition-main);
    position: fixed;
    bottom: 1em;
    right: .5em;
    border: var(--border-main);
    aspect-ratio: 1;
    box-shadow: var(--box-shadow-main);
    border-radius: 50%;
    z-index: 10;
    width: 2.5em
}

.go-top svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.go-top:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.go-top * {
    z-index: 999
}

.go-top:hover:before,
.go-top:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.go-top::before {
    border-radius: 50%
}

.go-top:not(.active) {
    translate: 0 50%;
    opacity: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none
}

.add-favourite {
    padding: .75em;
    font-size: var(--font-size-3);
    color: var(--color-text-light);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text-light);
    background: var(--color-main);
    transition: var(--transition-main);
    border: var(--border-main);
    aspect-ratio: 1;
    box-shadow: var(--box-shadow-main);
    border-radius: 50%;
    z-index: 10;
    width: 2.5em
}

.add-favourite svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.add-favourite:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.add-favourite * {
    z-index: 999
}

.add-favourite:hover:before,
.add-favourite:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.add-favourite::before {
    border-radius: 50%
}

.notify-modal {
    background: var(--color-bg-light);
    border-radius: var(--border-radius-big);
    border: var(--border-main);
    padding: 0;
    max-width: 100vw;
    transition: var(--transition-main);
    width: min(60rem, 100% - 2rem)
}

.notify-modal::backdrop {
    background: rgba(0, 0, 0, .75)
}

.notify-modal__content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1em
}

.notify-modal__content .content__title {
    font-size: var(--font-size-2);
    text-align: center;
    display: flex;
    align-items: center;
    gap: .5em;
    justify-content: center
}

.notify-modal__content .content__title svg {
    width: 1em;
    fill: #D2BE00;
    color: #D2BE00
}

.notify-modal__content .content__description {
    opacity: .6;
    font-size: var(--font-size-4);
    text-align: center
}

.notify-modal__content .content__actions {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    margin-top: 2em
}

.notify-modal__content .content__actions .actions__btn {
    padding: .6em 4em;
    font-size: var(--font-size-5);
    color: var(--color-text-light);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    text-align: center;
    z-index: 1;
    position: relative;
    font-weight: 400;
    fill: var(--color-text-light);
    background: var(--color-main);
    transition: var(--transition-main);
    white-space: nowrap
}

.notify-modal__content .content__actions .actions__btn svg {
    height: 1em;
    width: auto;
    fill: inherit;
    color: inherit;
    flex-shrink: 0
}

.notify-modal__content .content__actions .actions__btn:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: var(--transition-main);
    background: inherit;
    border-radius: var(--border-radius-small);
    z-index: -1
}

.notify-modal__content .content__actions .actions__btn * {
    z-index: 999
}

.notify-modal__content .content__actions .actions__btn:hover:before,
.notify-modal__content .content__actions .actions__btn:focus-within:focus-visible:before {
    filter: brightness(.8)
}

.notify-modal__content .content__actions .actions__btn:empty {
    display: none
}

.notify-modal__content .content__actions .actions__btn.no-btn {
    color: var(--color-text);
    background: var(--color-bg-lightdark)
}

.main-content {
    position: relative;
    width: 100%;
    padding-block: 1.5em;
    flex-grow: 1;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-block)
}

.main-content>* {
    margin: 0 auto;
    padding-inline: .75em;
    width: var(--width-main-content)
}

.main-content__advertisement:empty {
    display: none
}

.big-text {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-align: justify;
    line-height: var(--line-height-main)
}

.big-text>* {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto
}

.big-text p {
    line-height: var(--line-height-main)
}

.big-text p,
.big-text li,
.big-text ol,
.big-text img,
.big-text blockquote {
    margin-block: .5em
}

.big-text blockquote {
    position: relative;
    background: var(--color-bg-dark);
    margin: 0;
    padding: 2em 2em;
    color: var(--color-text-dark) !important;
    padding-left: 3.5em
}

.big-text blockquote::before {
    content: url(../../../images/quote-left-solid.svg);
    position: absolute;
    left: .5em;
    top: .5em;
    display: block;
    width: 2em
}

.big-text li::marker {
    color: var(--color-main)
}

.big-text li:not(:first-of-type) {
    margin-top: 1em
}

.big-text ol {
    margin-left: 1.5em;
    list-style: none;
    padding: 0;
    counter-reset: section
}

.big-text ol li {
    position: relative;
    padding-left: 2.5em;
    counter-increment: section
}

.big-text ol li::before {
    content: counter(section);
    color: var(--color-text);
    position: absolute;
    width: 2em;
    border: 3px solid var(--color-main);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    top: .5em;
    left: 0;
    font-size: var(--font-size-5);
    translate: 0 -50%
}

.big-text ul {
    list-style: square;
    margin-left: 4em
}

@keyframes errorAnimation {
    0% {
        transform: translate(30px)
    }

    20% {
        transform: translate(-30px)
    }

    40% {
        transform: translate(15px)
    }

    60% {
        transform: translate(-15px)
    }

    80% {
        transform: translate(8px)
    }

    100% {
        transform: translate(0)
    }
}

@keyframes loadingAnimation {
    0% {
        left: -20px
    }

    100% {
        left: calc(100% + 20px)
    }
}