:root {
    --previous-color-light: hsl(0, 0%, 100%); /*gets redefined in script.js*/
    --previous-color-dark: hsl(0, 0%, 100%); /*gets redefined in script.js*/
    --previous-color-dark2: hsl(0, 0%, 100%); /*gets redefined in script.js*/
    --random-background-color-light: hsl(1,100%,100%); /*gets redefined in script.js*/
    --random-background-color-dark: hsl(240,100%,50%); /*gets redefined in script.js*/
    --random-background-color-dark2: hsl(300,100%,50%); /*gets redefined in script.js*/

    --body-width: 45em;
    --general-animation-duration: 2s;

    --scaling: 40.5%;

}   

@keyframes background-color-shift{
    from {background-color: var(--previous-color-light);}
    to {background-color: var(--random-background-color-light);}
}

@keyframes color-light-shift{
    from {color: var(--previous-color-light);}
    to {color: var(--random-background-color-light);}
}

@keyframes color-dark-shift{
    from {color: var(--previous-color-dark);}
    to {color: var(--random-background-color-dark);}
}

@keyframes color-dark2-shift{
    from {color: var(--previous-color-dark2);}
    to {color: var(--random-background-color-dark2);}
}



/* general */
body {
    font-family: Arial;
    font-size: var(--scaling); /*set the body font-size to “62.5%” which puts the site’s default size at 10px. This way, a setting of 1.2em = 12px.*/
    background-color: var(--random-background-color-light);
    animation-name: background-color-shift;
    animation-duration: var(--general-animation-duration);
}
a {
    text-decoration: none;
    color: var(--random-background-color-dark);
}
a:visited {
    text-decoration: none;
    color: var(--random-background-color-dark2);
}

/*navigation*/
.navigation-item{
    color: var(--random-background-color-light);
    animation-name: color-light-shift;
    animation-duration: var(--general-animation-duration);

    display: block;
    flex-grow: 1;
    border: 2px solid black;
    background-color: black;
    margin: 0 1vw 0 0;
    font-size: 2.7em;
}

.navigation-item:visited{
    color: var(--random-background-color-light);
    animation-name: color-light-shift;
    animation-duration: var(--general-animation-duration);
}

.navigation-item-last{
    margin: 0 0 0 0;
}


/* content */
.body-wrapper{
    max-width: var(--body-width);
    font-size: 2.7em;
    padding-bottom: 10vh;
}

.text-box {
    padding: 0.5em;
    background-color: white;
    box-shadow: 0 0 5px grey;
    margin-bottom: 1vh;
}

.biocard {
    display: grid;
    grid-template-columns: 33% 33% 34% ;
    flex-wrap: nowrap;
    max-width: var(--body-width);
    margin-bottom: 2em;
}

.biopic-container{
    grid-column: span 1;
}
.biopic{
    width: 100%;
}

.biotext{
    grid-column: span 2;
}

.blueprintcard{
    display: grid;
    grid-template-columns: 25% 25% 25% 25% ;
    margin-top: 2em;
}

.blueprint-title{
    display: block;
    grid-column: span 4;
    padding: 0.5em;
    background-color: white;
    box-shadow: 0 0 5px  grey;
    margin-bottom: .1em;
}

.blueprint-type{
    grid-row: 2;
    grid-column: span 2;
    padding: 0.5em;
    background-color: white;
    box-shadow: 0 2px 5px grey;
}

.blueprint-download{
    background-color: black;
    grid-column: span 1;
    grid-row: 2;
    text-align: center;
    padding: 0.5em;
    margin-left: .2em;

}

.deutsch {
    display: block;
}

.english {
    display: none;
}

.de-en-toggle {
    width: auto;
    margin-bottom: 1vh;

    cursor: pointer;
    display: inline-block;
}

/* utility*/
.seethrough {
    color: var(--random-background-color-light);
    animation-name: color-light-shift;
    animation-duration: var(--general-animation-duration);
}

/* id */
#logo{
    width: 100%;
    border-bottom: 3px solid black;
    margin-bottom: 1vh;
    padding-bottom: 1vh;

    font-size: 2.7em;
}

#logoFirstRow{
    color: var(--random-background-color-dark);
    animation-name: color-dark-shift;
    animation-duration: var(--general-animation-duration);
}

#logoSecondRow{
    color: var(--random-background-color-dark2);
    animation-name: color-dark2-shift;
    animation-duration: var(--general-animation-duration);
}

#navigation{
    display: flex;
    flex-direction: row;
    margin-bottom: 4vh;
}

#contact {
    margin-top: 1vh;
    background-color: black;
    display: inline-block;
    float: left;

    font-size: 2.4em;
}

#pgp {
    font-family: monospace;
    margin-top: 1vh;
    background-color: black;
    float: left;
    margin-bottom: 10vh;
}

#tibahni-link {
    margin-top: 10vh;
    background-color: black;
    display: inline-block;
    float: left;
    clear: left;
    margin-bottom: 5vh;
}

#play {
    margin-top: 10vh;
    background-color: black;
    display: inline-block;
    float: left;
    clear: left;
    margin-bottom: 5vh;
}

footer {
    color: white;
    text-shadow: 0 0 5px hsl(1,0%,30%);
    position: fixed;
    padding: 10px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--random-background-color-light); 
    animation-name: background-color-shift;
    animation-duration: var(--general-animation-duration);

    font-size: 0.8em;
}

@media screen and (max-device-width : 1024px) and (orientation : landscape) {
    #logo {
        white-space: nowrap;
    }
}

@media screen and (max-device-width : 1024px) {
    body {
        font-size: 40%;
    }
    .biotext {
        grid-column: span 3;
        grid-row: 2;
    }
    code {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space: pre-wrap;       /* css-3 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
    word-break: break-all;
    white-space: normal;
}
}

@media screen and (min-device-width : 1500px) {
    :root {
        --scaling: 50%;
    }

    
}

@media screen and (min-device-width : 1500px) and (min-resolution: 192dpi){
    :root {
        --scaling: 65%;
    }
}

@media screen and (min-device-width: 1930px) {
    .body-wrapper {
        margin: auto;
    }
}