/* Styling for site.tobb.sn                                               */
/* This is called Bremen, because it was written there and started out as */
/* a fan fiction fork of one of the datenstrom/yellow themes, which are   */
/* named after cities.                                                    */

/* Colors and fonts */

:root {

    --bremen-grey: #88958dff;
    --bremen-green: #606d5dff;
    --bremen-olive: #282f27;
    --bremen-olive2: #475346;
    --bremen-purple: #7b5f70;
    --bremen-purple2: #bc9cb0ff;
    --bremen-pink: #fdf0f0;
    --bremen-grey2: #d3cdd7ff;
    --bremen-orange: #f7b64d;
    --bremen-yellow: #f6d9ab;
    --bremen-green2: #ddf2ebff;
    --bremen-green3: #9fc6b9;
    --bremen-steel: #e5edee;
    --bremen-steel2: #f0f4f5;
     
    --bg: var(--bremen-steel);
    --heading: var(--bremen-purple);
    --text: var(--bremen-olive);
    --code: var(--bremen-olive);
    --link: var(--bremen-purple);
    --link-hover: var(--bremen-olive);
    --link-active: var(--bremen-purple2);
    --footer-text: var(--bremen-grey);

    --code-accent: var(--bremen-orange);
    --code-bg: var(--bremen-steel2);
    --code-inline-bg: var(--bremen-pink);
    --block-accent: var(--bremen-purple);
    --blockquote-bg: var(--bremen-grey2);
    --note-accent: var(--bremen-purple);
    --note-bg: var(--bremen-pink);
    --warn-accent: var(--bremen-purple);
    --warn-bg: var(--bremen-yellow);
    --hint-accent: var(--bremen-olive2);
    --hint-bg: var(--bremen-green3);
    
    --separator: var(--bremen-purple2);
    --border: #bbb;

    --font: "goudy", sans-serif;
    --monospace-font: "fantasque", monospace;
    --heading-font: "comico", sans-serif;
}
@font-face {
    font-family: "fantasque";
    font-style: normal;
    /* font-display: swap; */
    src: url(fantasque.woff) format("woff");
}
@font-face {
    font-family: "comico";
    font-style: normal;
    /* font-display: swap; */
    src: url(comico.woff) format("woff");
}
@font-face {
    font-family: "goudy";
    font-style: normal;
    /* font-display: swap; */
    src: url(goudy.woff) format("woff");
}

/* General */

body {
    margin: 1em;
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-weight: 300;
    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
}

/* Single column layout */
nav, head, main, footer {
    max-width: 55em;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0.5em;
}


/* Headings */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    color: var(--heading);
    font-weight: 400;
    margin: 0;
}

h1 {
    font-size: 4em;
}

hr {
    background: var(--separator);
    height: 2px;
    border: 0;
}

/* Fonts & Links */

strong {
    font-weight: bold;
}

code {
    font-size: 1.2em;
}

a {
    color: var(--link);
    text-decoration: none;
}

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


/* Content in main */

main p {
    font-size: 1.4rem;
    text-align: justify;
}
main li {
    font-size: 1.4rem;
    text-align: justify;
}
.meta {
    margin-top: 0;
    opacity: 0.65;
}

main h1 {
    margin: 1em 0;
}
main h1 a {
    color: var(--heading);
}
main h1 a:hover {
    color: var(--heading);
    text-decoration: none;
}
main h2 {
    font-size: 2em;
    margin-top: 1.5em;
}
main h2 a:hover {
    color: var(--heading);
    text-decoration: none;
    border-bottom: solid 3px var(--heading);
}
main h3 {
    margin-top: 1.5em;
}


/* main form and tabled */

main form {
    margin: 1em 0;
}
main table {
    border-spacing: 0;
    border-collapse: collapse;
}
main th:not([align]) {
    text-align: left;
}
main th,
main td {
    padding: 0.3em;
    padding-left: 2em;
}
main th:first-child,
main td:first-child {
    padding: 0.3em;
}
main th {
    border-bottom: 1px solid var(--separator);
}


/* main code blocks */

main code {
    font-family: var(--monospace-font);
    font-size: 105%;
    padding: 0 0.15em 0;
    border-radius: 3px;
}

p code {
    font-size: 105%;
    background-color: var(--code-inline-bg);
    padding: 0 0.15em 0;
    border-radius: 3px;
}

main pre:has(code) {
    font-size: 110%;
    margin: 1em;
    padding: 0.25em 1em 0.75em 0.75em;
    opacity: 0.8;
    background-color: var(--code-bg);
    color: var(--code);
    border-radius: 5px;
    border-left: 5px solid var(--code-accent);
}


/* main quotes and boxes */

main blockquote {
    display: block;
    margin: 1em;
    padding: 0.25em 1em 0.75em 0.75em;
    background-color: var(--blockquote-bg);
    border-radius: 5px;
    border-left: 5px solid var(--block-accent);
    & li::marker {
	color: var(--block-accent);
    }
    & h3 {
	color: var(--block-accent);
	margin-top: 0.25em;
    }
    & a {
	color: var(--block-accent);
    }
}

main note {
    display: block;
    margin: 1em;
    padding: 0.25em 1em 0.75em 0.75em;
    background-color: var(--note-bg);
    border-radius: 5px;
    border-left: 5px solid var(--note-accent);
    & li::marker {
	color: var(--note-accent);
    }
    & h3 {
	color: var(--note-accent);
	margin-top: 0.25em;
    }
    & a {
	color: var(--note-accent);
    }

}

main warn {
    display: block;
    margin: 1em;
    padding: 0.25em 1em 0.75em 0.75em;
    background-color: var(--warn-bg);
    border-radius: 5px;
    border-left: 5px solid var(--warn-accent);
    & li::marker {
	color: var(--warn-accent);
    }
    & h3 {
	color: var(--warn-accent);
	margin-top: 0.25em;
    }
    & a {
	color: var(--warn-accent);
    }
}

main hint {
    display: block;
    margin: 1em;
    padding: 0.25em 1em 0.75em 0.75em;
    background-color: var(--hint-bg);
    border-radius: 5px;
    border-left: 5px solid var(--hint-accent);
    & li::marker {
	color: var(--hint-accent);
    }
    & h3 {
	color: var(--hint-accent);
	margin-top: 0.25em;
    }
    & a {
	color: var(--hint-accent);
    }
}

p:has(blockquote),
p:has(note),
p:has(warn),
p:has(hint) {
    margin: 0;
    padding: 0;
}

blockquote p,
note p,
warn p,
hint p{
    margin: 0
}


/* Header */

head {
    margin: 2em 0;
}
head .sitename {
    display: block;
    float: left;
}
head .sitename h1 {
    margin: 0;
    font-size: 1em;
    font-weight: 300;
}
head .sitename h1 a {
    color: var(--text);
    border-bottom: solid 3px var(--bg);
    text-decoration: none;
    padding: 0.5em 0;
}
head .sitename h1 a:hover {
    color: var(--link-hover);
    border-bottom: solid 3px var(--link-active);
}
head .sitename p {
    margin-top: 0;
    color: var(--text);
}

/* Navigation */

nav {

}

nav a {
    color: var(--link);
    border-bottom: solid 3px var(--bg);
    font-size: 1.2em;
    text-decoration: none;
    padding: 0.5em 0;
    margin: 0 0.5em;
}
nav a:hover {
    color: var(--text);
    text-decoration: none;
    border-bottom: solid 3px var(--link-active);
}

.home {
    font-family: var(--heading-font);
}

.links {
    float: right;
}


/* Footer */

footer {
    text-align: center;
    color: var(--footer-text);
}

footer a {
    font-family: var(--heading-font);
    color: var(--footer-text);
}


/* Index */

#sites-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
#sites-img {
    max-width: 40%;
    padding: 1em;
    heigth: auto;
}
#sites-p {
    padding: 1.4em;
    max-width: 40%;
}

#links-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}
#links-img {
    max-width: 40%;
    padding: 1em;
    heigth: auto;
}
#links-p {
    padding: 1.4em;
    max-width: 40%;
}

/* Responsive */

.page {
    margin: 0 auto;
    max-width: 1000px;
}

@media screen and (min-width: 62em) {
    body {
        width: 60em;
        margin: 1em auto;
    }
    .page {
        margin: 0;
        max-width: none;
    }
}
@media screen and (max-width: 32em) {
    body {
        margin: 0.5em;
        font-size: 0.9em;
    }
    main h1,
    main h2 {
        font-size: 1.5em;
    }
    #links-img {
	max-width: 60%;
	padding: 1em;
	heigth: auto;
    }
    #links-p {
	padding: 1.4em;
	max-width: 80%;
    }
    #links-box {
	flex-direction: column-reverse;
    }
    #sites-img {
	max-width: 60%;
	padding: 1em;
	heigth: auto;
    }
    #sites-p {
	padding: 1.4em;
	max-width: 80%;
    #sites-box {
	flex-direction: column;
    }
}
}