* {
    overflow-x: hidden;
    margin: 0;
}

body {
    background-color: rgb(250, 250, 250);
}

.title {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 5em;
}

.sub-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1em;
}

.sub-title p {
    padding-bottom: .5em;
    padding-top: 7em;
}

.title p,
.title h1,
.title a {
    font-size: 1em;
    color: black;
}

.box {
    background-color: white;
    border: solid;
    border-radius: 10px;
    border-color: white;
    padding: 1em;
    display: grid;
    grid-template-areas:
        "RNA1 ATAC"
        "RNA2 ATAC";
    place-content: center;

}

.RNA1 {
    grid-area: RNA1;
    display: grid;
    grid-template-columns: auto auto;
    place-content: center;
}

.RNA2 {
    grid-area: RNA2;
    display: grid;
    grid-template-columns: auto auto;
    place-content: center;
}

.ATAC {
    grid-area: ATAC;
    display: grid;
    grid-template-columns: auto auto;
    place-content: center;
    max-width: 33vw;
}

.box p {
    font-size: 1.25em;
}

.text{
    font-size: 75%;
    margin: auto;
    overflow-y: hidden;

}

.s1,
.s1-image {
    width: 45vh;
    max-width: 30vw;
    height: auto;
    overflow-y: hidden;
}

.s2,
.s2-image {
    width: 45vh;
    max-width: 30vw;
    height: auto;
    overflow-y: hidden;
}


.d1,
.d1-image,
.d1-search {
    width: 49vh;
    max-width: 30vw;
    height: auto;
    overflow-y: hidden;
}

.d2,
.d2-image,
.d2-search {
    width: 65vh;
    max-width: 30vw;
    height: auto;
    overflow-y: hidden;
}

.d3,
.d3-image,
.d3-search {
    width: 50vh;
    max-width: 30vw;
    height: auto;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1.5em;
    font-family: Arial, Helvetica, sans-serif;
}


.main {  
    display: flex;
    flex-direction: column;
    align-items: center;
}