/* CSS RESET */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/*font stufff*/

@font-face {
    font-family: 'Inter-Regular';   
    font-display: swap;
    src: url('fonts/Inter-Regular.woff'); 
    src: url('fonts/Inter-Regular.woff') format('woff'),
}
@font-face {
    font-family: 'Inter-Light';  
    font-display: swap; 
    src: url('fonts/Inter-Light.woff'); 
    src: url('fonts/Inter-Light.woff') format('woff'),
}
@font-face {
    font-family: 'Inter-Thin';   
    font-display: swap;
    src: url('fonts/Inter-Thin.woff'); 
    src: url('fonts/Inter-Thin.woff') format('woff'),
}
@font-face {
    font-family: 'Inter-ThinItalic'; 
    font-display: swap;  
    src: url('fonts/Inter-ThinItalic.woff'); 
    src: url('fonts/Inter-ThinItalic.woff') format('woff'),
}
@font-face {
    font-family: 'Inter-Bold';   
    font-display: swap;
    src: url('fonts/Inter-Bold.woff'); 
    src: url('fonts/Inter-Bold.woff') format('woff'),
}
@font-face {
    font-family: 'InterDisplay-Black';   
    font-display: swap;
    src: url('fonts/InterDisplay-Black.woff'); 
    src: url('fonts/InterDisplay-Black.woff') format('woff'),
}
@font-face {
    font-family: 'InterDisplay-ExtraLightItalic';  
    font-display: swap; 
    src: url('fonts/InterDisplay-ExtraLightItalic.woff'); 
    src: url('fonts/InterDisplay-ExtraLightItalic.woff') format('woff'),
}

@font-face {
    font-family: 'Saint';
    src: url('fonts/Saint.ttf');
}
  
h1 {
    font-family: 'InterDisplay-Black';
    padding-top: 0.4rem;
}
.saint {
    font-family: 'Saint';
}
h3 {
    font-size: 1.5rem;
}

html {
    font-family: 'Inter-Light';       
    letter-spacing: .05em; 
}

body {
    transition: filter 1s;
}

.blurred {
    filter: blur(500px);
}

p, li {
    line-height: 1.5em;
    font-size: .9em;
}

a {
    color: var(--text);
}


:root {    
    --bg: #16161a;
    --text: #F6F7ED;
    --grey: #f6f7edb9;
    --accent: #7f5af0;
}

p, h1, h2, h3, h4, span, li {
    color: var(--text);
}

.list_item {
    list-style-type: disc;
    margin-left: 3rem;
    padding: 0.2rem 0;
}

h3 {
    margin: 1em 0;
}

@media only screen and (max-width: 700px) {
    h3 {
        font-size: 1.1rem;
    }
}

.card-header h3 {
    margin: 0;
}

h4 {
    font-size: 1.25rem;
    margin-top: 0.7em;
    margin-bottom: 0.5em;
}

.tag_cloud {
    /* position: absolute;
    right: 0; */
    display: flex;
    justify-content: end;
    padding-right: 3rem;
    /* width: 25rem;
    margin-right: -35rem; */
}

.tag_bubble {
    border: 1px solid var(--grey); 
    border-radius: 10px; 
    padding: 0 10px;
    margin: 0 .2rem;
    color: var(--grey); 
    font-size: .7em;
}

@media only screen and (max-width: 700px) {
    .tag_cloud {
        display: none;
    }
}


#logo-wrapper {
    border: 1px var(--text) solid;
    width: 80vw;
    margin: auto;
    height: fit-content;
    padding: 0 1rem;
    margin-top: 5vh;    
}

h1 {
    font-size: 1rem;
}

body, html {
    margin: 0;
    height: 100vh;    
    overflow-x: hidden;    
    background-color: var(--bg);
}

#name {    
    display: flex;
    justify-content: space-between;    
    font-size: clamp(50px, 8vw, 100px); 
    opacity: 0;    
    text-align: center;
    transition: opacity 700ms ease-in-out;  
    transition-delay: 500ms;
    max-width: 100vw;    
}

#name.loaded {    
    opacity: 1;   
}

#intro-text-wrapper {
    display: flex;
    justify-content: flex-end;
}

#intro-text {
    margin: 10vh 10vw 7vh 10vw;
}

#intro-text p {
    max-width: 40ch;
}
#intro-text p:not(:first-child) {
    margin-top: 1em;
}


#projects-list {

    margin: 0 10vw 10vh 10vw;
}

.project-card {
    border-top: 1px solid var(--text);
}

.project-card:last-child {
    border-bottom: 1px solid var(--text);    
}

.card-header:hover {
    cursor: pointer;        
}

.card-header {
    display: flex;
    justify-content: space-between;   
    padding: 1.5rem 1rem 1.5rem 1rem;      
}

.card-header .right_section {
    display: flex;
}

.card-header .right_section > span {
    transition: transform 1s ease-out;
    font-size: 1.5rem;
    justify-self: flex-end;
}
.card-header > h3 {
    justify-self: flex-start;
    width: 20rem;
}

.card-content {    
    max-height: 0;
    overflow: hidden;
    padding: 0 1rem 0 1rem; 
}
.card-content p {    
    margin: 2em 0;    
}

.card-content {    
    max-height: 0;
    overflow: hidden;    
    transition: max-height 1s cubic-bezier(0, 1, 0, 1);
}

.card-content.active {
    max-height: 1000px;    
    transition: max-height 1s ease-in-out;
}
.project-card.active > .card-content {
    max-height: 4500px;    
    transition: max-height 1s ease-in-out;
}
.project-card.active > .card-header > h3 {
  color: var(--accent);
}
.project-card.active > .card-header .right_section > span {
    color: var(--accent);
}

.project-desc {
    max-width: 80ch;
}
.project-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;    
}

.subheadline {
    font-family: Inter-Bold;
}

.info-stats {
    font-family: Inter-ThinItalic;
}

.project-info p {
    margin: 0;
    line-height: 1.6em;
}

.project-card.active > .card-header .right_section > span {   
   transform: rotate(45deg);
   transition: transform 1s ease-out;
}

.images {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 5vh;
}

.img-container {    
    margin: 2.5em 0;
}

.img-small {
    width: 15%;
}
.img-mid {
    width: 30%;
}
.img-mid-center > img {
    width: 60%;
}
.img-large {
    width: 48%;
}
.img-full-width {
    width: 100%;
}
.img-large-center, .img-mid-center {
    width: 100%;
    display: flex;
    justify-content: center;
}
.img-large-center > img {
    width: 65%;
}


img {
    max-width: 100%;
    height: auto;
}


footer {
    height: 10vh;
    width: 100%;
    padding-top: 5vh;
    
}
#keep_smiling {
    text-align: center;
    padding: 3em;
}
#link_container {
    display: flex;
    align-items: center;
    justify-content: center;

}

#link_container > a > button:hover {
   cursor: pointer; 
   width: 11em;
   height: 4em;   
}
#link_container > a {
    margin: 2em;
}
#link_container > a > img {
    width: 2em;
    filter: invert(0.3);
}
#link_container > a > img:hover{    
    filter: invert(0.7);
}
#link_linkedin {
    width: 1.6em;
}

#keep_smiling {
    transition: transform 1s ease-in; 
}

#keep_smiling.expand {
    transform: rotate(360deg);    
}

#year {
    text-align: center;
    padding: 3em;
    font-size: 0.6em;
}


@media (max-width: 450px) {
    .project-info {
        flex-direction: column;
    }
    .info-stats {
        margin-top: 1em;
    }
}

@media (max-width: 650px) {
    #projects-list {
        margin: 0 5vw 10vh 5vw;
    }
    .images {
        justify-content: center;
    }

    .img-small, .img-mid, .img-large, .img-mid-center, .img-large-center {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .img-small {
        width: 70%;
    }
    .project-card.active > .card-content {
        max-height: 4500px;
    }   

    .img-large-center > img {
        width: 100%;
    }

    .img-mid-center > img {
        width: 100%;
    }
}

#impressum main {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#impressum main h1 {
    margin: 4em 0 2em 0;
    font-size: 2rem;
}

#impressum main h2 {
    margin: 2em 0 1rem 0;
    font-size: 1.5rem;
}

#impressum main h3 {
    margin: 1.2em 0 1rem 0;
    font-size: 1.2rem;
}
#impressum main h4 {
    color: var(--text);
    margin: 1.2em 0 1rem 0;
    font-size: 1rem;
}
#impressum main li {
    color: var(--text);
    margin: 1em 0 1rem 1rem;
}
#impressum main h2:first-of-type {
    margin: 3em 0 1rem 0;
}

#impressum main div {
    width: fit-content;
    max-width: 60ch;
}
    
.video-container > video {
    width: 100%;
}

#link_x > img {
    width: 1.6em !important;
}