:root {
    --color-primary: #556484;
    --color-primary-dark: #464c5b;
    --color-primary-light: #d8e6f5;
    --color-contrast: #d8a31a;
    --color-background: #e2f1ff;
}

body:lang(sv) p:lang(en) { display: none; }
body:lang(en) p:lang(sv) { display: none; }
body:lang(sv) p:has([lang]):lang(sv) { display: block; }
body:lang(en) p:has([lang]):lang(en) { display: block; }


body {
    background-color: var(--color-background);
    color: var(--color-primary-dark);
    width: min-content;
    overflow-x: hidden;
}

header, main {
    position: relative;
    width: 100%;
    padding: 0rem;
    padding-left: .5em;
    font-family: 'Fira Sans Extra Condensed', serif;
}

header #lang-select {
    margin: 0.3em 0px;
    width: 5rem;
}

section {
    font-size: 14px;
    line-height: 170%;
}

/* ALL LINKS will be subtle, no need to highlight them */
a {
    color: var(--color-primary-dark);
    text-decoration: none;
}

a:hover {
    color: var(--color-contrast);
    text-decoration: underline;
}

em {
    font-style: normal;
    font-weight: bold;
    color: var(--color-contrast);
}

.name {
    color: var(--color-contrast);
}

.square {
    float:right;
}

.url {
    font-weight: bold;
    color: var(--color-primary);
}

h1 {
    position: relative;
    left: 0;
    font-family: 'Ovo', serif;
    color: var(--color-primary);
    font-size: 52px;
    padding-bottom: 0.1em;
    margin-bottom: 0.1em;
    margin-top: 1em;
}

div.illustration {
    z-index: -10;
    color: var(--color-primary-light);
    font-family: 'Ovo', serif;
    position: absolute;
}

div.illustration.slash {
    top: -14%;
    left: -8%;
    font-size: 120px;
    font-weight: bolder;
    letter-spacing: -0.1em;
}

div.illustration.at {
    top: -15%;
    left: 7%;
    text-align: center;
    font-size: 320px;
}

@media screen and (min-width: 480px) {
    body {
        width: min-content;
        margin: 0 auto;
    }
    main {
        padding-left: 50%;
        width: min-content;
    }
    h1 {
        font-size: calc(52px + (180 - 52) * ((100vw - 480px) / (1280 - 480)));
        left: -50%;
    }
    section {
        font-size: calc(14px + (24 - 14) * ((100vw - 480px) / (1280 - 480)));
        width: 53%;
    }
    div.illustration.at {
        font-size: calc(320px + (760 - 320) * ((100vw - 480px) / (1280 - 480)));
    }
    div.illustration.slash {
        font-size: calc(120px + (300 - 120) * ((100vw - 480px) / (1280 - 480)));
    }
}

@media screen and (min-width: 1280px) {
    h1 {
        font-size: 180px;
    }
    section {
        font-size: 24px;
    }
    div.illustration.slash {
        font-size: 300px;
    }
    div.illustration.at {
        font-size: 760px;
    }
}

@media screen and (max-width: 710px) {
    span.scheme {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    div.illustration.slash {
        display: none;
    }
    div.illustration.at {
        top: -30%;
        left: 0%;
    }
}