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

/* Variables */
:root {
    --theme-transition: all 0.3s ease-in-out;

    --bg-dark: hsl(190 100% 1%);
    --bg: hsl(186 100% 3%);
    --bg-light: hsl(184 100% 6%);

    --text: hsl(184 100% 88%);
    --text-muted: hsl(184 39% 62%);

    --highlight: hsl(184 49% 31%);
    --border: hsl(183 100% 16%);
    --border-muted: hsl(184 100% 7%);

    --primary: hsl(184 54% 57%);
    --secondary: hsl(2 67% 75%);
    --danger: hsl(9 37% 65%);
    --warning: hsl(52 26% 54%);
    --success: hsl(147 24% 57%);
    --info: hsl(217 40% 66%);

    --ff: "Inter", serif;
    --ff2: "Science Gothic", serif;

    --p: 1rem/1.5em var(--ff);
    --p-bold: 600 1rem/1.5em var(--ff);

    --h1: 600 3rem/1.2em var(--ff2);
    --h2: 600 2rem/1.2em var(--ff2);

    --spacing1: 4px;
    --spacing2: 8px;
    --spacing3: 16px;
    --spacing4: 20px;
    --spacing5: 40px;
    --spacing6: 80px;
    --spacing7: 160px;

    --media-width: 768px;
}

:root.light {
    --bg-dark: hsl(184 100% 98%);
    --bg: hsl(184 100% 96%);
    --bg-light: hsl(184 100% 93%);

    --text: hsl(184 100% 12%);
    --text-muted: hsl(184 39% 38%);

    --highlight: hsl(184 49% 69%);
    --border: hsl(184 100% 75%);
    --border-muted: hsl(184 100% 88%);

    --primary: hsl(184 54% 43%);
    --secondary: hsl(2 67% 45%);
    --danger: hsl(9 37% 35%);
    --warning: hsl(52 26% 34%);
    --success: hsl(147 24% 37%);
    --info: hsl(217 40% 36%);
}

/* Global Styles */
html {
    scroll-behavior: smooth;
}

body {
    text-wrap: balance;
    font: var(--p);
    background: var(--bg);
    color: var(--text);
    transition: var(--theme-transition);
}

h1 {
    font: var(--h1);
}

h2 {
    font: var(--h2);
    margin: var(--spacing2) 0;
}

p {
    margin: var(--spacing2) 0;
}

a {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 4px;
}

a:hover {
    color: var(--primary);
}

/* buttons */
.cta {
    padding: var(--spacing4) var(--spacing5);
    text-decoration: none;
    border-radius: var(--spacing4);
    font: var(--p-bold);
    transition: background-color 0.3s;
    text-align: center;
}

.cta-primary {
    background-color: var(--highlight);
    color: var(--text);
    border: 2px solid var(--border);
}

.cta-primary:hover {
    background-color: var(--primary);
    color: white;
}


.cta-secondary {
    color: var(--text-muted);
    border: 2px solid var(--border);
}

.cta-secondary:hover {
    background-color: var(--primary);
    color: white;
}

.btn,
button {
    all: unset;
    display: inline-block;
    margin: var(--spacing2) 0;
    background: var(--text);
    padding: var(--spacing2) var(--spacing3);
    color: var(--bg);
    border-radius: var(--spacing2);
    border-bottom: solid var(--spacing1) var(--primary);
    font: var(--p);
    cursor: pointer;
}

.btn:hover,
button:hover {
    background: linear-gradient(180deg, var(--text), var(--text-muted));
    transition: 0.3s ease-in-out;
}

img {
    width: 100%;
}

/* Utility Classes */
section {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
    padding-top: var(--spacing6);
    padding-bottom: var(--spacing6);
}

.center {
    text-align: center;
}

.hidden {
    display: none;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing4);
    flex-wrap: wrap;
}

.flex>* {
    flex: 1;
    min-width: 400px;
}

.reverse {
    flex-direction: row-reverse;
}

.padding1 {
    padding: var(--spacing1) 0;
}

.padding2 {
    padding: var(--spacing2) 0;
}

.padding3 {
    padding: var(--spacing3) 0;
}

.padding4 {
    padding: var(--spacing4) 0;
}

.padding5 {
    padding: var(--spacing5) 0;
}

.padding6 {
    padding: var(--spacing6) 0;
}

.padding7 {
    padding: var(--spacing7) 0;
}

.margin1 {
    margin: var(--spacing1) auto;
}

.margin2 {
    margin: var(--spacing2) auto;
}

.margin3 {
    margin: var(--spacing3) auto;
}

.margin4 {
    margin: var(--spacing4) auto;
}

.margin5 {
    margin: var(--spacing5) auto;
}

.margin6 {
    margin: var(--spacing6) auto;
}

.margin7 {
    margin: var(--spacing7) auto;
}

body[data-current-lang="en"] .i18n:not([lang="en"]) {
    display: none;
}

body[data-current-lang="sv"] .i18n:not([lang="sv"]) {
    display: none;
}

body[data-current-lang="sr"] .i18n:not([lang="sr"]) {
    display: none;
}

/* Och kom ihåg att dölja elementen initialt innan JS hinner ladda */
/* Välj standard-språket här. T.ex. dölj engelska om sv är default: */
body:not([data-current-lang]) .i18n:not([lang="sv"]) {
    display: none;
}

@media (max-width: 768px) {
    h1 {
        font: 400 2rem/1.2em "Science Gothic", serif;
    }

    h2 {
        font: 400 1.3rem/1.2em "Science Gothic", serif;
    }

    p {
        font: 1rem/1.5em "Inter", serif;
    }
}