#page-body {
    width: 100vw;
    margin: 0;
    height: 100vh;
}

h2 {
    text-align: center;
}

ul {
    text-align: justify;
    padding-left: 100px;
    padding-right: 50px;
}

p {
    text-align: justify;
    padding-left: 50px;
    padding-right: 50px;
}

h3 {
    padding-left: 50px;
    padding-right: 50px;
}

h4 {
    padding-left: 100px;
    padding-right: 50px;
}

ol {
    text-align: justify;
    padding-left: 150px;
    padding-right: 50px;
}

#sources-list {
    text-align: start !important;
    padding-left: 50px !important;
    padding-top: 25px;
}


.nav-card {
    width: 450px; 
    height:450px;
}

.nav-button {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    width: 450px;
    height:100%;
    color: rgb(100, 116, 132); 
    text-decoration-line: none;
}

#charts {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23647484' d='m7.4 15.289l3.05-3.031l2 2l4.05-4.045V12.5h1v-4h-4v1h2.286l-3.336 3.337l-2-2L6.712 14.6zM4 20V4h16v16zm1-1h14V5H5zM5 5v14z'/%3E%3C/svg%3E");
    background-size: 450px 450px;
}

#table-constructor {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23647484' d='M4 20V4h16v16zM5 8.5h14V5H5zM5 19h2.885V9.5H5zm11.116 0H19V9.5h-2.884zm-7.231 0h6.23V9.5h-6.23z'/%3E%3C/svg%3E");
    background-size: 450px 450px;
}

#table-constructor:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%234e473f' d='M4 20V4h16v16zM5 8.5h14V5H5zM5 19h2.885V9.5H5zm11.116 0H19V9.5h-2.884zm-7.231 0h6.23V9.5h-6.23z'/%3E%3C/svg%3E");
    box-shadow: 0px 5px 10px rgba(78, 71, 63, .5);
    transition: 1s;
}

#charts:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%234e473f' d='m7.4 15.289l3.05-3.031l2 2l4.05-4.045V12.5h1v-4h-4v1h2.286l-3.336 3.337l-2-2L6.712 14.6zM4 20V4h16v16zm1-1h14V5H5zM5 5v14z'/%3E%3C/svg%3E");
    box-shadow: 0px 5px 10px rgba(78, 71, 63, .5);
    transition: 1s;
}

.nav-button:hover {
    color: rgb(78, 71, 63); 
    transition: 1s;
}

.nav-card:hover {
    box-shadow: 0px 5px 10px rgba(78, 71, 63, .5);
    transition: 1s;
}

#home-nav:hover {
    box-shadow: 0px 5px 5px rgba(78, 71, 63, .5);
    transition: 1s;
}

#home-page {
    background-image: url("/assets/home_background.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; 
}

#why-pgsql {
    padding-top: 20px;
}

#about-db-page {
    background-image: url("/assets/home_background.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; 
}

#sources-page {
    background-image: url("/assets/home_background.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; 
}

#nav-cards-container {
    display: flex; 
    margin-bottom: 10px; 
    padding-top: 20px; 
    width: 1000px;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
}

#home-main-content {
    margin-left: auto;
    margin-right: auto;
    width: 1100px;
    height: calc(100vh - 40px);
    background-color: rgba(255, 250, 240, 0.85);
    backdrop-filter: blur(6px);
    box-shadow: 0px 20px 20px rgba(249, 246, 241, .9);
    overflow-y: auto;
    scrollbar-color :rgb(35, 49, 63) rgba(255, 255, 255, 0);
    background-color: rgba(255, 250, 240, 0.85);
}

.config-row {
    margin-bottom:5px;
    display: flex;
    padding: 0px;
}

.page-layout {
    width: 100%; 
    height: 100%;
    padding: 0px;
}

#filters-charts {
    max-height: calc(100vh - 90px);
    overflow-y: auto;
}