:root {
    --mw-bg-color-default: 0, 0, 0;
    --mw-bg-color-dark-grey: 34, 34, 34;
    --mw-bg-color-grey: 68, 68, 68;
    --mw-txt-color-grey: 150, 147, 143;
    --mw-txt-color-light-grey: 181, 180, 178;
    --mw-txt-color-white-grey: 219, 212, 196;
    --mw-txt-color-red: 250, 59, 2;
    --mw-txt-color-yellow-orange: 207, 148, 13;
    --mw-txt-color-gold: 153, 130, 95;
    --mw-txt-color-error: 194, 174, 44;
}

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

/* ------------ FONTS ------------- */
@font-face {
    font-family: 'FiraCode';
    src: url('/fonts/FiraCode-Regular.woff2') format('woff2'),
         url('/fonts/FiraCode-Regular.woff')  format('woff');
    font-weight: normal;
    font-style: normal;
}

body, html {
    font-family: "FiraCode";
    height: 100vh;
}

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

.right-top-overlay, .right-bottom-overlay {
    position: fixed;
    display: flex;
    width: 100vw;
    justify-content: space-evenly;
}

@media (min-width: 50rem) {
    .right-top-overlay, .right-bottom-overlay {
        justify-content: right;
    }
    .right-top-overlay {
        gap: 14.2vw;
    }
}

.right-top-overlay {
    top: 0;
}

.mobile-menu-button {
    display: none;
    margin-top: 1.7rem;
    margin-left: 0.5rem;
    font-size: 1.5rem;
    cursor: pointer;
    background: none;
    border: none;
    color: rgb(var(--mw-txt-color-grey));
}

@media (max-width: 50rem) {
    .mobile-menu-button {
        display: block;
    }
}

.social-icons {
    display: flex;
    gap: 1.5rem;
    margin-top: 2rem;
}
.social-icons svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: rgb(var(--mw-txt-color-grey));
    transition: transform 0.3s ease, fill 0.3s ease;
}
.social-icons svg:hover {
    transform: scale(1.2); /* Hover effect */
}

/* language switcher */
.language-switcher {
    margin-top: 2.2rem;
    margin-right: 0.5rem;
    font-size: 0.9rem;
    color: rgb(var(--mw-txt-color-light-grey));
}
.lg-sw-short {
    display: none;
}
@media (max-width: 50rem) {
    .lg-sw-short {
        display: block;
    }
    .lg-sw-long {
        display: none;
    }
}
@media (min-width: 50rem) {
    .language-switcher {
        margin-right: 2rem;
    }
}

.language-switcher a {
    text-decoration: none;
    color: inherit;
}

/* footer */
.right-bottom-overlay {
    bottom: 0;
}

.footer-box {
    position: relative;
    margin-right: 17vw;
    margin-bottom: 2rem;
    margin-top: 1rem;
    display: flex;
    gap: 2rem;
}
@media (max-width: 50rem) {
    .footer-box {
        margin-right: auto;
        margin-left: auto;
    }
}

.footer-text {
    font-size: 1.1rem;
    color: rgb(var(--mw-txt-color-grey));
}