/*********************************************
    Responsive Style for mobile: <900 px
*********************************************/


/*********************************************
    Main Parameters
*********************************************/



/*********************************************
    Typography
*********************************************/



/*********************************************
    Header
*********************************************/
header {
    padding: 10px;
    flex-direction: column;
    text-align: center;
}
header .logo-title-container {
    justify-content: center;
    margin-left: 0;
    margin-bottom: 10px;
}
header .logo img {
    height: 40px;
    margin-right: 5px;
}
header .site-title {
    font-size: 1rem;
}

nav {
    margin-right: 0;
}
nav ul {
    flex-direction: column;
    gap: 10px;
}
nav ul li {
    margin: 2px;
}

/*********************************************
    LAYOUT CONTAINERS
*********************************************/

.column{
    width: 100%;
    padding: 10px 0;
}

.filler {
    display: block;
    margin-top: 10px;
    width: 100%;
    padding: 10px 0;
}

/*********************************************
    FOOTER
*********************************************/

.footer_element {
    width: 100%;
}


/*********************************************
 * Navigation Bar - left Panel
 *********************************************/




/*********************************************
 * Containers
 *********************************************/

.spacing-block {
    width: 100%; /* When the screen is too small, use full width */
}


.custom-nucleotides-container {
    font-size: 0.75rem;
}
.custom-nucleotide-block {
    width: 100%; /* Set block width to 30% for three blocks per row */
    min-width: 300px; /* Minimum width to prevent overcrowding on smaller screens */
}
.unit-cell {
    padding-left: 2px; /* Small padding to create a cozy space */
    white-space: nowrap; /* Prevent the unit from wrapping onto the next line */
}
.input-field {
    width: 100%; /* Ensure the input field takes up full width of the td, or adjust as needed */
}

/*********************************************
    Forms
*********************************************/



/*********************************************
 * TABLES
 *********************************************/

 /* Results Table */
/* To be used for math calculations on the main forms for instance*/
.result-table th:first-child {
    width: 50%;
}
.result-table th:nth-child(2) {
    width: 50%;
}


/*********************************************
 * LANDING PAGE
 *********************************************/
 .landing-container {
    width: 85%;
}

.tools-container {
    flex-direction: column;
    align-items: center;
}

.tool-button {
    width: 100%;
    padding-bottom: 40%;
}


/*********************************************
    MISC
*********************************************/
.hide-on-mobile {
    display: none;
}