:root {
    --ci-color-solid: #008080;
    --ci-color-transp: rgba(0, 128, 128, 0.8);
    --ci-comp-color-solid: #800000;
    --box-shadow-std: 0 8px 16px rgba(0, 0, 0, 0.6);
    --box-shadow-inverse: 0 -8px 16px rgba(0, 0, 0, 0.6);
}

body{
    z-Index: -1;
    background-color: #FFFFFF;
    font-family: var(--font-standard);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ImgContainer, .ImgPortraitContainer{
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.ImgPortraitContainer {
    max-width: 600px;
    box-shadow: var(--box-shadow-std);
}
.IconContainer {
    max-width: 24px;
}
.ImgContainer img, .ImgPortraitContainer img, .IconContainer img{
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

main{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    max-width: 1400px;
}
.Spacer{
    margin:unset;
    margin-bottom: 50px;
}
.CenterElements{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.FlexLine{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}
.InnerPadding {
    padding: 32px;
}
header {
    height: 120px;
}
footer {
    margin: unset;
    padding: unset;
    height: 200px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
}
section {
    margin-top: 24px;
    margin-bottom: 24px;
    overflow: hidden;
}
button {
    font-family: var(--font-navigation);
    font-size: 1rem;
    transition: 0.5s;
}
button:hover {
    box-shadow: var(--box-shadow-std);
    color: var(--ci-comp-color-solid);
    border-color: var(--ci-comp-color-solid);
}

@media screen and (max-width: 1200px)
{
    :root {
        --box-shadow-std: 0 3px 6px rgba(0, 0, 0, 0.6);
        --box-shadow-inverse: 0 -3px 6px rgba(0, 0, 0, 0.6);
    }
    .InnerPadding {
        padding: 12px;
    }
    body {
        display: unset;
        padding: 0;
        margin: 0;
    }
    footer{
        height: unset;
        opacity: 1;
        visibility: visible;
        transition: unset;
    }
    header{
        background-color: unset;
        height: 150px;
    }
}
@media screen and (min-width: 2200px)
{
    body{
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: 100vh;
        margin: 0;
        justify-items: center;
        height: 95vh;
    }
    header{
        display: flex;
        flex-direction: column;
        height: 100vh;
        background-color: var(--ci-color-solid);
    }
    footer {
        height: 100vh;
        background-color: var(--ci-color-solid);
        opacity: 1;
        visibility: visible;
        transition: unset;
    }
    main{
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow-y: auto;
        height: 85vh;
    }
}