body{
    background-color: white;
    color: black;
    margin: 0;
    font-family: "antarctican-mono", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 13px;
}
.container{
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    width: 100%;
    padding-bottom: 3rem;
}
.projekte__titel{
    font-family: "antarctican-mono", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 13px;
    margin-top: 0.5rem;
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease-in-out;
    z-index: 100;

}
.projekte__titel:hover {
    color: #888;
}
.about__me{
    font-family: "antarctican-mono", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 13px;
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease-in-out;
}
.about--me{
    font-family: "antarctican-mono", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 13px;
    text-align: center;
    padding-top: 5rem;
}
.about__me:hover{
    color: #888;
}
.projekte__inszeniert img{
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.projekte__titel2{
    font-family: "antarctican-mono", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 13px;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.projekte__beschreibung{
    font-family: "antarctican-mono", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 13px;
    text-align: justify;
    width: 280px;
    margin: auto;
    padding-bottom: 0.5rem;
}
.projekte__beschreibung::after {
    content: '';
    width: 100%;
}
.projekte__definition{
    font-family: "antarctican-mono", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 13px;
    text-align: center;
}
.hashtag{
    font-family: "antarctican-mono", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 13px;
    text-align: center;
    padding-top: 5rem;
}
.carrot img{
    width: 60%;
    display: block;
    margin: 0 auto;
    padding-top: 5rem;
}
.video{
    width: 30%;
    margin: 5rem auto 5rem auto;
    background-color: #f0f0f0;
    padding: 0.1rem;
}
.video video{
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 834px){
    .projekte__titel{
        font-size: 13px;
    }
    .about__me{
        font-size: 13px;
    }
    .projekte__titel2{
        font-size: 13px;
        padding-top: 2rem;
        padding-bottom: 0%;
    }
    .projekte__beschreibung{
        font-size: 13px;
        width: 250px;
        text-align: justify;
        padding-bottom: 1rem;
        padding-top: 0.5rem;
    }
    .projekte__definition{
        font-size: 13px;
        
    }
    .portrait img {
        width: 70%;
        min-width: 500px;
    }
    .carrot img {
        width: 100%;
    }
    .video{
        width: 60%;
        margin: auto
    }
    .video video{
        width: 100%;
        height: auto;
        display: block;
    }
}
@media (max-width:430px){
    .projekte__beschreibung{
        font-size: 13px;
        width: 50%;
        text-align: justify;
        padding-bottom: 2rem;
        padding-top: 0.2rem;
        width: calc(230 / 320 * 100%);
    }
    .projekte__titel2{
        font-size: 13px;
        padding-top: 2rem;
        padding-bottom: 0%;
    }
    .projekte__definition{
        font-size: 13px;
    }
    .about__me{
        font-size: 13px;  
    }
    .projekte__titel{
        font-size: 13px;
    }
    .portrait img{
        width: 60%;
        min-width: 300px;
    }
    .carrot img {
        width: 100%;
    }
    .video{
        width: 60%;
        margin: auto
    }
    .video video{
        width: 100%;
        height: auto;
        display: block;
    }
}

.repros img{
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.portrait{
    position: fixed;
    bottom: 0;
    width: 100vw;
    display: flex;
    justify-content: center;
}
.portrait img{
    width: calc(500 / 1280 * 100%);
    height: auto;
}

.dark-mode {
    background-color: #121212; 
    color: #e0e0e0; 
}

.dark-mode a {
    color: #e0e0e0; 
}

.dark-mode .about__me:hover, 
.dark-mode .projekte__titel:hover {
    color: #BB86FC; 
}