body, html {
        height: 98%;
        background-color: #2A1B3D;
        color: white;
        overflow: auto;
        min-width: 350px;
}


p, a {
    color: white;
}

h1, h1 a{
    color: #D83F87;
    font-size: 1.2em;
    display: inline;
    text-align: left;
}

h2, h5 {
    color: #D83F87;
}

h6 {
    color: #A4B3B6;
}

hr {
    border-color: #A4B3B6;
}

a:hover {
    color: #8265a7;
}

.global-container {
    margin: 3% auto;
    max-width: 95%;
    height: 94%;
}

.global-container .grid-margin-x {
    height: 98%;
}

.callout {
    height: 99%;
    background-color: #44318D;
    color: white;
}

.header {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between; 
    top:0%;
    left:0%;
    width:100%;
    background-color: #A4B3B6; 
    padding: 10px;
    color: #44318D;
    z-index: 1;
}

.language-switch {
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
    color: white;
    text-align: right;
    cursor: pointer; 
}

.lang-choice {
    margin-right:0%;
    text-align: right;

}

.title h1 {
    margin: 0;
    font-size: 1.2em;
}


.footer {
    background-color: #A4B3B6;
    padding: 10px;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.footer a {
    text-decoration: none;
    color: #D83F87;
    font-weight: bold;
}

.progress {
    background-color: #A4B3B6;
}

.progress-meter {
    background-color: #D83F87;
}

.button {
    background-color: #D83F87;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 4px;
}

.button:hover {
    background-color: #8265a7;
}

img {
    width:70%;
    max-width: 400px;
    margin:2% auto;
    border-style: solid;
    border-color: #2A1B3D;
    border-width: 5px 14px 7px 6px;
    transform: rotate(0.042rad);
}