* {
box-sizing: border-box;
--RSCMPurple: #2A1C57;
--RSCMBorderAccent: #CDCAE1;
--RSCMHighlightPurp:#310A4A;
--RSCMCategoryBG:#F0EDF6;
--RSCMGold:#927E4B;
}

.pageWrapper {
max-width: 1170px;
/* padding: 12px; */
margin: 0 auto;
}

.pageWrapper h1,
.pageWrapper h2,
.pageWrapper h3,
.pageWrapper h4,
.pageWrapper h5,
.pageWrapper h6 {
font-weight: bold;
font-family: Helvetica, sans-serif;
}

.italText {
font-style: italic;
}

.centerText {
text-align: center;
}

.centerObj {
display: block;
margin-left: auto;
margin-right: auto;
}

.colorWhite {
color: white;
}

.pageButton {
background-color: var(--RSCMPurple);
padding: 10px;
display: grid;
place-items: center;
text-align: center;
color: white;
text-decoration: none;
font-weight: bold;
border-radius: 30px;
}

.pageButton:hover,
.pageButton:focus {
color: white;
}

.fullWidth{
    min-width: 99.08vw;
    width:calc(100vw - var(--scrollbarWidth));
    margin-inline-start: 50%;
    transform: translateX(-50%);
}

.grid {
    display: grid;
    place-items: center;
}

.twoxtwoGrid{
    grid-template-columns: repeat(auto-fit, minmax(min(500px,100%), 1fr)); 
}

.threexthreeGrid{
    grid-template-columns: repeat(auto-fit, minmax(min(275px,100%), 1fr)); 
    gap:36px 12px;
}

.flexColumn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height:100%;
    width:100%;
    flex-grow:1;
}
/* TEMPLATE END */

.Headers{
    margin-top:-15px;
    margin-bottom:18px;
}

.rscmMainHeader{
    background-color: rgb(41, 17, 52);
    text-align:center;
    margin-top:-22px;
    padding:1em;
    font-size:clamp(18px, 4vw, 28px);
    color: var(--RSCMCategoryBG)
}

.standoutText{
    color:var(--RSCMPurple);
    font-weight:bold;
    text-align: center;
    font-size: clamp(17px, 3vw, 24px);
    margin:1em auto;
}

.mainStandout{
    margin:1em auto 2em auto;
}

.rscmCategories{
    background-color: var(--RSCMPurple);
}

.rscmButton{
    width:80%;
    margin:1rem auto;
    transition: .4s ease-in-out;
}

.rscmButton:hover, .rscmButton:focus{
    background-color: var(--RSCMHighlightPurp);
}

.categoriesContainer{
    max-width: 1170px;
    padding: 20px;
    margin-right:auto;
    margin-left:auto;
    position: relative;
    top:-40px;
    height:100%;

}

.categoryTitleBox{    
    aspect-ratio: 1/1;
    min-height:175px;
    max-width:300px;
    width:70%;
    margin:0 auto;
    display:grid;
    place-items: center;
    background-color: var(--RSCMCategoryBG);
    color:var(--RSCMPurple);
    font-weight:bold;
    text-decoration: none;
    border-radius: 15px;
    border: 5px solid var(--RSCMBorderAccent);
    transition: .4s ease-in-out;
    overflow:hidden;
}

.categoryTitle{  
    color:var(--RSCMPurple);
    font-weight:bold;
    text-decoration: none;
    text-align:center;
    font-size:clamp(26px, 4vw, 34px);
    height:100%;
    width:100%;
    display: grid;
    place-items: center;
    overflow: hidden;    
    transition: .4s ease-in-out;
    padding:10px;
}

.categoryTitleBox:hover, .categoryTitle:hover, .categoryTitleBox:focus, .categoryTitle:focus{
    background-color: var(--RSCMHighlightPurp);
    color:white;
}

.categoryInfo{
    text-align:center;
    font-size:12px;
    margin:18px auto;
    line-height:1.6;
    max-width:35ch;
    color:var(--RSCMBorderAccent);
}

.categoryButton{
    background-color:var(--RSCMGold);
    width:80%;
    margin:0 auto;
    transition: .4s ease-in-out;
}

.categoryButton:hover{
    background-color: #b08823;
}

/* VFL Pages */

.vflHeader{
    font-size:clamp(24px, 5vw, 38px);
    margin:24px auto;
}

.vflCalloutBox{
    background-color: rgb(245, 245, 245);
    padding-top:24px;
    padding-bottom:24px;
    border-top:2px solid rgb(217, 217, 224);    
    border-bottom:2px solid rgb(217, 217, 224);
    padding-left:35px !important;
    list-style: disc;
    color:rgb(83, 82, 91);

}

.vflCalloutText{
    font-size: clamp(17px, 3vw, 24px);
    margin:1em 0 .5em 15px;
    letter-spacing:-.8px;
    text-align: center;
}

.vflCalloutBox li{
    margin-bottom:.9em;
    font-size:15px;
}

.vflCategoryHeader{
    background-color: #3B87A1;
    padding:4rem 0;
}

.rscmCategoryHeader{
    background-color: var(--RSCMPurple);    
    padding:4rem 0;
    margin-top:32px;
    margin-bottom:32px;
}

.vflCategoryHeaderText,.rscmCategoryHeaderText {
    color:white;
    font-size:clamp(24px, 5vw, 32px);
    text-align:center;
}

.rscmResourceGrid{
    grid-template-columns: repeat(auto-fit, minmax(min(325px,100%), 1fr)); 
    padding:18px 0;
}

.rscmResourceCard{
    background-color: #FBFBFB;
    border:1px solid #D1D1D1;
    padding: 12px 0;
    border-radius:18px;
}

.rscmResourceImage{
    max-height:250px;
    margin:0 auto;
    object-fit: cover;
}

.rscmResourceTitle{
    text-align: center;
    font-size:22px;
    margin:18px auto 18px auto;
    color:rgb(86, 86, 88);
}

.rscmResourceLevel{
    font-size:12px;
    font-style: italic;
    text-align: center;
    margin-top:-12px;
    margin-bottom:16px;    
    color:rgb(109, 109, 120);
}

.resourceButton{
    width:90%;
    max-width:275px;
    margin:0 auto;
    background-color:#3B87A1;
    transition: .4s ease-in-out;    
}

.resourceButton:hover, .resourceButton:focus{
    background-color: #2ab0dd;    
}

.rscmCarousel{
    background-color: white;
}

.rscmMainCopyText{
    margin:2rem auto;
}

.rscmButtonMore{
    margin:5rem auto 2rem auto;
}





/* Media Queries */
/* Desk Only */
@media only screen and (min-width: 560px) {
.HeaderMobile {
    display: none;
}
}

/* Mobile Only */

@media only screen and (max-width: 560px) {
.HeaderDesk {
    display: none;
}
}
