@import url(./fonts/fonts.css);

:root {
    --header-height: 6em;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0px;
    color: black;
    font-family: SinkinSans, sans-serif;
    font-weight: 300;
    background-color: lightgray;
    height: 100vh;
}

main, footer {
    padding: 2em;
}

main, h1 {
    margin-bottom: 50px;
}

.centered {
    text-align: center;
}

header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    box-shadow: 0px 10px 5px rgba(20, 0, 50, 0.4);
    background-color: white;
    position: sticky;
    top: 0;
    white-space: nowrap;
    z-index: 1;
}

a {
    text-decoration: none;
    color: black;
}

a:visited {
    color: inherit;

}

.cards-container a .card .card-text-container {
    position: relative;
    width: 100%;
}


.cards-container a .card .card-text-container .card-text {
    position: absolute;
    background: rgba(0,0,0,0.8);
    color: white;
    top: calc(100% - 4.5em);
    width: 100%;
    transition: 200ms all ease-in;
}

.cards-container a .card .card-text-container .card-text p {
    opacity: 0;
}

.cards-container a:hover .card .card-text-container .card-text {
    transform: translateY(-100%);
    background: white;
    color: black;
    top: 100%;
    transition: 200ms all ease-out;
}

.cards-container a:hover .card .card-text-container .card-text p {
    opacity: 1;
}

.cards-container a {
    display: flex;
    align-items: center;
    width: 40%;
    height: 100%;
}

.cards-container a .card {
    width: 100%;
    height: 100%;
    padding: 0;
    background-color: white;
    border-radius: 20px;
    overflow: hidden;

    transform: scale(1);
    transition: 200ms all ease-out;
    box-shadow: 10px 10px 5px rgba(20, 0, 50, 0.4);
}

.cards-container a:hover .card {
    transform: scale(1.1);
    transition: 200ms all ease-in;
    box-shadow: 15px 15px 10px rgba(20, 0, 50, 0.4);
}

header > nav > ul > li > a {
    transition: 200ms all ease-in;
    font-weight: 400;
}

header a {
    padding: 20px;
}

header > nav > ul > li > a:hover {
    color: rgb(47, 47, 194);
    font-size: 1.4em;
    transition: 200ms all ease-out;
    text-shadow: 5px 5px 10px rgba( 20, 0, 50, 0.3);
    letter-spacing: 3px;
}

header > nav > ul > li > a.active {
    color: rgb(47, 47, 194);
    font-weight: 800;
    text-shadow: 5px 5px 10px rgba( 20, 0, 50, 0.3);
}

header > nav > ul > li {
    margin-left: 50px;
    margin-right: 50px;
    list-style-type: none;
    display: flex;
    align-items: center;
}

header > nav > ul {
    display: flex;
    justify-content: space-around;
}

header > nav {
    flex-grow: 1;
}

header > h2 {
    font-weight: 800;
}

main {
    min-height: calc(100% - var(--header-height));
    padding-bottom: 4em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='1000' preserveAspectRatio='none' viewBox='0 0 1440 1000'%3e%3cg mask='url(%26quot%3b%23SvgjsMask4644%26quot%3b)' fill='none'%3e%3crect width='1440' height='1000' x='0' y='0' fill='url(%23SvgjsLinearGradient4645)'%3e%3c/rect%3e%3cpath d='M239.13 0C296.2 63.95 218.81 127.13 223.08 250C224.24 283.38 220.37 305.88 250 312.5C358.83 336.81 384.07 334.85 500 311.86C541.68 303.6 565.22 288.53 565.22 250C565.22 169.36 561.48 133.21 500 73.53C432.72 8.21 307.69 19.01 307.69 0C307.69 -17.76 403.85 0 500 0C625 0 625 0 750 0C875 0 875 0 1000 0C1125 0 1125 0 1250 0C1375 0 1375 0 1500 0C1500 0 1500 0 1500 0C1500 125 1500 125 1500 250C1500 341.91 1535.32 363.18 1500 433.82C1472.82 488.18 1375 469.87 1375 500C1375 528.82 1474.65 501.03 1500 551.72C1537.15 626.03 1500 650.86 1500 750C1500 875 1562.5 937.5 1500 1000C1437.5 1062.5 1375 1000 1250 1000C1125 1000 1125 1000 1000 1000C875 1000 875 1000 750 1000C625 1000 625 1000 500 1000C375 1000 375 1000 250 1000C125 1000 62.5 1062.5 0 1000C-62.5 937.5 0 875 0 750C0 625 0 625 0 500C0 375 0 375 0 250C0 125 -61.11 63.89 0 0C58.45 -61.11 184.66 -61.05 239.13 0' stroke='rgba(51%2c 121%2c 194%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1000 189.66C975.83 189.66 957.32 221.1 957.32 250C957.32 274.92 976.42 297.3 1000 297.3C1029.01 297.3 1062.5 275.53 1062.5 250C1062.5 221.71 1028.42 189.66 1000 189.66' stroke='rgba(51%2c 121%2c 194%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M250 631.25C218 631.25 186.67 695.96 186.67 750C186.67 784.66 218.14 808.64 250 808.64C282.34 808.64 315.07 784.84 315.07 750C315.07 696.14 282.2 631.25 250 631.25' stroke='rgba(51%2c 121%2c 194%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1000 694.81C959.86 694.81 930.33 722.83 930.33 750C930.33 776.66 960.27 802.47 1000 802.47C1087.5 802.47 1184.78 776.86 1184.78 750C1184.78 723.03 1087.09 694.81 1000 694.81' stroke='rgba(51%2c 121%2c 194%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M148.55 0C188.41 78.52 120.83 125.81 126.92 250C133.09 375.81 178.92 376.29 173.08 500C167.12 626.29 81.6 641.02 103.33 750C120.06 833.92 176.21 885.8 250 885.8C324.88 885.8 396.66 830.63 400.68 750C406.28 637.73 243.46 596.97 269.23 500C293.12 410.11 393.02 449.78 500 376.29C574.98 324.78 616.1 328.69 633.15 250C656.86 140.54 546.32 75.3 581.52 0C604.75 -49.7 665.76 0 750 0C875 0 875 0 1000 0C1125 0 1125 0 1250 0C1288.2 0 1293.5 -16.45 1326.39 0C1418.5 46.05 1445.21 46.1 1500 125C1532.01 171.1 1500 187.5 1500 250C1500 295.96 1532.27 319.05 1500 341.91C1407.27 407.59 1360.65 367.11 1250 427.08C1214.81 446.15 1241 475.62 1208.33 500C1116 568.9 1100.24 613.64 1000 613.64C919.32 613.64 921.25 559.29 846.49 500C796.25 460.16 796.07 415.38 750 415.38C708.54 415.38 671.43 453.38 671.43 500C671.43 562.77 708.79 568.29 750 634.15C787.01 693.29 778.73 701.75 827.87 750C903.73 824.49 913.18 815.84 1000 879.63C1083.3 940.84 1168.1 966.8 1168.1 1000C1168.1 1026.99 1084.05 1000 1000 1000C875 1000 875 1000 750 1000C625 1000 625 1000 500 1000C375 1000 375 1000 250 1000C125 1000 62.5 1062.5 0 1000C-62.5 937.5 0 875 0 750C0 625 0 625 0 500C0 375 0 375 0 250C0 125 -46.59 78.41 0 0C27.68 -46.59 124.95 -46.48 148.55 0' stroke='rgba(51%2c 121%2c 194%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1000 81.9C932.65 81.9 881.1 169.48 881.1 250C881.1 319.41 934.31 381.76 1000 381.76C1080.82 381.76 1174.11 321.11 1174.11 250C1174.11 171.18 1079.16 81.9 1000 81.9' stroke='rgba(51%2c 121%2c 194%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1325.4 750C1332.71 669.23 1444.97 623.56 1500 623.56C1532.27 623.56 1500 686.78 1500 750C1500 875 1515 890 1500 1000C1497.95 1015 1475.18 1013.28 1465.91 1000C1387.88 888.28 1315.67 857.45 1325.4 750' stroke='rgba(51%2c 121%2c 194%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M57.97 0C70.47 101.58 52.19 126.84 30.77 250C23.2 293.5 7.94 333.33 0 333.33C-7.45 333.33 0 291.66 0 250C0 125 -23.53 101.47 0 0C5.46 -23.53 55.09 -23.42 57.97 0' stroke='rgba(51%2c 121%2c 194%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M701.09 250C688.91 130.74 695.75 110.6 717.39 0C720.21 -14.4 733.69 0 750 0C812.5 0 866.08 -40.62 875 0C893.52 84.38 851.51 130.91 804.88 250C789.01 290.52 776.48 319.23 750 319.23C724.59 319.23 705.21 290.35 701.09 250' stroke='rgba(51%2c 121%2c 194%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M389.42 500C391.6 450.7 446.68 440.72 500 440.72C543.04 440.72 567.75 455.49 582.14 500C617.75 610.13 549.36 654.01 600 750C633.29 813.1 676.87 780.37 750 818.18C876.87 883.77 876.81 884.62 1000 956.79C1031.98 975.53 1060.34 988.08 1060.34 1000C1060.34 1009.69 1030.17 1000 1000 1000C875 1000 875 1000 750 1000C650 1000 624.71 1037.35 550 1000C499.71 974.85 516.47 939.63 500 875C484.62 814.63 503.95 809.86 486.3 750C448.66 622.36 384.75 605.34 389.42 500' stroke='rgba(51%2c 121%2c 194%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M956.14 500C956.14 483.32 976.89 466.22 1000 466.22C1028.58 466.22 1059.52 483.36 1059.52 500C1059.52 516.49 1028.64 532.47 1000 532.47C976.95 532.47 956.14 516.44 956.14 500' stroke='rgba(51%2c 121%2c 194%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M0 681.82C5.1 681.82 -3.1 724.02 20 750C121.9 864.59 120.32 885.31 250 962.96C329.07 1010.31 437.5 990.65 437.5 1000C437.5 1009.17 343.75 1000 250 1000C125 1000 62.5 1062.5 0 1000C-62.5 937.5 0 875 0 750C0 715.91 -4.9 681.82 0 681.82' stroke='rgba(51%2c 121%2c 194%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M1424.6 750C1424.6 715.7 1476.24 695.4 1500 695.4C1513.94 695.4 1500 722.7 1500 750C1500 807.92 1517.19 865.85 1500 865.85C1479.49 865.85 1424.6 800.93 1424.6 750' stroke='rgba(51%2c 121%2c 194%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask4644'%3e%3crect width='1440' height='1000' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='7.64%25' y1='111%25' x2='92.36%25' y2='-11%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient4645'%3e%3cstop stop-color='rgba(81%2c 151%2c 255%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(255%2c 255%2c 255%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
    background-size: cover;
}

#portrait {

}


.cards-container {
    display: flex;
    gap: 100px;
    width: 80%;
    justify-content: center;
    margin: 50px auto;
    align-items: stretch;
}


.cards-container .card > h3 {
    margin-bottom: 50px;
}

.cards-container > * {
    width: 30%;
} 

.card-image {
    width: 100%;
    height: 280px;
    background-size: cover;
}

.card-text {
    padding: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.card-text p {
    line-height: 120%;
}

.card-image {

}

#card-image-projects {
    background-image: url(./images/projects.png);
}

#card-image-ueber-mich {
    background-image: url(./images/ueber-mich.jpg);
    background-position-y: -10px;
}

footer {
    color: black;
    height: 4em;
    margin-top: -4em;
    background-color: rgb(67, 103, 233);
    display: flex;
    justify-content: space-between;
}