html {
    scroll-behavior: smooth;
    margin: 0;
}

body {
    margin: 0;
    font-family: "Poppins";
    width: 100vw;
}

h1 {
    font-weight: 300;
    font-size: 36pt;
    line-height: 36pt;
    margin: 0;
    padding: 0;
}

h2 {
    font-weight: normal;
    size: 18pt;
    margin: 12pt 0;
    padding: 0;
}

a {
    color: #5456B3;
    text-decoration: none;
    font-weight: bolder;
}

#hero-header {
    background: #121924;
    min-height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    justify-content: space-between;
}

#hero-footer {
    background: #121924;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    margin-top: 20vh;
    position: relative;
}

#footer-content {
    max-width: 240pt;
}

#imprint-link {
    position: absolute;
    bottom: 24pt;
}

#imprint-link a {
    opacity: 0.65;
    color: #fff;
    font-weight: 300;
    transition: all .2s ease-in-out;
}

#imprint-link a:hover {
    opacity: initial;
    color: #fff;
    text-decoration: underline;
}

#ta-logo {
    width: 300pt;
}

#hero-scroll-hint {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 24pt;
    margin-top: 16pt;
    cursor: pointer;
    color: white;
    font-weight: normal;
}

#hero-description {
    width: 400pt;
    max-width: 100vw;
    padding: 16pt 48pt;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#hero-content {
    /*margin: -16pt -12pt;*/
}

#portrait {
    width: 240pt;
    max-width: calc(100vw - 96pt);
    box-sizing: border-box;
    height: 440pt;
    max-height: 65vh;
    margin:  16pt 48pt;
    object-fit: cover;
    border-radius: 8pt;
}

.hero-link {
    margin-left: -16pt;
    font-size: min(4vw, 16pt);
}

.hlist {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.hlist-top {
    display: flex;
    flex-direction: row;
    align-items: start;
}

.vlist-left {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.vlist {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flexwrap {
    flex-wrap: wrap;
}

.icon {
    width: 20pt;
    height: 20pt;
    margin: 16pt;
}

.link-icon {
    width: 20pt;
    margin-right: 8pt;
}

.project a {
    font-weight: 500;
}

.hover-link {
    transition: all .2s ease-in-out;
}

.hover-link:hover {
    transform: translateY(-2px);
}

#bingo-die {
    width: 24pt;
    height: 24pt;
    transition: all 1s ease-in-out;
    cursor: pointer;
}

#bingo-die:hover {
    transform: rotate(690deg) scale(1.1,1.1);
}

#bingo-chip {
    padding: 6pt 22pt;
    background: rgba(255,255,255,0.1);
    transition: all .3s ease-in-out;
    cursor: pointer;
    border-radius: 9999pt;
}

#bingo-chip:hover {
    background: rgba(255,255,255,0.2);
}

#bingo-chip:active {
    background: rgba(255,255,255,0.15);
}

#bingo-chip-hint {
    margin-left: 22pt;
    margin-top: 4pt;
    opacity: 0.5;
    font-size: 10pt;
}

#bingo-chip-container {
    margin-left: 24pt;
}

#hero-scroll-hint > img {
    transition: all .4s cubic-bezier(.46,.9,.57,1.8);
}

#hero-scroll-hint:hover > img {
    transform: translateY(6pt);
}

#hero-scroll-hint > span {
    transition: all .4s ease-in-out;
}

#hero-scroll-hint:hover > span {
    transform: translateY(4pt);
}

#hero-bingo-container {
    margin-top: 16pt;
}

.project {
    margin: 0;
    padding: 96pt 12pt;
}

.project-content {
    max-width: 750pt;
    font-size: 14pt;
}

.project-logo {
    width: 120pt;
    height: 120pt;
    margin-left: 16pt;
    margin-right: 16pt;
}

.project-description {
    max-width: 550pt;
    margin-left: 16pt;
    margin-right: 16pt;
}

.project h2 {
    font-size: 28pt;
    font-weight: 500;
}

.release-hint {
    margin-left: 16pt;
    font-weight: 500;
}

.tech-bubble-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.tech-bubble-container span {
    font-weight: 500;
    padding: 1pt 12pt;
    margin-right: 8pt;
    margin-bottom: 6pt;
    border-radius: 9999px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#project-lumina .tech-bubble-container span {
    border: 2pt solid black;
}

#project-lumina .tech-bubble-container .highlight {
    background: black;
    color: #FFE300;
}

.screenshot {
    border-radius: 12pt;
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.25);
    transition: all .2s ease-in-out, object-position .5s ease-in-out;
    object-fit: cover;
    object-position: 50% 0%;
    cursor: pointer;
}

.screenshot:hover {
    -webkit-box-shadow: 0 2pt 16pt 0 rgba(0,0,0,0.45);
    -moz-box-shadow: 0 2pt 16pt 0 rgba(0,0,0,0.45);
    box-shadow: 0 2pt 16pt 0 rgba(0,0,0,0.45);
    transform: translateY(-2.5pt);
    object-position: 50% 100%;
}

.screenshot.mobile.focus:hover {
    -webkit-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.25);
    transform: none;
    object-position: 50% 100%;
    cursor: default;
}

.screenshot.mobile-tall {
    width: 120pt;
    height: 240pt;
    top: calc(50vh - 120pt);
    left: calc(50vw - 60pt);
}

.screenshot.mobile {
    width: 120pt;
    height: 215pt;
    top: calc(50vh - 120pt);
    left: calc(50vw - 60pt);
    border-radius: 6pt;
}

.screenshot.desktop {
    width: 200pt;
    height: 140pt;
    top: calc(50vh - 70pt);
    left: calc(50vw - 100pt);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

}

#screenshot-backdrop {
    transition: all .3s ease-in-out;
    z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: rgba(0,0,0,0.0);
    visibility: collapse;
}

#screenshot-backdrop.visible {
    visibility: visible;
    background: rgba(0,0,0,0.4);
    transition: all 1s ease-in-out;
}

.screenshot-container {
    width: 120pt;
    height: 240pt;
    margin-right: 32pt;
    margin-top: 24pt;
}

.screenshot-container.desktop {
    width: 200pt;
    height: 140pt;
    margin-right: 32pt;
    margin-top: 24pt;
}

.screenshot.focus {
    transition: all .4s ease-in-out, object-position 1.5s ease-in-out;
    z-index: 100;
    position: fixed;
}

.screenshot.mobile.focus {
    top: calc(50vh - 215pt);
    left: calc(50vw - 120pt);
    width: 240pt;
    height: 430pt;
}

.screenshot.mobile-tall.focus {
    top: calc(50vh - 240pt);
    left: calc(50vw - 120pt);
    width: 240pt;
    height: 480pt;
}

.screenshot.desktop.focus {
    top: calc(50vh - 140pt);
    left: calc(50vw - 200pt);
    width: 400pt;
    height: 280pt;
}

.project-table {
    margin-top: 16pt;
    width: 100%;
}

.project-table .header {
    width: 140pt;
    margin-top: 8pt;
}

.project-table .row {
    padding-top: 6pt;
    justify-content: start;
    width: 100%;
}

.project-table .cell-content {
    max-width: 410pt;
    width: 100%;
    margin-top: 8pt;
}

.project-link {
    margin: 8pt;
}

/* Lumina Specific */
#project-lumina {
    color: black;
    background: #FFE300;
    font-family: "Jost";
}

#project-lumina a {
    color: #0083FF;
    margin-right: 16pt;
}

/* Hourz Specific */
#project-hourz {
    color: black;
    background: white;
    font-family: "Roboto";
    font-weight: 300;
}

#project-hourz a {
    color: #0066ff;
    margin-right: 16pt;
}

#project-hourz .tech-bubble-container span {
    border: 2pt solid #0066ff;
    color: #0066ff;
}

#project-hourz .tech-bubble-container .highlight {
    background: #0066ff;
    color: white;
}


/* Woehler Specific */
#project-woehler {
    color: black;
    background: white;
    font-family: "Roboto";
    font-weight: 300;
}

#project-woehler a {
    color: #00682D;
    margin-right: 16pt;
}

#project-woehler .tech-bubble-container span {
    border: 2pt solid #00682D;
    color: #00682D;
}

#project-woehler .tech-bubble-container .highlight {
    background: #00682D;
    color: white;
}


/* BA specific */
#project-ba {
    color: white;
    background: #ACB5A7;
    font-family: "Century Gothic", "Poppins", "sans-serif";
}

#project-ba .project-content {
    width: calc(100vw - 48pt);
}

#project-ba a {
    color: white;
    margin-right: 16pt;
}

#project-ba .tech-bubble-container span {
    border: 2pt solid white;
    color: white;
}

#project-ba .tech-bubble-container .highlight {
    background: white;
    color: #ACB5A7;
}

#project-ba .project-table {
    color: #fff;
}