@import url("fonts.css");

@import url("default-vars.css");
@import url("default-styles.css");

/********************
 * Variablen
 */
:root {
    /* sizes */
    --box-height: 32rem;
    --box-min-width: 40rem;
    --box-max-width: 50rem;
    --box-top-margin: 30px;
    --box-radius: 0.4rem;
    --top-box-height: 55%;
    --bottom-box-height: 45%;
    /* colors */
    --primary-color: rgb(255, 255, 255);
    --primary-color-light: rgb(255, 255, 255);
    --primary-color-dark: rgb(220, 220, 220);
    --text-color: var(--primary-color);
    --highlight-text-color: rgb(240, 55, 0);
    --page-bg-color: rgb(221, 249, 255);
    --top-bg-color: rgb(13, 211, 255);
    --bottom-bg-color: rgb(0, 156, 203);
    /*
    --top-bg-color: rgb(86 214 250);
    --bottom-bg-color: rgb(2 171 221);
    */
}

body {
    background-color: var(--page-bg-color);
}

.minwidth {
    min-width: var(--box-min-width);
}

.no-minwidth {
    min-width: unset;
}

.page {
    max-width: var(--box-max-width);

    margin-left: auto;
    margin-right: auto;
}

.grid {
    display: grid;
}

.header {
    width: 100%;
    position: fixed;
    font-size: var(--default-font-size);
}

.container {
    font-size: var(--default-font-size);
}

.sticky-top {
    position: sticky;
    background-color: var(--page-bg-color);
    top: 0;
    z-index: 1020;
}

.box {
    place-self: center;
    margin-top: var(--box-top-margin);
    min-height: var(--box-height);
    width: 100%;
    border-radius: var(--box-radius);
    box-shadow: 10px 10px 30px rgb(0, 0, 0, 0.7);
    position: relative;
}

.box-top {
    width: 100%;
    height: var(--top-box-height);
    background-color: var(--top-bg-color);
    border-radius: var(--box-radius) var(--box-radius) 0 0;
    position: absolute;
    top: 0;
    z-index: -10;
}

.box-bottom {
    width: 100%;
    height: var(--bottom-box-height);
    background-color: var(--bottom-bg-color);
    border-radius: 0 0 var(--box-radius) var(--box-radius);
    position: absolute;
    top: var(--top-box-height);
    z-index: -1;
}

.footer {
    padding-top: var(--xs-em);
    padding-bottom: var(--xs-em);
    width: 100%;
    font-size: var(--medium-text-size);
    color: var(--bottom-bg-color);
    text-align: center;
}

.button {
    font-size: var(--default-font-size);
    background-color: var(--bottom-bg-color);
    color: var(--text-color);
    border: none;
    padding: var(--xs-em) var(--sm-em);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 0.25em 0.25em;
    border-radius: .4rem;
    box-shadow: 0.3em 0.3em 0.5em rgb(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.button:active {
    box-shadow: 0.1em 0.1em 0.2em rgb(0, 0, 0, 0.4);
    transform: scale(0.98);
}

.mt-bottom {
    margin-top: calc(var(--box-height) * .55 + 2rem);
}

.gianttext {
    font-size: var(--giant-text-size);
    font-weight: bold;
    color: var(--text-color);
    position: relative;
    z-index: 10;
}

.bigtext {
    font-size: var(--big-text-size);
    font-weight: bold;
    color: var(--text-color);
    position: relative;
    z-index: 10;
}

.subtext {
    font-size: var(--sub-text-size);
    color: var(--text-color);
    position: relative;
    z-index: 10;
}

.normaltext {
    font-size: var(--normal-text-size);
    color: var(--text-color);
    position: relative;
    z-index: 10;
}

.mediumtext {
    font-size: var(--medium-text-size);
    color: var(--text-color);
    position: relative;
    z-index: 10;
}

.highlight {
    color: var(--highlight-text-color);
    font-weight: bold;
}

.top-bg-color {
    color: var(--top-bg-color);
}
.bottom-bg-color {
    color: var(--bottom-bg-color);
}


.img-boot {
    position: absolute;
    height: 25%;
    left: 5%;
    top: var(--top-box-height);
    transform: translate(0%, -100%);
    object-fit: contain;
}

.img-boot-flip-h {
    position: absolute;
    height: 25%;
    left: 5%;
    top: var(--top-box-height);
    transform: rotateY(180deg) translate(0%, -100%);
    object-fit: contain;
}

.text-pfeil {
    position: absolute;
    left: 15%;
    top: 15%;
    width: 70%;
}

.img-pfeil {
    position: absolute;
    width: 85%;
    height: 57%;
    left: 10%;
    top: 4%;
    object-fit: fill;
}

.img-wellen {
    position: absolute;
    width: 35%;
    left: 64%;
    top: 77%;
    object-fit: contain;
}
.img-wellen-klein {
    position: absolute;
    width: 25%;
    left: 71%;
    top: 75%;
    object-fit: contain;
}
.img-ring {
    position: absolute;
    height: 45%;
    left: 1.5rem;
    top: 50%;
    object-fit: contain;
}

.img-voegel {
    position: absolute;
    width: 30%;
    margin-top: 1.5rem;
    margin-left: 1.5rem;
    object-fit: contain;
}

.img-portrait {
    position: absolute;
    border-radius: 50%;
    left: 50%;
    top: 15%;
    transform: translate(-50%, -15%);
    height: 30%;
    margin-top: 1.5rem;
    object-fit: contain;
    z-index: 5;
}


.box a {
    color: var(--text-color);
    outline: 0;
    text-decoration: none;
}

.box a:hover,
.box a:active,
.box a:focus {
    text-decoration: underline;
}

@media only screen and (max-width: 750px) {

    .text-pfeil {
        font-size: var(--medium-text-size);
    }
}