* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #88313E;
    --text-light: white;
    --hover-bg: #631324;
}

.top-nav-bar {
    background-color: var(--primary-color);
    padding: 12px 0;
}

.top-nav-content {
    display: flex;
    width: 90%;
    /* border: white 1px solid; */
    margin: auto;
    justify-content: space-between;
    align-items: center;
}

.top-nav-contact {
    color: var(--text-light);
    display: flex;
    gap: 7px;
}

.top-nav-utilities {
    display: flex;
    width: 230px;
    justify-content: space-between;
    align-items: center;
}

.top-nav-font-sizer-large,
.top-nav-font-sizer-medium,
.top-nav-font-sizer-small {
    text-decoration: none;
    padding: 0 3px;
    color: var(--text-light);
}

.top-nav-font-sizer-large {
    font-size: 22px;
}

.top-nav-font-sizer-medium {
    font-size: 18px;
}

.top-nav-font-sizer-small {
    font-size: 14px;
}

.top-nav-lang-switch {
    display: flex;
    gap: 3px;
}

.top-nav-lang-btn {
    padding: 5px 9px;
    border: none;
    border-radius: 3px;
    background-color: var(--text-light);
    color: var(--primary-color);
    transition: background-color 0.5s, color 0.5s;
}

.top-nav-lang-btn:hover {
    background-color: var(--hover-bg);
    color: white;
}

@media (max-width: 1024px) {
    .top-nav-utilities {
        display: flex;
    }
}

@media (max-width: 768px) {
    .top-nav-contact {
        display: none;
    }

    .top-nav-utilities {
        margin: auto;
    }

}

@media (max-width: 425px) {
    .top-nav-font-sizer {
        display: none;
    }

}