/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
        margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
        html {
                interpolate-size: allow-keywords;
        }
}

body {
        /* 4. Increase line-height */
        line-height: 1.5;
        /* 5. Improve text rendering */
        -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
        display: block;
        max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
        font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
        overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
        text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
        text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root,
#__next {
        isolation: isolate;
}

/* custom css resets */

ul {
        all: unset;
}


/* custom */

@font-face {
        font-family: 'Courier Prime';
        src: url('fonts/CourierPrime-Regular.ttf');
        font-weight: normal;
}

@font-face {
        font-family: 'Courier Prime';
        src: url('fonts/CourierPrime-Bold.ttf');
        font-weight: bold;
}

@font-face {
        font-family: 'Geo Courier';
        src: url('fonts/geo_courier.ttf');
        font-weight: normal;
}

*,
*::before,
*::after {
        font-family: "Courier Prime", "Geo Courier", monospace;
}

body {
        max-width: 600px;
        margin: auto;
        padding-block: 5rem;
        padding-inline: 1rem;

        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
}

header {
        display: flex;
        flex-direction: column;
        gap: 2rem;
}

a {
        color: black;
}

.logo {
        text-decoration: none;
        font-size: 1rem;
        font-weight: normal;
}

.main-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
}

.main-nav-ul {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        list-style: none;
}

.navlink {
        color: rgb(77, 77, 77);
}

.navlink:hover {
        color: black;
}

.lang-picker {
        display: flex;
        align-items: center;
        list-style: none;
        gap: 1rem;
        padding-right: 1.2rem;
}

.lang-btn {
        all: unset;
        cursor: pointer;
        color: rgb(77, 77, 77);
}

.lang-btn:hover {
        color: black;
}

.body-wrapper {
        padding-bottom: 4rem;
        display: flex;
        flex-direction: column;
        gap: 4rem;
}

main {
        display: flex;
        flex-direction: column;
        gap: 3rem;
}

article {
        font-size: 0.90rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        color: black;
}

h1, h2 {
        font-size: 0.9rem;
}

.manifesto {
        display: flex;
        flex-direction: column;
        gap: 1.25em;
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.skip-link:focus {
  position: fixed;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  opacity: 1;
}

@media (max-width: 600px) {
        .main-nav {
                flex-direction: column;
                align-items: flex-start;
                gap: 2rem;
        }

        .main-nav-ul {
                flex-direction: column;
                align-items: flex-start;
                list-style: disc;
                gap: 1rem;
                list-style-position: inside;
        }
}