@font-face {
font-family: MarkForMC;
src: url('https://demo.moneythor.com/fonts/mrs/mfmcrg.woff2'), url('https://demo.moneythor.com/fonts/mrs/mfmcmd.woff2'), url('https://demo.moneythor.com/fonts/mrs/mfmcnw.woff2'), url('https://demo.moneythor.com/fonts/mrs/mfmclt.woff2') format('woff2');
}
:root {
--banner-grey: #dcdcdc;
--banner-soft: #fddbca;
--bg-checklist: #edf7fc;
--bg-checkbox: #9e9e9e;
--bg-checkbox-checked: #8bc34a;
--bg-progress: #fff4f1;
--bg-progress-bar: #f08080;
--bg-stamps: #f7efd2;
--bg-stamp: #9e9e9e;
--bg-stamped: #4c988c66;
--bg-stamped-star: #cf4500;
--bg-primary: #475c6c;
--bg-secondary: #808080;
--bg-popup: #000000cc;
--bg-row-odd: #d7ecd9;
--bg-row-even: #f6f6eb;
--fg-primary: #ffffff;
--fg-secondary: #969696;
--black-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M26.285,2.486l5.407,10.956c0.376,0.762,1.103,1.29,1.944,1.412l12.091,1.757 c2.118,0.308,2.963,2.91,1.431,4.403l-8.749,8.528c-0.608,0.593-0.886,1.448-0.742,2.285l2.065,12.042 c0.362,2.109-1.852,3.717-3.746,2.722l-10.814-5.685c-0.752-0.395-1.651-0.395-2.403,0l-10.814,5.685 c-1.894,0.996-4.108-0.613-3.746-2.722l2.065-12.042c0.144-0.837-0.134-1.692-0.742-2.285l-8.749-8.528 c-1.532-1.494-0.687-4.096,1.431-4.403l12.091-1.757c0.841-0.122,1.568-0.65,1.944-1.412l5.407-10.956 C22.602,0.567,25.338,0.567,26.285,2.486z'%3E%3C/path%3E%3C/svg%3E");
--black-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 294.996 294.996'%3E%3Cpath d='M280.977,118.478c-13.619-10.807-20.563-27.57-18.574-44.845c1.3-11.3-2.566-22.393-10.607-30.432 c-8.044-8.043-19.136-11.909-30.434-10.607c-17.281,1.986-34.037-4.954-44.844-18.573C169.449,5.11,158.872,0,147.499,0 c-11.374,0-21.951,5.11-29.021,14.02c-10.807,13.618-27.564,20.56-44.841,18.575c-11.3-1.305-22.393,2.563-30.435,10.605 c-8.043,8.04-11.909,19.133-10.609,30.435c1.989,17.272-4.954,34.035-18.576,44.844C5.11,125.549,0,136.126,0,147.498 s5.109,21.949,14.019,29.021c13.62,10.808,20.563,27.57,18.574,44.845c-1.3,11.3,2.566,22.393,10.607,30.432 c8.044,8.043,19.145,11.911,30.434,10.607c17.274-1.988,34.037,4.954,44.844,18.573c7.069,8.91,17.646,14.021,29.021,14.021 c11.373,0,21.95-5.11,29.02-14.02c10.808-13.618,27.565-20.559,44.841-18.575c11.301,1.299,22.393-2.563,30.435-10.605 c8.043-8.04,11.909-19.133,10.609-30.434c-1.989-17.273,4.955-34.037,18.576-44.845c8.907-7.07,14.017-17.647,14.017-29.02 S289.886,125.549,280.977,118.478z'%3E%3C/path%3E%3C/svg%3E");
--black-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16.0303 8.96967C16.3232 9.26256 16.3232 9.73744 16.0303 10.0303L11.0303 15.0303C10.7374 15.3232 10.2626 15.3232 9.96967 15.0303L7.96967 13.0303C7.67678 12.7374 7.67678 12.2626 7.96967 11.9697C8.26256 11.6768 8.73744 11.6768 9.03033 11.9697L10.5 13.4393L12.7348 11.2045L14.9697 8.96967C15.2626 8.67678 15.7374 8.67678 16.0303 8.96967Z'%3E%3C/path%3E%3C/svg%3E");
--black-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM8.96963 8.96965C9.26252 8.67676 9.73739 8.67676 10.0303 8.96965L12 10.9393L13.9696 8.96967C14.2625 8.67678 14.7374 8.67678 15.0303 8.96967C15.3232 9.26256 15.3232 9.73744 15.0303 10.0303L13.0606 12L15.0303 13.9696C15.3232 14.2625 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2625 15.3232 13.9696 15.0303L12 13.0607L10.0303 15.0303C9.73742 15.3232 9.26254 15.3232 8.96965 15.0303C8.67676 14.7374 8.67676 14.2625 8.96965 13.9697L10.9393 12L8.96963 10.0303C8.67673 9.73742 8.67673 9.26254 8.96963 8.96965Z'%3E%3C/path%3E%3C/svg%3E");
--black-star-outline: url('data:image/svg+xml,');
--black-heart-outline: url('data:image/svg+xml,');
--black-bell-outline: url('data:image/svg+xml,');
--black-chat-outline: url('data:image/svg+xml,');
--black-bulb-outline: url('data:image/svg+xml,');
--black-smile-outline: url('data:image/svg+xml,');
}
:root * {
font-family: "MarkForMC", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
font-size: 16px;
}
body {
margin: 0px;
display: flex;
flex-direction: column;
-ms-overflow-style: none;
scrollbar-width: none;
overscroll-behavior: none;
}
body::-webkit-scrollbar {
display: none;
}
body:has(.popup[display-toggle="on"]) {
overflow: hidden;
}
h1 {
margin: 0px;
padding: 10px;
text-align: center;
background: var(--banner-grey);
font-size: 1.4em;
}
h2 {
margin: 0px;
padding: 10px;
text-align: center;
background: var(--banner-soft);
font-size: 1em;
}
.badges {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 40px;
row-gap: 70px;
padding: 20px;
}
.badges > .badge {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
cursor: pointer;
padding: 10px 10px 20px 10px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.badge img {
width: 90%;
}
.badge .animation {
width: 90%;
aspect-ratio: 1;
}
.badge .title {
font-size: 1.2em;
font-weight: bold;
text-align: center;
white-space: normal;
width: 100%;
}
.badge .description {
font-size: 0.9em;
margin: 0px;
text-align: center;
color: var(--fg-secondary);
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.singleton {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
margin-top: 50px;
}
.singleton .content {
display: flex;
flex-direction: column;
width: 90%;
max-width: 500px;
padding: 20px;
gap: 30px;
position: relative;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.singleton .content .close-btn {
display: none;
}
.singleton .content .badge {
display: grid;
grid-template-areas:
'logo headers'
'logo description';
grid-template-columns: 70px auto;
row-gap: 5px;
column-gap: 10px;
min-width: 100%;
max-width: 100%;
align-items: flex-start;
}
.singleton .content .badge.completed {
display: grid;
grid-template-areas:
'headers'
'description';
grid-template-columns: auto;
row-gap: 5px;
column-gap: 10px;
min-width: 100%;
max-width: 100%;
align-items: flex-start;
}
.singleton .content .badge img {
grid-area: logo;
}
.singleton .content .badge div.headers {
grid-area: headers;
text-align: left;
display: flex;
gap: 10px;
margin-right: 12px;
}
.singleton .content .badge .title {
font-size: 1em;
width: auto;
}
.singleton .content .badge .tag {
font-size: 0.7em;
padding: 3px 5px;
background: var(--bg-primary);
border-radius: 5px;
color: var(--fg-primary);
}
.singleton .content .badge .description {
grid-area: description;
text-align: left;
font-size: 0.8em;
}
.popup {
position: fixed;
top: 0px;
height: 100%;
width: 100%;
background: var(--bg-popup);
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
overflow: hidden;
}
.popup .content {
background: white;
border-radius: 6px;
display: flex;
flex-direction: column;
width: 90%;
max-width: 300px;
padding: 20px;
gap: 30px;
position: relative;
}
.popup .content .close-btn {
position: absolute;
top: 8px;
right: 8px;
height: 22px;
width: 22px;
background: var(--bg-secondary);
mask-image: var(--black-close);
cursor: pointer;
}
.popup .content .badge {
display: grid;
grid-template-areas:
'logo headers'
'logo description';
grid-template-columns: 70px auto;
row-gap: 5px;
column-gap: 10px;
min-width: 100%;
max-width: 100%;
align-items: flex-start;
}
.popup .content .badge.completed {
display: grid;
grid-template-areas:
'headers'
'description';
grid-template-columns: auto;
row-gap: 5px;
column-gap: 10px;
min-width: 100%;
max-width: 100%;
align-items: flex-start;
}
.popup .content .badge img {
grid-area: logo;
}
.popup .content .badge div.headers {
grid-area: headers;
text-align: left;
display: flex;
gap: 10px;
margin-right: 12px;
}
.popup .content .badge .title {
font-size: 1em;
width: auto;
}
.popup .content .badge .tag {
font-size: 0.7em;
padding: 3px 5px;
background: var(--bg-primary);
border-radius: 5px;
color: var(--fg-primary);
}
.popup .content .badge .description {
grid-area: description;
text-align: left;
font-size: 0.8em;
}
.requirements {
display: flex;
flex-direction: column;
gap: 15px;
}
.requirements .headers {
display: flex;
justify-content: space-between;
margin: 0px 5px;
}
.requirements .headers h3 {
margin: 0px;
padding-bottom: 2px;
font-size: 1em;
cursor: pointer;
}
.requirements .headers h3[tab-toggle="on"] {
border-bottom: 1px solid var(--bg-primary);
}
.requirements>.details {
display: flex;
flex-direction: column;
gap: 10px;
max-height: 450px;
overflow: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
overscroll-behavior: none;
}
.requirements>.details::-webkit-scrollbar {
display: none;
}
.requirements>.history {
display: flex;
flex-direction: column;
gap: 10px;
overflow: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
overscroll-behavior: none;
}
.requirements>.history::-webkit-scrollbar {
display: none;
}
.requirements>.history {
gap: 0px;
/*justify-content: space-between;*/
}
.requirements>.history[tab-toggle="off"] {
display: none;
}
.requirements>.history>.record {
display: flex;
font-size: 0.8em;
padding: 15px 10px;
align-items: center;
}
.requirements>.history>.record:nth-child(odd) {
background: var(--bg-row-odd);
}
.requirements>.history>.record:nth-child(even) {
background: var(--bg-row-even);
}
.requirements>.history>.record>.date {
flex: 0 0 30%;
}
.requirements>.history>.record>.description {
flex: 0 0 55%;
}
.requirements>.history>.record>.points {
flex: 0 0 15%;
text-align: right;
}
.requirements>.details[tab-toggle="off"] {
display: none;
}
.requirement {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
position: relative;
border-radius: 6px;
}
.requirement[data-type="stamps"] {
background: var(--bg-stamps);
}
.requirement[data-type="progress"] {
background: var(--bg-progress);
}
.requirement[data-type="checklist"] {
background: var(--bg-checklist);
}
.requirement h4 {
margin: 0px;
display: flex;
justify-content: space-between;
align-items: center;
}
.requirement.completed h4::after {
content: '';
height: 20;
width: 20;
mask-image: var(--black-tick);
position: absolute;
top: 10px;
right: 10px;
}
.requirement[data-type="checklist"].completed h4::after {
background-color: var(--bg-checkbox-checked);
}
.requirement[data-type="progress"].completed h4::after {
background-color: var(--bg-progress-bar);
}
.requirement[data-type="stamps"].completed h4::after {
background-color: var(--bg-stamped-star);
}
.requirement p {
margin: 0px;
font-size: 0.8em;
}
.requirement .stamps {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: center;
justify-items: center;
}
.requirement .stamps .stamp {
width: 70%;
max-width: 40px;
aspect-ratio: 1;
margin: 15%;
border-radius: 50%;
background: var(--bg-stamp);
font-size: 25px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}
.requirement .stamps .stamp.stamped {
background: var(--bg-stamped);
}
.requirement .stamps .stamp.stamped .star {
width: 50%;
height: 50%;
mask-image: var(--black-star);
background-color: var(--bg-stamped-star);
}
.requirement .progress {
display: flex;
width: 100%;
height: 15px;
background: #9e9e9e00;
border-radius: 20px;
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}
.requirement .progress .bar {
height: 100%;
background: var(--bg-progress-bar);
border-radius: 22px;
}
.requirement .checklist {
display: flex;
flex-direction: column;
gap: 10px;
}
.requirement .checklist .entry {
display: flex;
align-items: center;
padding: 5px 0px;
gap: 15px;
}
.requirement .checklist .entry .details {
font-size: 0.9em;
}
.requirement .checklist .entry .checkbox {
height: 13px;
width: 13px;
flex: 0 0 13px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
background: var(--bg-checkbox);
}
.requirement .checklist .entry .checkbox.checked {
background: var(--bg-checkbox-checked);
}
.game-btn {
text-align: center;
padding: 10px;
border-radius: 10px;
background: var(--bg-primary);
color: var(--fg-primary);
cursor: pointer;
border: none;
font-size: 1em;
font-family: "MarkForMC";
}
.game-btn[disabled] {
opacity: 0.5;
}
.scratch-container {
padding: 0px !important;
background: transparent !important;
box-shadow: none !important;
display: flex;
flex-direction: column;
gap: 20px;
}
.scratchpad {
height: 280px;
width: 280px;
margin: 0px auto;
position: relative;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.scratchpad img {
/*border-radius: 20px;*/
}
.scratch-container label {
font-size: 0.9em;
text-align: center;
}
[display-toggle="off"] {
visibility: hidden;
opacity: 0;
transition: visibility 0.3s, opacity 0.3s linear;
}
[display-toggle="on"] {
visibility: visible;
opacity: 1;
transition: visibility 0.3s, opacity 0.3s linear;
}
div[tab-toggle="on"] {
opacity: 1;
animation-name: fade-in;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.4s;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.noshow {
display: none;
}
@media only screen and (min-width: 800px) {
.badges {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}