html { position:relative; min-height:100%; }

body { margin:0; color:#ffffff; font-family:'Shantell Sans', cursive; font-size:1.25rem; background-color:#2e0055; font-size:1.25rem; }
body i { font-size:1.5rem; }

.wholePage { color:#ffffff; font-family:'Waterfall', cursive; font-size:7rem; }
.wholePageSmallest { color:#ffffff; font-size:1.5rem; }
.wholePageSmallest a { color:#ffffff; text-decoration:underline; }
.wholePageCenter { text-align:center; padding-top:35vh; padding-left:1.5rem; padding-right:1.5rem; }
.wholePageCenterPadSmall { text-align:center; padding-top:20vh; padding-left:1.5rem; padding-right:1.5rem; }

.fontCursive { font-family:'Waterfall', cursive; }
.fontCursiveL { font-family:'Waterfall', cursive; font-size:4rem; }

.fSmall { font-size:1rem; }
.fNormal { font-size:1.25rem; }
.fBig { font-size:3rem; }

.bigIcons > div { display:inline-block; }
.decks { display:inline-flex; }
.decks > div { display:inline-block; }
.decks > div > div { width:180px; height:180px; align-content:center; }
.decks > div > div:hover { background-color:#ffffff; border-radius:1.5rem; color:#5800a5; cursor:pointer; }
.decks > div > div:hover img { border-color:#5800a5; }
.decks .active { background-color:#ffffff; border-radius:1.5rem; color:#5800a5; }
.decks .active:hover { cursor:default; }
.decks .active img { border-color:#5800a5; }

p { margin-block-start:1rem; margin-block-end:0; margin-inline-end:0; margin-inline-start:0; }

.subtitle { font-family:'Waterfall', cursive; font-size:5rem; line-height:50px; }
.subtitle a { font-size:5rem; line-height:50px; }
.tcenter { text-align:center; }
.tright { text-align:right; }
.tleft { text-align:left; }

.noDecoration { text-decoration:none; }
.noDecoration a { text-decoration:none; }

.subsubtitle { padding-top:1rem; font-family:'Waterfall', cursive; font-size:3rem; }
.subsubtitle i { font-size:2rem; }

.filter .tags { font-size:1.5rem !important; }
.filter input[type=text] { font-size:1rem !important; }
.filter select { font-size:1rem !important; }

.tags { font-size:1.5rem; }
.tags i:hover { cursor:pointer; color:#ff0095; }

.pl { padding-left:3rem; }
.pall { padding:5rem; }
.pAllSmall { padding:0.5rem; }
.mAllSmall { margin:0.5rem; }
.psides { padding:0 5rem !important; }
.pSidesSmall { padding:0 1rem !important; }
.pallS { padding:2rem; }
.pb1 { padding-bottom:1rem; }
.pb2 { padding-bottom:2rem; }

.pright { padding-right:1rem; }

.videoFrame { text-align:center; }
.videoFrame iframe { width:320px; height:200px; border:solid #5800a5 0.5rem; border-radius:1.5rem; }

.pt5 { padding-top:5px; }
.pt1rem { padding-top:1rem; }
.pt2rem { padding-top:2rem; }
.pt5rem { padding-top:5rem; }
.ptFromHeader { padding-top:5rem !important; }

.mr10 { margin-right:10px; }
.mright { margin-right:1rem; }

.flex { display:flex; align-items:stretch; flex-wrap: wrap; }
.flex > div { padding:0 0 0 0; flex-grow: 1; }
.flex > div > img { width: 100%; }

.flex50 { display:flex; align-items:stretch; }
.flex50 > div { padding:0 0 0 0; flex-grow: 1; }
.flex50 > div > img { width: 100%; }

.flexSameSize { display:flex; }
.flexSameSize > div { padding-left:0; padding-right:0; flex-grow: 1; flex: 1 1 0px; }

.flexFilter { display:flex; align-items:stretch; flex-wrap: wrap; }
.flexFilter > div { padding:0 0 1rem 0; flex-grow: 1; }

.flexWrap { display:flex; flex-wrap: wrap; justify-content: center; }

.header { color:#ffffff; background-color:#2e0055; padding:0.5rem 5rem; position:fixed; top:0; width:calc(100% - 10rem); z-index:1; }
.header a { color:#ffffff; }
.header .subtitle { font-size:2rem; text-align:left; }
.header .subtitle a { font-size:2rem; }
.header .subtitle a:hover { cursor:pointer; color:#ff0095; }

.footer { padding:5rem 10rem; color:#ffffff; background-color:#2e0055; }
.footer a { color:#ffffff; text-decoration:underline; }
.footer a:hover { color:#ff0095; }

.wholePageBackground { min-height:100vh; background-repeat:no-repeat; background-position:center; background-size:cover; background-image:url('../images/magic.png'); }
.wholePageBackground a { color:#ffffff; }
.wholePageBackground a:hover { color:#ff0095; }
.wholePageBackground .link { color:#ffffff; text-decoration:underline; }
.wholePageBackground .link:hover { color:#ff0095; cursor:pointer; }
.wholePageBackground .defaultImage img { border-color:#ffffff; }
.wholePageBackground .defaultImage a img:hover { border-color:#ff0095; }

.mainWhiteBackground { padding:5rem 10rem; color:#5800a5; background-color:#ffffff; }
.mainWhiteBackground a { color:#5800a5; text-decoration:underline; }
.mainWhiteBackground a:hover { color:#ff0095; cursor:pointer; }
.mainWhiteBackground input[type=text], input[type=email], textarea, select { font-size:1.5rem; color:#5800a5; border:#5800a5 solid 1px; padding:0.5rem; }
.mainWhiteBackground input[type=button] { font-size:1.5rem; color:#5800a5; border:#5800a5 solid 1px; background-color: transparent; padding:1px 5px; padding:0.5rem; }
.mainWhiteBackground input[type=button]:hover { color:#ffffff; border:#5800a5 solid 1px; background-color:#5800a5; cursor:pointer; }

.mainPurpleBackground .learnmore a { color:#ffffff; }
.mainPurpleBackground .videoFrame iframe { border-color:#ffffff; }
.mainPurpleBackground { padding:5rem 10rem; color:#ffffff; background-color:#5800a5; background-repeat:no-repeat; background-position:left; background-image:url('../images/magichalf.png'); }
.mainPurpleBackground a { color:#ffffff; }
.mainPurpleBackground a:hover { color:#ff0095; cursor:pointer; }
.mainPurpleBackground .defaultImage img { border-color:#ffffff; }
.mainPurpleBackground .defaultImage a img:hover { border-color:#ff0095; }

.defaultImage img { width:300px; height:300px; border:solid #5800a5 0.5rem; border-radius:1.5rem; }
.dani img { width:200px; height:200px; border:solid #5800a5 0.5rem; border-radius:1.5rem; }
.dani img:hover { border-color:#ff0095; }
.youtube img { width:200px; height:200px; border:solid #5800a5 0.5rem; border-radius:1.5rem; }
.youtube img:hover { border-color:#ff0095; }
.maps iframe { width:200px; height:200px; border:solid #5800a5 0.5rem; border-radius:1.5rem; }
.maps iframe:hover { border-color:#ff0095; }

input[type=text], input[type=email], textarea, select { font-size:1.5rem; color:#5800a5; border:#ffffff solid 1px; padding:0.5rem; }
input[type=button] { font-size:1.5rem; color:#ffffff; border:#ffffff solid 1px; background-color: transparent; padding:1px 5px; padding:0.5rem; }
input[type=button]:hover { color:#5800a5; border:#ffffff solid 1px; background-color:#ffffff; cursor:pointer; }

#year { width:82px; }
#month, #day { width:48px; }

input[type="text"], input[type="button"], input[type="number"], input[type=email], select, textarea { -webkit-appearance: none; border-radius: 0; }

.mentee img { width:200px; height:100px; border:#ffffff solid 2px; }
.mainWhiteBackground.mentee img { width:200px; height:100px; border:#5800a5 solid 2px; }

.menu { text-align:right; align-content:center; }
.menu a { text-decoration:none; }
.menu a:hover { cursor:pointer; color:#ff0095; }

.mobile { display:none; }
.noMobile { display:inline; }

table { margin: 0px auto; border-spacing:0; }

.codes table tr { padding: 0; }
.codes table tr:nth-child(odd) { background-color: rgba(255, 255, 255, 0.1); }
.codes table td { padding:0.5rem 1rem; }

.spreading table tr { padding: 0; }
.spreading table td { padding: 0 2px; min-width:1rem; }
.spreading img { width:50px; border:1px solid #ffffff; border-radius:5px; padding:3px; cursor:pointer; }
.spreading img:hover { border:1px solid #ff0095; }

.calendar table tr { padding: 0; }
.calendar table td { padding: 0.25rem; align-content:baseline; }
.calendar table td > div { border:1px solid #ffffff; border-radius:5px; padding:3px; width:70px; min-height:70px; }
.calendar table td > div > div { text-align:center; }
.calendar i { cursor:pointer; }
.calendar i:hover { cursor:pointer; color:#ff0095; }
.calendar .readingDetails { position:fixed; top:20%; width:335px; right:calc(50% - 184px); background-color:#2e0055; padding:1rem; border-radius:0.5rem; color:#ffffff; box-shadow:10px 10px 15px #ffffff; border-top:1px solid #ffffff; border-left:1px solid #ffffff; max-height:60%; overflow:auto; }

.allCardsContainer { position:fixed; top:calc(50% - 230px); right:calc(50% - 157px); background-color:#2e0055; padding:1rem; border-radius:0.5rem; color:#ffffff; box-shadow:10px 10px 15px #ffffff; border-top:1px solid #ffffff; border-left:1px solid #ffffff; }
.allCardsContainer i { cursor:pointer; }
.allCardsContainer i:hover { cursor:pointer; color:#ff0095; }

.allCards { width:280px; max-height:410px; overflow-y:scroll; }
.allCards div { padding-right:5px; }
.allCards img { width:50px; cursor:pointer; border:1px solid #ffffff; border-radius: 5px; padding: 3px; }
.allCards img:hover { border:1px solid #ff0095; }

.listDateColumn { text-align:right; }
.listTextColumn { text-align:left; }
.listSpreadingColumnMarginAuto { margin:initial !important; }

.icon { font-size:2.5rem; cursor:pointer; }
.icon:hover { font-size:2.5rem; cursor:pointer; color:#ff0095; }
.iconNormal { font-size:1.25rem; cursor:pointer; }
.iconNormal:hover { font-size:1.25rem; cursor:pointer; color:#ff0095; }

.helpHowTo { position:fixed; top:20%; width:335px; right:calc(50% - 184px); background-color:#2e0055; padding:1rem; border-radius:0.5rem; color:#ffffff; box-shadow:10px 10px 15px #ffffff; border-top:1px solid #ffffff; border-left:1px solid #ffffff; max-height:60%; }

.contentCenter { align-content:center; }

.upsideDown { transform: rotate(180deg); }

.chart { text-align:left; display:inline-block; }
.chart div:not(:last-child) { margin-bottom:0.75rem; }
.chart span { padding:0.25rem; border-radius:0.5rem; white-space:pre-wrap; }
.chart .total { background-color:#2e0055; }
.chart .order1 { background-color:#340062; }
.chart .order2 { background-color:#3c006f; }
.chart .order3 { background-color:#43007d; }
.chart .order4 { background-color:#4a008a; }
.chart .order5 { background-color:#520098; }
.chart .order6 { background-color:#5800a5; }

.imageSmall { width:50px; border:1px solid #ffffff; border-radius: 5px; padding: 3px; }
.mTop { margin-top:0.75rem; }
.mTop1rem { margin-top:1rem; }
.mBottom1rem { margin-bottom:1rem; }

.searchResults > div:nth-child(odd) { background-color: rgba(255, 255, 255, 0.1); }
.transparentBG { background-color: rgba(255, 255, 255, 0.1); }
.message { background-color:#2e0055; border-radius:0.5rem; color:#ffffff; box-shadow:10px 10px 15px #ffffff; border-top:1px solid #ffffff; border-left:1px solid #ffffff; }
.message span { color:#ff0095; font-size:2.5rem; }

@media (orientation: portrait)
{
    .flex50 { display:flex; align-items:stretch; flex-wrap: wrap; }
    .flex50 > div { padding:0 0 0 0; flex-grow: 1; width:100%; }

    .flexSameSize { display:flex; align-items:stretch; flex-wrap: wrap; }
    .flexSameSize > div { flex-grow: 1; width:100%; flex:1; }
    .flexSameSize .imageBox { padding-bottom:2rem; }
        
    .wallpaper > div { width: 100%; }

    .hideMobile { display:none; }
    .footer { padding:2.5rem 5rem; }
    .mainWhiteBackground { padding:2.5rem 5rem; }
    .mainPurpleBackground { padding:2.5rem 5rem; }

    .wholePage { font-size:5rem; }
    .pall { padding:2rem; }
    .psides { padding:0 2rem !important; }
}

@media (orientation: landscape)
{
    .footer { padding:2.5rem 5rem; }
    .mainWhiteBackground { padding:2.5rem 5rem; }
    .mainPurpleBackground { padding:2.5rem 5rem; }
    .pall { padding:2rem; }
}

@media (max-width:1200px)
{
    .searchResults .flexSameSize { flex-flow:column; }
    .listDateColumn { text-align:center; }
    .listTextColumn { text-align:center; }
    .listSpreadingColumnMarginAuto { margin: 0px auto !important; }
}

@media (max-width:1000px)
{
    .wholePage { font-size:4rem; }
    .mobile { display:inline; }
    .noMobile { display:none; }
    .psides { padding:0 0.5rem !important; }
}

@media (max-width:950px)
{
    .flexFilter { flex-flow:column; }
    .flexFilter > div { text-align:center !important; }
}

@media (max-width:768px)
{
    .mobile { display:inline; }
    .noMobile { display:none; }

    .flexSameSize { flex-flow:column; }

    .calendar table td > div { width:30px; min-height:55px; }

    .footer { padding:1rem 1.5rem; }
    .mainWhiteBackground { padding:1rem 1.5rem; }
    .mainPurpleBackground { padding:1rem 1.5rem; }
    .header { padding:0.5rem 1.5rem; width:calc(100% - 3rem); }
    .pall { padding:0.5rem; }
    .subtitle { padding-left:0; font-size:4rem; }
    .subtitle a { padding-left:0; font-size:4rem; }
    /*.header { text-align:center; padding-left:0; font-size:3.5rem; }
    .headerSmall { text-align:center; padding-left:0; font-size:1.5rem; }*/
    .wholePage { font-size:4rem; }
    .videoFrame { padding:0.5rem; }
    .videoFrame iframe { width:280px; height:185px; }

    #year { width:75px; }
    #month, #day { width:50px; }
}

@media (max-width:599px)
{
    .ptFromHeader { padding: 6.5rem 0.25rem 0.25rem 0.25rem !important; }
    .pright { padding-right:0.5rem;}

    .decks { flex-direction:column; }
    .menu { text-align:center; }
}