/* 
// ===================================================================================================
// ## containers css
// =================================================================================================== 
*/

/* container */

#main-supercontainer {
    height: fit-content; width: 100%;
    padding-inline: 30px;
    box-sizing: border-box;
}

#second-supercontainer {
    display: flex; justify-content: center; align-items: center;
    height: fit-content; width: 100%;
    box-sizing: border-box;
    flex-direction: column;
}

#statistics-supercontainer {
    width: 100%; height: 100vh;
    display: flex; justify-content: center; align-items: center;
    height: fit-content; width: 100%;
    box-sizing: border-box;
    flex-direction: column;
}


.limited-container {
    width: 100%;
    max-width: var(--maxwidth);
    box-sizing: border-box;
    padding-inline: 30px;
}


.bordered-container {
    height: fit-content;
    border-inline: 1px solid var(--white-2);
    display: flex; justify-content: start; align-items: center;
    gap: 60px; box-sizing: border-box;
}

.top-bordered {
    border-top: 1px solid var(--white-2);
}
.bottom-bordered {
    border-bottom: 1px solid var(--white-2);
}

.terra-container {
    background-color: var(--terra);
}

/* .terra-container .active-link {
    color: var(--horizon) !important;
    border: 1px solid var(--horizon);
    background-color: transparent;
    background-image: radial-gradient(var(--horizon-light) 1px, transparent 1px);
    background-size: 10px 10px;
} */

/* specific containers */

#main-hero {
    padding: 140px 80px;
}

/* p5-cta container */
#p5-cta {
    width: 100%;
    height: 300px;
    margin-top: 40px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-inline: 1px solid var(--white-2);
    box-sizing: border-box;
}

#p5-cta canvas {
    display: block;
    max-width: 100%;
    height: auto;
}