statpagefolio_styles.css

/* Basic customization for elements */
#navbar-header-text {
    font-size: 1.2em; 
    color: #FFE5B4; 
}

.nav-link:hover {
    color: cream !important; background-color: #4C4CAA !important;
    border-radius: 8px;
}

.dropdown-item:hover {
    color: whitesmoke !important; background-color: #5B5EA4 !important;
}

.project-header-link {
    color: limegreen; font-size: calc(1.1em + 0.1vw);
}
.project-header-link:hover {
    color: rgb(51, 237, 51); text-decoration: none;
}

/* Displayed on md and sm devices card header styling */
#image-proc-header {
    font-size: 1em !important; font-weight: bold !important;
}

.btn-label {
    font-size: 0.95em !important;
}

h4, h5 {
    color: #f5f7e1 !important;
}

/* Additional adaptivity to the provided by Bootstrap */
/* xl breakpoint */
@media screen and (max-width: 1200px) {
    #image-processing-card, #quiz-card {
        width: 52vw !important;
    }
    #fluoscenepy-card {
        width: 36vw !important;
    }
}

@media screen and (min-width: 1201px) {
    #image-processing-card, #quiz-card {
        width: 30vw !important;
    }
    #fluoscenepy-card {
        width: 25vw !important;
    }
}

@media screen and (min-width: 1720px) {
    #image-processing-card, #quiz-card {
        width: 28vw !important;
    }
    #fluoscenepy-card {
        width: 22vw !important;
    }
}

/* sm breakpoint */
@media screen and (max-width: 576px) {
    #project-text {
        font-size: 1.1rem !important;
    }
}