/*
 Copyright (c) 2024 Dimakopoulos Theodoros <dimakopt732@gmail.com>
 See LICENSE.
 Search for the string "*---" in this file to jump to sections.
*/


/*--- Colors ---*/

:root { color-scheme: light dark; }

[data-sch=light] {
    --cbg: #fff; --c-border: #bbb; --c-faded-border: #ddd;
    --ca: #025; --cavisited: #302; --cabg: #fff;
    --c1: #000; --c2: #111; --c3: #222; --c4: #333; --c5: #444; --c6: #444;
    --code-bg: #fff; --code-border: #fff;
    --code1: #333; --code2: #004; --code3: #044;
}
[data-sch=dark] {
    --cbg: #252528; --c-border: #505055; --c-faded-border: #383840;
    --ca: #bcf; --cavisited: #dcd; --cabg: #202024;
    --c1: #eee; --c2: #ddd; --c3: #ccc; --c4: #bbb; --c5: #bbb; --c6: #bbb;
    --code-bg: #202024; --code-border: #303033;
    --code1: #d0d0d0; --code2: #d0a080; --code3: #d0b8a0;
}
[data-sch=contr] {
    --cbg: #000; --c-border: #333; --c-faded-border: #111;
    --ca: #ff0; --cavisited: #ffa; --cabg: #000;
    --c1: #eee; --c2: #ddd; --c3: #ccc; --c4: #bbb; --c5: #bbb; --c6: #bbb;
    --code-bg: #000; --code-border: var(--c-border);
    --code1: #fff; --code2: #ff0; --code3: #ffa;
}


/*--- Lengths ---*/

:root {
    --e2: 0.8em;
    --e3: 1.4em;
    --e4: 2em;
    --e5: 3em;
    --r5: 0.6rem;
    --a1: 1.4cm;
    --a2: 1.8cm;
    --a3: 2.2cm;
}
@media (min-width: 20cm) {
    :root {
        --a1: 2cm;
        --a2: 3cm;
        --a3: 4cm;
    }
}


/*--- Fonts ---*/

:root {
    --fs1: 12pt; --lh1: 1.4em;
    --fs2: 14pt; --lh2: 1.4em;
    --fs3: 18pt; --lh3: 1.2em;
    --fs4: 24pt; --lh4: 1.1em;
    --fs5: 28pt; --lh5: 1em;
    --fs6: 32pt; --lh6: 1em;
}
@media (min-width: 20cm) {
    :root {
        --fs6: 38pt; --lh6: 1em;
    }
}


div.card > section > p.not-subtitle,
header > fieldset > legend > span {
    font-size: var(--fs1);
    line-height: var(--lh1);
    color: var(--c1);
}
body {
    font-size: var(--fs2);
    line-height: var(--lh2);
    color: var(--c2);
}
div.card > section > p.subtitle,
header > h1 {
    font-size: var(--fs3);
    line-height: var(--lh3);
    color: var(--c3);
}
h2,
ul.xx > li::marker,
section.values > ol > li > big {
    font-size: var(--fs4);
    line-height: var(--lh4);
    color: var(--c4);
}
div.card > section > h2 {
    font-size: var(--fs6);
    line-height: var(--lh6);
    color: var(--c6);
}


/*--- Class independent styling ---*/

body {
    font-family: system-ui,sans-serif;
    margin: 0;
    background-color: var(--cbg);
}

a { text-underline-offset: 0.3em; color: var(--ca); }
a:visited { color: var(--cavisited); }
input, label { cursor: pointer; }


/*--- Code snippets ---*/

pre.code1 {
    overflow-x: scroll;
    padding: 1em;
    background-color: var(--code-bg);
    border: 1px solid var(--code-border);
    color: var(--code1);
    box-sizing: border-box;
}
@media (min-width: 25cm) {
    pre.code1 {
        border-radius: 5px;
        width: 50vw;  /* if the grid changes, this will cause trouble */
    }
}
[data-sch=light] pre.code1 {
    box-shadow: 0 2px 8px -4px;
}
pre.code1 b { color: var(--code2); font-weight: normal; }
pre.code1 i { color: var(--code3); font-style: normal; }
pre.code1 > code {
    font-size: var(--fs1);
    line-height: var(--lh1);
}


/*--- From my widgets template ---*/

fieldset.inp-pill-choice {
    border: none;
    padding: 0;
    margin: 0.5em 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
fieldset.inp-pill-choice > legend {
    padding: calc(0.2em + 4px) 0;
    padding-right: 0.8em;
    float: left;
}
fieldset.inp-pill-choice > ol {
    list-style: none;
    padding: 2px;
    margin: 0;
    display: inline-block;
    border-radius: 4px;
    border: 1px solid var(--c-border);
}
fieldset.inp-pill-choice > ol > li {
    display: inline-block;
}
fieldset.inp-pill-choice > ol > li > label {
    padding: 0.2em 0.8em;
    position: relative;
    display: inline-block;
}
@supports (appearance: none) {
    fieldset.inp-pill-choice > ol > li > label > input[type="radio"] {
        appearance: none;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        border-radius: 4px;
        margin: 0;
        box-sizing: border-box;
        cursor: pointer;
    }
    fieldset.inp-pill-choice > ol > li > label > input[type="radio"]:checked {
        border: 1px solid;
    }
    fieldset.inp-pill-choice > ol > li > label > input[type="radio"]:hover:not(:checked) {
        border: 1px solid var(--c-border);
    }
}


/*--- Top to bottom elements ---*/

header, div.card, section.values {
    margin: 0 auto; max-width: 25cm; padding: 0 1rem;
}
div.experiences, section.projects {  /* TODO it works, though, there's no .projects */
    margin: 0 auto; max-width: 60cm; padding: 0;
}
header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 1cm;
    padding-top: 1rem;
}
header > h1 {
    font-weight: normal;
}
header > fieldset > legend > span {
    margin-left: 0.5em;
}
div.card > section > h2 {
    font-weight: normal;
    margin: var(--a3) 0 var(--r5) 0;
}
div.card > section > p.subtitle {
    margin: var(--r5) 0;
}
div.card > section > p.not-subtitle {
    margin: var(--r5) 0;
}
div.card > picture {
    margin-top: var(--a2);
    display: flex;
    justify-content: center;
}
div.card > picture > img {
    display: block;
    border-radius: 4px;
    width: min(12cm, 100%);
}
@media (min-width: 20cm) {
    div.card { display: flex; justify-content: space-between; gap: 2cm; }
    div.card > picture { display: block; }
    div.card > picture > img { width: min(9cm, 40vw); }
    div.card a.pdf-anchor { width: max-content; }
}
a.pdf-anchor {
    display: flex; flex-direction: column; align-items: center; gap: 0.5em;
    margin: 4em 0;
}
div.txtimg,
div.txttxt {
    margin-top: var(--a2);
}
div.txtimg > section { margin: 1rem; }
div.txttxt > section { margin: var(--e5) 1rem; }
div.txtimg > div img { border-radius: 4px; }
@media (min-width: 25cm) {
    div.txtimg {
        display: grid;
        grid-template-columns: 1fr 4fr 1fr 6fr;
        grid-template-areas: "_1 tt _2 ii";
        align-items: center;
    }
    div.txtimg > section { grid-area: tt; margin: 0; }
    div.txtimg > div { grid-area: ii; }
}
@media (min-width: 40cm) {
    div.txttxt {
        display: grid;
        gap: 4em;
        grid-auto-flow: column;
        margin: 5em 6em;
    }

}
h2 {
    margin-top: 0;
    margin-bottom: var(--e2);
}
ul.xx > li {
    margin: var(--e4) 0;
}
ul.xx > li::marker {
    font-weight: bold;
    content: "#  ";
}
ul.button-links {
    display: flex; flex-wrap: wrap; column-gap: var(--e3);
    padding: 0; list-style: none;
}
div.txtimg.keymouth > div,
div.txtimg.keymouth > div img {
    width: 100%;
}
.overlapping-images {
    position: relative;
    padding-top: 1cm;
    padding-right: 1cm;
    border-right: 1px solid;
    box-sizing: border-box;
}
[data-sch=light] .overlapping-images img {
    box-shadow: 1px 2px 8px -4px;
}
.small-up-right {
    position: absolute; top: 0; right: 0; width: 40%;
}
ul.portfolio-iterations > li > a,
ul.button-links > li > a {
    border-radius: 4px;
    border: 1px solid var(--c-border);
    border-bottom: 1.5px solid;
    display: inline-block; padding: 0.4em 0.6em;
    text-decoration: none;
    background-color: var(--cabg);
}
ul.portfolio-iterations > li > a:hover,
ul.button-links > li > a:hover {
    border:          1px solid var(--c-faded-border);
    border-bottom: 1.5px solid var(--c-faded-border);
    background-color: var(--cbg);
    text-decoration: underline;
}
ul.portfolio-iterations { list-style: none; padding: 0; }
ul.portfolio-iterations > li { width: max-content; display: inline-block; }
div.this-portfolio > section > h2 {
    margin-bottom: var(--e3);    
}
[data-sch=light] div.this-portfolio > div img {
    box-shadow: 0 2px 8px -4px;
}
div.this-portfolio > div,
div.this-portfolio > div img {
    width: 100%;
}

section.negative {
    margin: var(--a3) 1rem;
}
@media (min-width: 25cm) {
    section.negative {
        margin: var(--a3);
    }
}

footer#links-at-the-bottom > ul {
    list-style: none;
    padding: 0;
    margin-top: var(--a1);
    padding-bottom: var(--a1);
    display: flex; column-gap: 1.4em; justify-content: center;
}