*:not(:defined) {
    display: none;
}

@font-face {
    font-family: "HeyGorgeous";
    src: url("/static/heygorgeous.ttf");
}

:root {
    --color-light: white;
    --color-base: grey;
    --color-dark: black;

    font-family: Verdana, sans-serif;
    font-family: HeyGorgeous;

    --color-l4: transparent;
    --color-l3: transparent;
    --color-l2: transparent;
    --color-l1: transparent;
    --color-00: transparent;
    --color-d1: transparent;
    --color-d2: transparent;
    --color-d3: transparent;
    --color-d4: transparent;

    --green-l4: hsl(89, 78%, 88%);
    --green-l3: hsl(93, 70%, 82%);
    --green-l2: hsl(100, 64%, 70%);
    --green-l1: hsl(103, 59%, 59%);
    --green-00: hsl(105, 54%, 46%);
    --green-d1: hsl(108, 50%, 40%);
    --green-d2: hsl(112, 45%, 34%);
    --green-d3: hsl(119, 40%, 26%);
    --green-d4: hsl(122, 36%, 20%);

    --blue-l4: hsl(196, 93%, 92%);
    --blue-l3: hsl(200, 86%, 84%);
    --blue-l2: hsl(206, 80%, 76%);
    --blue-l1: hsl(212, 72%, 70%);
    --blue-00: hsl(216, 63%, 62%);
    --blue-d1: hsl(220, 54%, 52%);
    --blue-d2: hsl(223, 48%, 45%);
    --blue-d3: hsl(227, 35%, 38%);
    --blue-d4: hsl(230, 33%, 25%);

    --yellow-l4: hsl(56, 100%, 90%);
    --yellow-l3: hsl(53, 100%, 82%);
    --yellow-l2: hsl(50, 100%, 75%);
    --yellow-l1: hsl(49, 100%, 62%);
    --yellow-00: hsl(46, 100%, 50%);
    --yellow-d1: hsl(43, 98%, 47%);
    --yellow-d2: hsl(40, 98%, 42%);
    --yellow-d3: hsl(36, 950%, 38%);
    --yellow-d4: hsl(30, 90%, 30%);

    --orange-l4: hsl(39, 100%, 92%);
    --orange-l3: hsl(37, 100%, 86%);
    --orange-l2: hsl(34, 100%, 78%);
    --orange-l1: hsl(30, 100%, 68%);
    --orange-00: hsl(29, 100%, 58%);
    --orange-d1: hsl(23, 89%, 48%);
    --orange-d2: hsl(19, 85%, 40%);
    --orange-d3: hsl(10, 71%, 36%);
    --orange-d4: hsl(9, 70%, 25%);

    --gray-l4: hsl(210, 15%, 95%);
    --gray-l3: hsl(211, 14%, 89%);
    --gray-l2: hsl(213, 12%, 80%);
    --gray-l1: hsl(214, 11%, 72%);
    --gray-00: hsl(216, 10%, 60%);
    --gray-d1: hsl(217, 10%, 49%);
    --gray-d2: hsl(218, 8%, 40%);
    --gray-d3: hsl(219, 7%, 30%);
    --gray-d4: hsl(220, 7%, 20%);
}


.orange {
    --color-l4: var(--orange-l4);
    --color-l3: var(--orange-l3);
    --color-l2: var(--orange-l2);
    --color-l1: var(--orange-l1);
    --color-00: var(--orange-00);
    --color-d1: var(--orange-d1);
    --color-d2: var(--orange-d2);
    --color-d3: var(--orange-d3);
    --color-d4: var(--orange-d4);
}

.green {
    --color-l4: var(--green-l4);
    --color-l3: var(--green-l3);
    --color-l2: var(--green-l2);
    --color-l1: var(--green-l1);
    --color-00: var(--green-00);
    --color-d1: var(--green-d1);
    --color-d2: var(--green-d2);
    --color-d3: var(--green-d3);
    --color-d4: var(--green-d4);
}

.blue {
    --color-l4: var(--blue-l4);
    --color-l3: var(--blue-l3);
    --color-l2: var(--blue-l2);
    --color-l1: var(--blue-l1);
    --color-00: var(--blue-00);
    --color-d1: var(--blue-d1);
    --color-d2: var(--blue-d2);
    --color-d3: var(--blue-d3);
    --color-d4: var(--blue-d4);
}

.yellow {
    --color-l4: var(--yellow-l4);
    --color-l3: var(--yellow-l3);
    --color-l2: var(--yellow-l2);
    --color-l1: var(--yellow-l1);
    --color-00: var(--yellow-00);
    --color-d1: var(--yellow-d1);
    --color-d2: var(--yellow-d2);
    --color-d3: var(--yellow-d3);
    --color-d4: var(--yellow-d4);
}

.gray {
    --color-l4: var(--gray-l4);
    --color-l3: var(--gray-l3);
    --color-l2: var(--gray-l2);
    --color-l1: var(--gray-l1);
    --color-00: var(--gray-00);
    --color-d1: var(--gray-d1);
    --color-d2: var(--gray-d2);
    --color-d3: var(--gray-d3);
    --color-d4: var(--gray-d4);
}

.badges {
    --color-light: var(--green-l4);
    --color-base: var(--green-l1);
    --color-dark: var(--green-d1);
}

.recipes {
    --color-light: var(--yellow-l4);
    --color-base: var(--yellow-00);
    --color-dark: var(--yellow-d3);
}

.free-red {
    --color-light: var(--orange-l4);
    --color-base: var(--orange-00);
    --color-dark: var(--orange-d3);
}

.starpieces {
    --color-light: var(--blue-l4);
    --color-base: var(--blue-00);
    --color-dark: var(--blue-d3);
}

.shinesprites {
    --color-light: var(--blue-l4);
    --color-base: var(--blue-00);
    --color-dark: var(--blue-d3);
}

.tattlelog {
    --color-light: var(--gray-l4);
    --color-base: var(--gray-00);
    --color-dark: var(--gray-d3);
}

html {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background-image: url("/static/background_1.png");
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100%;
    margin: 0;
    padding: 0;
}


.section {
    background-size: 200px;
    background-color: var(--color-base);
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.section-content {
    padding: 1em;
    background-color: transparent;
    background-image: url("/static/items_background.png");
    background-size: 200px;
    border-radius: 10px;
    background-color: var(--color-light);
}

.pop-hover {
    filter: drop-shadow(0px 0px 3px);

    &:hover{
        transform: scale(1.1);
        filter: drop-shadow(0px 0px 3px) brightness(1.2);
    }
}