/*********************************************
    Responsive Style for wide screens >1800 px
*********************************************/


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



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



/*********************************************
    Header
*********************************************/
header {
    padding: 20px 30px;
    flex-direction: row;
    text-align: start;
}
header .logo-title-container {
    justify-content: start;
    margin-left: 20%;
    margin-bottom: 0px;
}
header .logo img {
    height: 65px;
    margin-right: 20px;
}
header .site-title {
    font-size: 2rem;
}

nav {
    margin-right: 20%;
}
nav ul {
    flex-direction: row;
    gap: 20px;
}

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

.column{
    width: 60%;
    padding: 10px;
}

.filler {
    display: block;
    margin-top: 0px;
    width: 20%;
    padding: 10px;
    font-size: 1rem;
}

/*********************************************
    FOOTER
*********************************************/
footer {
    font-size: 1rem;
}
.footer_element {
    width: 17%;
}


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




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

.spacing-block {
    width: 48%; /* Set block width to 30% for three blocks per row */
}

.custom-nucleotides-container {
    font-size: 1rem;
}





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



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

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


/*********************************************
    MISC
*********************************************/



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

.tools-container {
    flex-direction: row;
    align-items: stretch;
}

.tool-button {
    width: 30%;
    padding-bottom: 20%;
}