body{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
    background-color: #dacfc4;
    color: #1a1a1a;
    transition: background-color 300ms;
    letter-spacing: .7px;
}
#nomobile{display: none;}
ul{
    width: 50vw;
    position: fixed;
    left: 50vw;
    list-style: none;
    padding: 0;
    bottom: 0px;
    height: 100vh;
    top: 0;
    margin: 0;
    font-size: 16px;
}
#nav{
    border-left: 1px solid black;
    transition: border 300ms, color 300ms;
}
.punkt{
    /* width: 100px;
    height: 100px;
    position: absolute;
    border-radius: 50%; */
    border-bottom: 1px solid black;
    width: 50vw;
    padding: 12.9px 50px;
    transition: border 300ms;
}

a{text-decoration: none;color: #1a1a1a;transition: color 300ms;}
.actual-link{text-decoration: underline;}
button{padding: 10px 20px; border: 1px solid #f2aaf5;color: #f2aaf5;background-color: #0b9c80; width: fit-content;transition: background-color 300ms, color 300ms, border 300ms;letter-spacing: 1px;font-size: 16px;}
.arrow{height:12px;padding-right:6px}
.left{text-align: left;width: calc(50vw / 3 - 50px);display: inline-block;}
.center{text-align: center;width: calc(50vw / 3 - 50px);display: inline-block;}
.right{text-align: right;width: calc(50vw / 3 - 50px);display: inline-block;}
#contact{
    display: flex;
    flex-direction: row;
    width: 50vw;
    padding: 0px;
    border-top: 1px solid black;
    background-color: #dacfc4;
    height: calc((50vw - 100px) / 2 - 2px);
    transition: background-color 300ms, border 300ms, color 300ms;;
}
#PB{width: calc((50vw - 100px) / 2);border-right: 1px solid black;transition: border 300ms;}
#PB-img{ width: calc((50vw - 100px) / 2 - 2px); border-radius: 50%;border:1px solid black;transition: border 300ms;}
.contact-links{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: calc(50vw - ((50vw - 100px) / 2));
}
.contact-link{
    padding: 10px 20px;
    border-bottom: 1px solid black;
    width: calc(100% - 40px);
    font-size: 16px;
    transition: border 300ms, color 300ms;
}
section{
    width: 100vw;
    height: 100vh;
    position: relative;
    transition: background-color 300ms;
    overflow: hidden;
}
.display-container{
    width: 50vw;
    height: 100vh;
    position: relative;
    overflow-y: scroll;
}
.text-container{
    top: 50px;
    left: 50px;
    z-index: 0;
    position: absolute;
    font-size: 16px;
}
.project-content{
    width: 50vw;
    height: 100vh;
    top: 0;
    left: 0;
    position: absolute;
    margin-bottom: 50vh;
    top: 80vh;
}
.content{
    display: flex;
    gap: 50px;
    flex-direction: column;
    width: calc(50vw - 100px);
    padding: 0 50px 100px 50px;
    
}
.content-CV{
    width: 50vw;
    overflow-y: scroll;
}

h1{
    font-size: 3rem; 
    font-weight: 100;
    letter-spacing: -3.5px;
    font-family: "dico-mono", mono;
    font-style: normal;
    text-transform: uppercase;
    transition: color 300ms;
}
canvas{display: block;}
h2{
    font-size: 3rem; 
    font-weight: 100;
    letter-spacing: -3.5px;
    font-family: "dico-mono", mono;
    font-style: normal;
    text-transform: uppercase;
    transition: color 300ms;
}
p{
    max-width: calc(50vw - 100px);
    line-height: 1.3;
    transition: color 300ms;
}
nav{
    display: none;
}
.bio{
    max-width: 400px;
    z-index: 0;
    position: relative;
}
.project-preview{
    opacity: 0;
    pointer-events: none;
    z-index: 500;
    position: fixed;
    transition: opacity 200ms;
}


.CC-video{width: 45vw; position: fixed; border-radius: 5px;}
.CC-video-1{top: 50vh;left: 25vw; transform: translate(-50%, -50%);}
.CC-video-2{top: 35vh; right: 105vw;}
.DG-gif{ position: fixed; top: 50vh; left: 25vw; transform: translate(-50%,-50%);height:90vh;border-radius: 5px;}
.mantra-video{position: fixed; top: 50vh; transform: translate(-50%, -50%);left: 25vw; width: 45vw;border-radius: 5px;}
.km-img{position: fixed;}
.km-1{opacity: 0;}
.km-2{position: fixed;width: 40vw; left:25vw;top:50vh;transform: translate(-50%,-50%);}
.s1-img{position: fixed; top: 50vh; transform: translate(-50%, -50%);height: 80vh;}
.s1-1{left: 35vw;top: 0vh; height: 100vh; transform: rotate(30deg);opacity: 0;}
.s1-2{left: 25vw;top:50vh; transform: translate(-50%, -50%) rotate(40deg);transform-origin: center;}
.SFS{position: fixed;;width: 45vw;right: 25vw;top:50vh;transform: translate(-50%,-50%)}
.comingcloser{width: 50vw;
    height: auto;
    position: absolute;
    left: 25vw;
    top: 50vh;
    transform: translate(-50%, -50%);}


/*    PROJECTS    */
.content > video{
    width: calc(50vw - 100px);
    position: relative;
    left: 0;
    top: 0vh;
    border-radius: 5px;
}
.content > img {width: calc(50vw - 100px);
    position: relative;
    left: 0;
    top: 0vh;
    border-radius: 5px;}
.project-DG{position: relative;}


/*  CV  */

#CV{
    width: 50vw;
    position: relative;
    left: 0;
    font-size: 24px;
    background-color: #dacfc4;
    border-top: 1px solid black;
    height: fit-content;
    transition: background-color 300ms, border 300ms;
}

.CV-date{display: inline-block;white-space: nowrap;margin-right: 25px;    font-size: 16px;}
.CV-text{text-align: right;display: inline-block;    font-size: 16px;}
.wrap{white-space: wrap;}
#CV > li{
    border-bottom: 1px solid black;
    padding: 12.9px 50px;
    display: flex;
    justify-content: space-between;
    transition: border 300ms, color 300ms;
}

.CV-headline{font-size: 3rem; 
    font-weight: 100;
    letter-spacing: -3.5px;
    margin-bottom: 10px;
    font-family: "dico-mono", mono;
    font-style: normal;
    text-transform: uppercase;
}
.flex-2{
    display: flex;
    width: calc(50vw - 100px);
    left: 0;
    position: relative;
    flex-direction: row;
    gap: 50px;
}
.flex-3{
    display: flex;
    width: calc(50vw - 100px);
    left: 0;
    position: relative;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}
.flex-3 > img,video{
    width: calc((50vw - 120px) / 3);
    border-radius: 5px;
}
.flex-2 > video{
    width: calc((50vw - 150px) / 2);
    border-radius: 5px;
}
.flex-2 button{
    width: calc((50vw - 150px) / 2);
    border-radius: 5px;
}
@media screen and (max-width:1000px){
    section{display: none;}
    ul{display: none;}
    #nomobile{display: block;}
}