.header-protocols{
    background-image: url(https://static.igem.wiki/teams/4663/wiki/headers-of-pages/header-low-quality.png);
    position: static;
}

.page-title {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--palette-yellow) !important;
    background-color: rgba(0,0,0,0.2);
    font-family: "OpenSans", sans-serif;
    text-align: center;
    min-height: 550px;
    font-size: 4em;
}


.pdfDiv1 {
    background-color: #e1e6ea;
    display: flex;
    flex-direction: column;
    flex-flow: row wrap;
    width: 90%;
    align-items: center;
    justify-content: center;
}

.pdfDiv2 {
    background-color: #e5f0fa;
    display: flex;
    flex-direction: column;
    flex-flow: row wrap;
    width: 90%;
    align-items: center;
    justify-content: center;
}

.pdfTitle {
    font-family: "OpenSans", sans-serif;
    font-weight: bold;
    font-size: 2rem;
    color: var(--palette-purple);
    text-align: center !important;
    margin: 0;
    border-bottom: var(--palette-purple) 0.2rem solid;
    display: block;
    width: 100vw;
    padding: 1rem;
}



.pdfFrame {
    width: 80%;
    margin: auto;
}

.pdfButton {
    display: inline-block;
    box-sizing: content-box;
    background-color: #e1e6ea;
    width: 40%;
    color: rgb(111, 20, 20); 
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none !important;
    text-align: center;
    border-radius: unset;
    border: unset;
    transition: all 0.2s ease-in-out;
    border-color: #e1e6ea;
}

.pdfButton:hover {
    background-color: rgb(224, 219, 190);
    transform: scale(1.03);
}

.pdfButton.active {
    background-color: rgb(2, 94, 2);
    color: rgb(50, 22, 22);
}