body {
    background-color: white;
    color: rgb(110, 109, 109);
    padding: 100px clamp(100px, 15vw, 500px);
    font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
}

iframe {
    border: none;
}

.page-title{
    padding: 20px 0;
    font-size: 48px;
    font-weight: bold;
}

.page-subtitle{
    padding: 10px 20px;
    font-size:24px;
}

.section-title{
    padding: 20px 0 20px 0;
    font-size: 36px;
}

.text-container {
    margin-top: 10px;
    padding: 20px 20px 20px 20px;
    font-size: 18px;
    /* border: 2px solid rgb(205, 205, 205); */
    border-radius: 10px;
    line-height: 1.7;
}

.plot-note {
    margin-top: 10px;
    padding: 20px 20px;
    font-size: 15px;
    line-height: 1.7;
}

.plot-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 0px;
}

.plot-area {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.plot-area-row {
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: row;
    column-gap: 50px;
    /* justify-content: space-between; */
    margin-top:20px;
}

.embedded-plot{
    margin-top: 10px;
}

.button-wrapper {
    width: 300px;
    display: flex;
    column-gap: 10px;  
}

.my-button {
    appearance: button;
    cursor: pointer; 
    padding: 2px 20px;
    border: 2px solid rgb(187, 182, 182);
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.2s ease;
}

.my-button:hover {
    color:#405bf5be;
    border: 2px solid #405bf5be;
}

.highlighted {
    background-color:#dce1ff;
    border: 2px solid rgb(187, 182, 182);
}