:root {
    --bg-color: floralwhite;
    --text-color: sienna;
    --card-bg: #ffd4acce;
    --profile-bg: #fff1dd;
    --form-bg: rgba(211, 211, 211, 0.438);
    --biotext-bg: #fff1dd;
}


/* überschreibt aktuell in der Nacht den Switch auf hell*/
/* @media(prefers-color-scheme:dark){
    :root {
    --bg-color: #2d251e;          
    --text-color: #ffb380;        
    --card-bg: #6b4f3dcc;         
    --profile-bg:rgba(80, 70, 60, 1);
    --form-bg: rgba(80, 70, 60, 1);  
    --biotext-bg: rgba(80, 70, 60, 1);
    }
} */


[color-scheme = dark]:root {
    --bg-color: #2d251e;          
    --text-color: #ffb380;        
    --card-bg: #6b4f3dcc; 
    --profile-bg:rgba(80, 70, 60, 1);
    --form-bg: rgba(80, 70, 60, 1); 
    --biotext-bg: rgba(80, 70, 60, 1);
    }


body {
    background-color: var(--bg-color);
    font-family: 'Zurich';
}

nav > ul {
    display: flex;
    justify-content: flex-end
}

nav > ul > li {
    margin: 20px;
    list-style-type: none;
}

nav > ul > li a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: bold;
}

main {
    color: var(--text-color);
    text-align: center;
}

#portrait-landing-page {
    width: 35%;
}

#bio-landing-page {
    font-size: 1.2em;
    display: flex;
    max-width: 50%;
    margin: 0 auto;
    margin-bottom: 100px;
    background-color: var(--biotext-bg);
    border: 2px solid black;
    border-radius: 5px;
    padding: 10px;
    
}

.filter-buttons-container{
    display: flex;
    justify-content: center;
}

.filter-buttons-container > ul > li{
    background: var(--card-bg);
    border: 2px solid black;
    border-radius: 5px;
    padding: 10px;
}

.filter-buttons-container > ul > li:hover{
    transform: scale(1.15);
}



.projects-container{
    display: flex;
    flex-direction: column;
}


.project-card{
    background: var(--card-bg);
    border: 2px solid black;
    border-radius: 5px;
    margin: 12px;
    padding: 12px;
    font-size: 1.3em;
}

.project-card:hover{
    transform: scale(1.05);
}

.project-category-type{
    border: 2px solid black;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
}

#origin-own{
    background-color:darkkhaki;
    border-radius: 5px;
    padding: 5px;
    margin: 25px;
}

#origin-foreign{
    background-color:lightskyblue;
    border-radius: 5px;
    padding: 5px;
    margin: 25px;
}

.git-profile{
    background: var(--profile-bg);
    border: 2px solid black;
    border-radius: 5px;
    margin: 12px;
    padding: 12px;
    font-size: 1.3em;
    max-width: 100%;

}

.filterIndicator{
    font-size: 1.3em;
}

.hidden{
    display: none;
}


.skills-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.skill-card {
    background: var(--card-bg);
    border: 2px solid black;
    border-radius: 5px;
    margin: 12px;
    padding: 12px;
    font-size: 1.3em;
}

.skill-card:hover{
    transform: scale(1.075);
}

#contact-form {
    background-color: var(--form-bg);
    border-radius: 5px;
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.contact-form-row{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0;
} 

@media((min-width: 481px) and (max-width: 768px)){
    .contact-form-row{
        display: flex;
        flex-direction: row;
        gap: 10px;
        margin: 10px;
}

.skills-container{
    display: flex;
    flex-direction: row;
    justify-content:center;
    
}

.skill-card{
    margin: 6px;
    }

.projects-container{
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width:  75%;
}

}

@media(min-width: 769px){
    .contact-form-row{
        display: flex;
        flex-direction: row;
        gap: 10px;
        margin: 10px;
}

.skills-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.projects-container{
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 50%;
}
    
}