styles.css

/* General Styles */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: white;
    color: #4B0082;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header Styles */
header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #C8A2C8;
    padding: 10px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    flex-wrap: wrap;
}

.header-left {
    display: flex;
    align-items: center;
}

.logo {
    width: 48px;
    height: 48px;
    margin-right: 10px;
}

h1 {
    margin: 0;
    color: white;
    font-size: 1.5em;
}

/* Navigation Styles */
nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex: 1;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 2px solid transparent;
}

nav a:hover {
    background-color: #A66BB7;
}

nav a.active {
    background-color: #4B0082;
    color: white;
    border-bottom: 2px solid #4B0082;
}

/* Main Content Styles */
main {
    width: 80%;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    flex: 1;
}

section {
    margin-bottom: 40px;
}

section h2 {
    color: #C8A2C8;
    text-align: center;
}

.intro-text {
    font-size: 1.1em;
    line-height: 1.6;
    color: #4B0082;
    margin: 10px 0;
}

/* DTool Grid Styles */
.dtool-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto auto auto;
    gap: 10px;
    margin-top: 20px;
}

.dtool-grid .block {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px;
    font-weight: bold;
    border-radius: 5px;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dtool-grid .block:hover {
    transform: translateY(-5px);
}

.dtool-grid .user-interaction {
    grid-column: 3 / span 2;
    grid-row: 1;
    background-color: #8CC63F;
    color: white;
}

.dtool-grid .automated-execution {
    grid-column: 1 / span 3;
    grid-row: 2;
    background-color: #8CC63F;
    color: white;
}

.dtool-grid .terminal {
    grid-column: 3;
    grid-row: 3;
    background-color: #F2F2F2;
    color: #666666;
}

.dtool-grid .gui {
    grid-column: 4;
    grid-row: 3;
    background-color: #E6F3FF;
    color: #244c6f;
}

.dtool-grid .python-api {
    grid-column: 1 / span 4;
    grid-row: 4;
    background-color: #E6F3FF;
    color: #244c6f;
}

.dtool-grid .block.storage-broker {
    display: flex;
    justify-content: space-between;
    grid-row: 5;
    align-items: stretch;
    background-color: transparent;
    margin-top: 10px;
    padding: 0;
    gap: 10px;
}

.block.storage-item {
    flex: 1;
    padding: 10px;
    border-radius: 5px;
    color: #244c6f;
    display: flex;
    align-items: center;
    justify-content: center;
}

.block.storage-item.disk {
    background-color: #E6F3FF;
    grid-row: 5;
}

.block.storage-item.smb {
    background-color: #E6F3FF;
    grid-row: 5;
    grid-column: 2 / span 1;
}

.block.storage-item.s3 {
    background-color: #E6F3FF;
    grid-column: 3;
}

.block.storage-item.other {
    background-color: #E6F3FF;
}

.block.storage-item a {
    color: #244c6f;
    text-decoration: none;
}

.block.file-system,
.block.network-share,
.block.object-storage,
.block.other-infrastructure {
    margin-top: 10px;
    padding: 10px;
    justify-content: center;
    border-radius: 5px;
}

.dtool-grid .block.file-system {
    grid-row: 6;
    background-color: #F2F2F2;
    color: #666666;
}

.block.network-share {
    grid-column: 2;
    grid-row: 6;
    background-color: #FFF2CC;
    color: #9c8735;
}

.block.object-storage {
    grid-column: 3;
    grid-row: 6;
    background-color: #FFE6E6;
    color: #7b1d13;
}

.block.other-infrastructure {
    grid-column: 4;
    grid-row: 6;
    background-color: #F2F2F2;
    color: #666666;
}

/* DServer Grid Styles */
.dserver-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto auto auto;
    gap: 10px;
    margin-top: 20px;
}

.dserver-grid .block {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px;
    font-weight: bold;
    border-radius: 5px;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dserver-grid .block:hover {
    transform: translateY(-5px);
}

.dserver-grid .user-interaction {
    grid-column: 3 / span 4;
    background-color: #8CC63F;
    color: white;
}

.dserver-grid .automated-execution {
    grid-column: 1 / 4;
    grid-row: 2;
    background-color: #8CC63F;
    color: white;
}

.dserver-grid .terminal {
    grid-column: 3;
    grid-row: 3;
    background-color: #F2F2F2;
    color: #666666;
}

.dserver-grid .gui {
    grid-column: 4;
    grid-row: 3;
    background-color: #E6F3FF;
    color: #729fcf;
}

.dserver-grid .python-api {
    grid-column: 2 / -1;
    grid-row: 4;
    background-color: #E6F3FF;
    color: #244c6f;
}

.dserver-grid .webapp {
    grid-column: 5;
    grid-row: 3/span 2;
    background-color: #E6FFEF;
    color: #93e6c1;
}

.dserver-grid .restapi {
    grid-column: 1 / span 5;
    grid-row: 6;
    background-color: #E6FFCC;
    color: #4d5a31;
}

.dserver-grid .flask {
    grid-column: 1;
    grid-row: 7;
    background-color: #E6F9FF;
    color: #1a6c73;
}

.dserver-grid .search-plugin,
.dserver-grid .retrieve-plugin,
.dserver-grid .other-plugins {
    grid-row: 7;
    background-color: #E6F9FF;
    color: #00bcf2;
}
.other-plugins{
    grid-column: 4/ span2;
}

.dserver-grid .database {
    grid-column: 1 / 1;
    grid-row: 8;
    background-color: #CCE5FF;
    color: #00bcf2;
}

.dserver-grid .mongodb {
    grid-column: 2 / span 2;
    grid-row: 8;
    background-color: #E6FFEF;
    color: #88c4fd;
}

.dserver-grid .other-database {
    grid-column: 4 / span 2;
    grid-row: 8;
    background-color: #F2F2F2;
    color: #666666;
}

/* Adjust icon sizes */
.dtool-grid .block img,
.disc.storage.broker img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}
.dserver-grid .database img, 
.python-api img , .terminal img, .gui img, .webapp img, .restapi img, .flask img, .other-database img, .mongodb img
{
    width: 50px;
    height: 50px;
    margin-right: 10px;
}
/* Funding Badge Styles */
.funding-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
    margin-top: auto;
}

.funding-badges img {
    width: 70px;
    height: 70px;
    margin: 0 10px;
    transition: transform 0.3s ease;
}

.funding-badges img:hover {
    transform: scale(1.1);
}

.text {
    font-size: 18px;
    font-weight: bold;
    color: #5f2b86;
    margin: 0 20px;
}

/* Footer Styles */
footer {
    width: 100%;
    padding: 20px 0;
    background-color: #f8f9fa;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: auto;
}

footer p {
    margin: 0;
    color: #4B0082;
    font-size: 0.9em;
}