:root {
    --special-color: rgb(222, 166, 65);
    /* --special-color: device-cmyk(10% 35% 80% 5%); */
}

body {
    font-family: Arial, sans-serif;
    font-size: 2.5vw;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    /* align-content: space-between; */
    padding: 5vw;
    box-sizing: border-box;
    /* grid-auto-rows: min-content; */
}

.graphic {
    display: grid;
    grid-template-rows: 1fr auto 1.25fr;
    margin-top: 4vw;
    margin-bottom: 5.6vw;
}

#diagram {
    opacity: 0.7;
    z-index: -1;
    grid-column: 1 / 2;
    grid-row: 1 / 4;
    width: 64.5vw;
    height: auto;
}

.donuts {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    align-self: end;
    justify-self: end;
    display: grid;
    grid-template-columns: repeat(3, 30vw);
    justify-items: end;
    /* opacity: 0.9; */
}

#diagram path {
    stroke-linecap: round;
    stroke-width: 0.7px;
}

.comp svg {
    width: 30vw;
    /* aspect-ratio: 13.886848 / 10.978245; */
}

.comp svg use {
    translate: -6159.681px -2158.9774px;
}

g.phantom {
    opacity: 0.3;
    filter: grayscale(100%);
}

h1 {
    /* margin-top: 0.5em; */
    margin: 0;
    font-size: 5.5vw;
    font-weight: normal;
}

.second-line {
    text-align: end;
}

p {
    text-align: justify;
    margin: 0.42em 0 0.5em;
    font-size: 3.11vw;
}

.mini-course {
    font-style: italic;
}

.orga {
    display: grid;
    --padding: 4vw;
    font-size: 1.06em;
    /* font-size: 1.2em; */
    grid-template-columns: var(--padding) 1fr 1fr 1.28fr;
    grid-template-rows: var(--padding) auto var(--padding);
    background-color: var(--special-color);
    /* grid-template-areas: */
    /* 	".. ..... organisers" */
    /* 	".. dates organisers" */
    /* 	".. ..... organisers"; */
}

.dates {
    grid-row: 2 / 3;
    grid-column: 2 / 4;
    display: grid;
    align-content: space-between;
    box-sizing: border-box;
}

.organisers {
    grid-row: 1 / 4;
    grid-column: 3 / 5;
    /* For Din A3: */
    /* margin: -0.25em -0.12em -0.26em 0; */
    margin: -0.25em -0.12em -0.27em 0;
    color: white;
    font-weight: bold;
    font-size: 3.3475vw;
    /* font-size: 1.15em; */
    justify-self: right;
}

.organisers dd {
    text-align: right;
    /* font-weight: normal; */
}

.dates .summer-school {
    display: grid;
    gap: 0.2em;
}

.dates .registration-deadline {
    justify-self: end;
    text-align: center;
}

.dates .lit-reg-deadline {
    text-decoration: underline;
}

.contact {
    margin-top: 4vw;
    margin-bottom: 1vw;
    display: grid;
    grid-template-columns: auto auto;
    align-items: start;
}

.contact img {
    height: 18vw;
    width: auto;
}

.contact > div {
    border-top: 0.25vw solid;
    padding-top: 1.8vw;
    display: grid;
    gap: 1em;
    text-align: right;
}

footer {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: end;
    margin-top: auto;
    /* align-self: end; */
}

footer svg {
    height: 7vw;
    width: auto;
}

.ems {
    display: grid;
    row-gap: 1vw;    
}

.support {
    color: dimgrey;
    font-size: 2vw;
    grid-column: 4 / 5;
}

#pink-donut-container {
    width: 0px;
    height: 0px;
    overflow: hidden;
}