/* cards, sections, heading, etc */
#header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
    background-color: var(--main-green);
}

#header > h1, #header > h2 {
    margin: auto 0;
}

h1 {  
    position: fixed;
    left: calc(50% - 50px);
    padding-top: 15px;
}

#reading-pane {
    margin: 0px auto; 
    max-width: 100vw;
    width: 900px;
    padding: 20px;
    background-color: var(--alt-blue-opacity9);  
    overflow: scroll;
    height: calc(100vh - 1rem);
}

.row-container {
    display: flex;
    flex-direction: row;
}

.col-container {
    display: flex;
    flex-direction: column;
}

.card {
    background-color: var(--alt-blue-opacity9);
    box-shadow: -5px 8px var(--main-dark-green-opacity7);
    border-top: 1px solid var(--main-yellow);
    border-right: 1px solid var(--main-yellow);

    border-radius: 50px;
    margin: 20px;
    padding: 50px;
    transition: box-shadow ease-out 0.2s;
}

.card:hover {
    box-shadow: none;
    box-shadow: -4px 0px var(--main-dark-green-opacity7);
    transition: box-shadow ease-out 0.2s;
}

.card>button {
    width: fit-content;
    max-width: 100%;
    float: right;
}


i {
    font-size: 50px;
}


.info-card {
    background-color: var(--alt-blue-opacity9);
}

a {
    color: var(--alt-blue-2);
}

a:hover {
    color: var(--alt-red);
}