:root{
    --background: #212a31; /* Charcoal */
    --primary: #c5a56e; 
    --secondary: #7c3e2e; /* Marsala */
    --bg-contrast: #d2d2c8; /* Taupe */ 
}

.experience-overview{

    h1{
        margin: 10px 0px;
    }

    p{
        margin: 10px 0px;
    }

    .card{
        border: 2px solid var(--secondary);
        border-radius: 5px;

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

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

        p{
            text-align: center;
        }
    }
}

.roles{
    .roles-key{
        display: flex;
        padding: 20px 0px 
        
    }

    .main-container{
        display: flex;
    }

    .timeline{
        position: relative;
        padding: 10px;
        margin: 5px;
        width: 600px;

        .timeline-item{
            display: flex;
            position: absolute;
            left: 10;
        }

        .current{
        top: 3%;
        }

        .previous-1{
            top: 30%;
        }

        .previous-2{
            bottom: 40%;
        }

        .previous-3{
            bottom: 20%;
        }

        .line{
            position: absolute;
            background-color: var(--primary);
            border-radius: 30%;
            left: 20px;
            width: 3px;
            height: 95%;
            margin-top: 20px;
        }

        .shape{
            background-color: var(--secondary);
            border-radius: 100%;
            width: 15px;
            height: 15px;
            margin: 5px;
            z-index: 100;
        }

        span{
            display: flex;
        }

        h5{
            margin: 5px;
        }
    }

    .role-container{
        padding: 10px;
        margin: 5px;

        .role-card{
            border: 2px solid var(--secondary);
            border-radius: 5px;
            padding: 10px;
            margin: 10px;

            .pill-container{
                display: flex;
                flex-wrap: wrap;

                .pill{
                    background-color: var(--secondary);
                    border-radius: 5px;
                    margin: 5px;
                    padding: 5px;
                    font-size: 12px;
                }
            }

            h2{
                color: var(--primary);
                margin: 5px 0px;
            }

            h3{
                color: var(--primary);
                margin: 10px 10px;
            }

            h4{
                margin: 5px 0px;
            }

            p{
                margin: 10px 0px;
            }

            .responsibilities-container{
                display: flex;
                flex-wrap: wrap;

                .responsibilities-1{
                    max-width: 300px;
                }

                .responsibilities-2{
                    max-width: 300px;
                }

                li{
                    font-size: 12px;
                    margin: 10px 0px;
                }
            }

        }
    }
}