body {
    /* --link-color: #45352E;
    --text-color: #994648;
    --button-color: #E4D8EB;
    --background-color: #909E82;
    --center-color: #50B2D9; */
    
    --link-color: #BA5014;
    --text-color: #F1AE04;
    --background-color: #469996;
    --button-color: #FAF3D7;
    --other-color: #2A7542;
    /* 
    --button-color: #2A7542;
    --center-color: #FAF3D7; */

    caret-color: var(--other-color);
}

::selection {
    color: var(--other-color);
    background-color: color-mix(in srgb, currentColor 20%, transparent);
}

.span-grid {
    width: 80%;
    height: 60% !important;
}
.main-content > div {
    height: 83%;
    width: max-content;
}
@media only screen and (max-width: 1200px) {
    .span-grid {
        grid-column-start: unset !important;
        grid-column-end: unset !important;
        width: 100%;
        height: 100% !important;
    }
    .main-content > div {
        height: 100%;
    }
    .main-content {
        padding-top: 71px !important;
    }
}
@media only screen and (max-width: 800px) {
    .span-grid {
        grid-column-end: 2 !important;
        width: 100%;
        height: 100% !important;
    }
    .main-title {
        width: 100%;
    }
    
}