/* Let the body fill the whole page and avoid some manually inserted margin */
body {
    margin: 0;
    padding: 0;
}

/* Main page is just flex-column of content */
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 5em;
    width: 100%;
    box-sizing: border-box;
    padding: 8em;
    /* Should the page become too wide, we restrict the content to a nice box width and center it*/
    margin: auto;
    max-width: 125em;
}

/* Only used for "Hi, I'm Jonas." Phrase */
h1 {
    font-size: 4em;
    /* If the heading breaks, the lines are too close, so we embiggen the line-height */
    line-height: 1.2em;
}

/* Section headers */
h2 {
    font-size: 2.5em;
    text-align: center;
    /* If the heading breaks, don't let the lines look to squashed */
    line-height: 1.2em;
}

/* Sub-section headers*/
h3 {
    font-size: 1em;
}

/* Links have green underline, growing on hover */
a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--green);
    text-decoration-thickness: .125em;
    text-underline-offset: .4em;
    padding: .5em .2em;
    /* The underline does not vanish under g's and y's when growing */
    text-decoration-skip-ink: none;
    transition: all 0.1s;
    /* When the Links break to the next line, the link underline sometimes reeks into other text, so we add additional line-height */
    line-height: 1.5em;
}

/* Hover effect of custom links */
a:hover {
    text-decoration-thickness: .25em;
    text-underline-offset: .275em;
    transition: all 0.1s;
}

/* Gradient-colored text for distinguished words */
span.gradient-text {
    background-image: linear-gradient(90deg, var(--blue), var(--green));
    background-clip: text;
    color: transparent;
}

/* Hero text, short introduction and logo,
   is a flex row until site becomes too thin and then becomes a reverse-column starting with the logo */
#hero-banner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

/* Logo of the page */
#hero-banner>img {
    width: 40%;
    max-width: 30em;
}

/* Generic flex-row for placing content side-by-side
   Changes to a flex-column when site becomes to thin */
.flex-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1em;
    align-items: stretch;
    width: 100%;
}

/* Equal flex-grow for all items, no flex-shrink and equal flex-basis
   Ensures that all items in the flex-row are equally sized */
.flex-row>* {
    flex: 1 0 0;
}

/* Contains the heading and a flex-row of cards of different mathematical interests*/
#interests {
    width: 100%;
}

/* A single interest card */
.interest-card {
    background-color: var(--blue10);
    padding: 2em;
    border-radius: 1em;
    text-align: center;
}

/* Exemplary image of an interest card, 
   Restricted max size, should the site become too wide*/
.interest-card>img {
    width: 100%;
    max-width: 20em;
    object-fit: contain;
    height: 20em;
}

.interest-card>h3 {
    font-size: 1.3em;
}

/* Introductory text of an interest card,
   Text-aligned to ease reading */
.interest-card>p {
    text-align: left;
}

/* Contains heading and entries for each teaching position together with a heading for each university*/
#teaching {
    width: 100%;
}

/* Each banner contains a linked name and logo of the university, aligned as a flex-row */
.teaching-banner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    width: 100%;
}

/* Names of universities */
.teaching-banner h3 {
    font-size: 2em;
    /* Looks nicer if the site becomes too thin */
    text-align: center;
}

/* Logos look best with this size */
.teaching-banner img {
    height: 10em;
}

/* List of teaching positions,
   layouted as a grid with semester <-> position as rows */
.teaching-list {
    display: grid;
    /* Semester is usually shorter to write than positions, so we shorten it's column*/
    grid-template-columns: 1fr 2fr;
    /* As this are neither headings but more important than paragraphs, we embiggen its impact a bit */
    font-size: 1.5em;
    gap: 1em;
}

/* Looks better */
.teaching-semester {
    text-align: center;
}

/* Contains heading, introductory text, cards of bongard problems and reference text to further riddles */
#bongard {
    width: 100%;
}

/* A bongard-problem-card*/
.bongard-problem {
    background-color: var(--green10);
    padding: 2em;
    border-radius: 1em;
    text-align: center;
}

/* The actual bongard problem as an image,
   Restrincting the maximum size if the site becomes too wide */
.bongard-problem>img {
    width: 100%;
    max-width: 30em;
}

/* Showing a hidden solution with pure CSS,
   We have a button with hidden text and a notice that clicking the button reveals the solution */
.bongard-solution-button {
    /* This is all just styling of the button*/
    width: 100%;
    height: 4em;
    font-size: 1em;
    background-color: var(--green20);
    color: var(--text);
    border-radius: 1em;
    border: none;
    cursor: pointer;
}

/* Make the button more responsive by lighting up when hovered */
.bongard-solution-button:hover {
    background-color: var(--green30);
    transition: 0.1s;
}

/* The default state is the buttons showing a hint to click them to show the problem solution */
.bongard-solution-hint {
    display: inline;
    font-weight: bold;
}

/* The actual solution is hidden until clicked/focused */
.bongard-solution {
    display: none;
}

/* If the button is focused, we show the solution */
.bongard-solution-button:focus .bongard-solution {
    display: inline;
}

/* And hide the hint to click it */
.bongard-solution-button:focus .bongard-solution-hint {
    display: none;
}

/* large*/
@media screen and (max-width: 1920px) {

    /* Adjusting padding for large sizes, looks better */
    main {
        padding: 4em;
    }
}

/* medium */
@media screen and (max-width: 1280px) {

    /* Adjusting padding for large sizes, looks better 
       As this is contained in the larger media query, it is not strictly necessary
       But we keep it, if we want to add additional media properties later */
    main {
        padding: 4em;
    }
}

/* small */
@media screen and (max-width: 960px) {

    /* Adjusting padding for small sizes, looks better */
    main {
        padding: 2em;
    }

    /* We slightly shrink the heading size so that it rarely breaks */
    h1 {
        font-size: 3.4em;
    }

    /* Now the flex rows of cards are columns instead of squishing side-by-side*/
    .flex-row {
        flex-direction: column;
    }
}

/* x-small */
@media screen and (max-width: 600px) {

    /* Adjusting padding for small sizes, looks better */
    main {
        padding: 1.5em;
    }

    /* Slightly shrink the heading size such that it rarely breaks */
    h1 {
        font-size: 3em;
    }

    /* The large font-size on the teaching list is now misleading, so we shrink it */
    .teaching-list {
        font-size: 1em;
    }

    /* Site is now too narrow to display image and text side-by-side so we let the logo display first and then the text */
    #hero-banner {
        flex-direction: column-reverse;
    }

    /* Site is now too narrow to display image and text side-by-side so we let the logo display first and then the text */
    .teaching-banner {
        flex-direction: column-reverse;
    }
}