* {
    --color-primary: #723434;
    --color-secondary: #4f4bb3;

    --mario-red: #df220f;
    --mario-green: #44af35;
    --mario-blue: #009bd9;
    --mario-yellow: #fccf00;

    --mario-yellow-0: #fff3bd;

    --color-white: #fff;
    --color-grey-0: #f9f9f9;
    --color-grey-1: #e0e0e0;
    --color-grey-2: #c7c7c7;
    --color-grey-3: #aeaeae;
    --color-grey-4: #959595;
    --color-grey-5: #7c7c7c;
    --color-grey-6: #636363;
    --color-grey-7: #4a4a4a;
    --color-grey-8: #313131;
    --color-grey-9: #181818;
    --color-black: #000;

    --color-white-a25: #ffffff40;
    --color-grey-0-a25: #f9f9f940;
    --color-grey-1-a25: #e0e0e040;
    --color-grey-2-a25: #c7c7c740;
    --color-grey-3-a25: #aeaeae40;
    --color-grey-4-a25: #95959540;
    --color-grey-5-a25: #7c7c7c40;
    --color-grey-6-a25: #63636340;
    --color-grey-7-a25: #4a4a4a40;
    --color-grey-8-a25: #31313140;
    --color-grey-9-a25: #18181840;
    --color-black-a25: #00000040;

    --color-white-a50: #ffffff80;
    --color-grey-0-a50: #f9f9f980;
    --color-grey-1-a50: #e0e0e080;
    --color-grey-2-a50: #c7c7c780;
    --color-grey-3-a50: #aeaeae80;
    --color-grey-4-a50: #95959580;
    --color-grey-5-a50: #7c7c7c80;
    --color-grey-6-a50: #63636380;
    --color-grey-7-a50: #4a4a4a80;
    --color-grey-8-a50: #31313180;
    --color-grey-9-a50: #18181880;
    --color-black-a50: #00000080;

    --color-white-a65: #ffffffa6;
    --color-grey-0-a65: #f9f9f9a6;
    --color-grey-1-a65: #e0e0e0a6;
    --color-grey-2-a65: #c7c7c7a6;
    --color-grey-3-a65: #aeaeaea6;
    --color-grey-4-a65: #959595a6;
    --color-grey-5-a65: #7c7c7ca6;
    --color-grey-6-a65: #636363a6;
    --color-grey-7-a65: #4a4a4aa6;
    --color-grey-8-a65: #313131a6;
    --color-grey-9-a65: #181818a6;
    --color-black-a65: #000000a6;

    --color-white-a75: #ffffffbf;
    --color-grey-0-a75: #f9f9f9bf;
    --color-grey-1-a75: #e0e0e0bf;
    --color-grey-2-a75: #c7c7c7bf;
    --color-grey-3-a75: #aeaeaebf;
    --color-grey-4-a75: #959595bf;
    --color-grey-5-a75: #7c7c7cbf;
    --color-grey-6-a75: #636363bf;
    --color-grey-7-a75: #4a4a4abf;
    --color-grey-8-a75: #313131bf;
    --color-grey-9-a75: #181818bf;
    --color-black-a75: #000000bf;

    --color-white-a90: #ffffffe6;
    --color-grey-0-a90: #f9f9f9e6;
    --color-grey-1-a90: #e0e0e0e6;
    --color-grey-2-a90: #c7c7c7e6;
    --color-grey-3-a90: #aeaeae;
    --color-grey-4-a90: #959595e6;
    --color-grey-5-a90: #7c7c7ce6;
    --color-grey-6-a90: #636363e6;
    --color-grey-7-a90: #4a4a4ae6;
    --color-grey-8-a90: #313131e6;
    --color-grey-9-a90: #181818e6;
    --color-black-a90: #000000e6;

    --text-color: var(--color-grey-9);


    --title-font: 'MarioKart', Arial, Helvetica, sans-serif;
    --subtitle-font: 'SuperMario', Arial, Helvetica, sans-serif;
    --text-font: 'NotoSans', Arial, Helvetica, sans-serif;
}

/* @view-transition {
    navigation: auto;
} */

/* Create a custom animation */
@keyframes move-out {
    from {
      opacity: 1;
    }
  
    to {
        opacity: 0;
    }
  }
  
  @keyframes move-in {
    from {
      opacity: 0;
    }
  
    to {
        opacity: 1;
    }
  }
  
/* Apply the custom animation to the old and new page states */
/* ::view-transition-old(root) {
    animation: 0.4s ease-in both move-out;
}

::view-transition-new(root) {
    animation: 0.4s ease-in both move-in;
} */

@font-face {
    font-family: 'MarioKart';
    src: url('../fonts/Blue-Shell.otf');
}

@font-face {
    font-family: 'SuperMario';
    src: url('../fonts/SuperMario256.ttf');
}

@font-face {
    font-family: 'NotoSans';
    src: url('../fonts/Noto.ttf');
}

html, body {
    position: relative;
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    
    scroll-behavior: smooth;

    scrollbar-color: var(--mk-yellow) transparent;
    scrollbar-width: thin;
    scrollbar-track-color: transparent;

}

/* *::-webkit-scrollbar {
    background-color: transparent;
    padding: 0 5px;
}
*::-webkit-scrollbar-thumb {
    background-color: var(--mk-yellow);
    border-radius: 5px;
    width: 5px;
} */

* {
    color: var(--text-color);
    font-family: var(--text-font);
}

.hidden {
    display: none;
}

.title {
    padding-top: 1rem;
}

h1 {
    font-family: var(--title-font);
    text-align: center;
    /* background-image: linear-gradient(180deg, var(--color-grey-1), var(--color-grey-8));
    background-size: cover;
    background-clip: text;
    color: transparent; */
    /* color: var(--color-grey-1); */
    font-size: 2rem;
    margin: 0;
    line-height: 2.5rem;
}

h2.super-mario {
    text-align: center;
    font-size: 3rem;
    margin: 0; margin-top: 1rem;
    letter-spacing: -.2rem;
}
h2.super-mario span {
    font-family: var(--subtitle-font);
    -webkit-text-stroke: var(--color-black) .2rem;
    text-shadow: 0 .025rem 0 var(--color-black), 0 .05rem 0 var(--color-black), 0 .075rem 0 var(--color-black), 0 .1rem 0 var(--color-black), 0 .125rem 0 var(--color-black), 0 .15rem 0 var(--color-black), 0 .175rem 0 var(--color-black), 0 .2rem 0 var(--color-black), 0 .225rem 0 var(--color-black), 0 .25rem 0 var(--color-black), 0 .275rem 0 var(--color-black), 0 .3rem 0 var(--color-black);
}

h3.super-mario {
    text-align: center;
    font-size: 1.5rem;
    margin: 0;
    letter-spacing: -.05rem;
}
h3.super-mario span {
    font-family: var(--subtitle-font);
    -webkit-text-stroke: var(--color-black) .1rem;
    text-shadow: 0 .0125rem 0 var(--color-black), 0 .025rem 0 var(--color-black), 0 .0375rem 0 var(--color-black), 0 .05rem 0 var(--color-black), 0 .0625rem 0 var(--color-black), 0 .075rem 0 var(--color-black), 0 .0875rem 0 var(--color-black), 0 .1rem 0 var(--color-black), 0 .1125rem 0 var(--color-black), 0 .125rem 0 var(--color-black), 0 .1375rem 0 var(--color-black), 0 .15rem 0 var(--color-black);
}

.super-mario span::selection {
    -webkit-text-stroke: 0 var(--color-black);
    color: white;
    background-color: #3367d1;
    text-shadow: none;
}

.super-mario span:nth-child(n) {
    color: var(--mario-red);
}
.super-mario span:nth-child(2n) {
    color: var(--mario-green);
}
.super-mario span:nth-child(3n) {
    color: var(--mario-blue);
}
.super-mario span:nth-child(4n) {
    color: var(--mario-yellow);
}

.pages-nav {
    position: fixed; bottom: 2rem; left: -5px; z-index: 10;
    width: calc(100% + 10px);
}

.pages-nav ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0; margin: 0;
}

@media screen and (max-width: 768px) {
    .pages-nav {
        bottom: -1px;
    }
    .pages-nav ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .pages-nav ul li {
        margin: 0;
    }
    .pages-nav ul li a {
        border-radius: 0;
        padding: .75rem 0;
        border: none; border-left: 5px ridge var(--color-grey-1);
        display: flex; flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 1.25rem;
    }    
}

@media screen and (min-width: 768px) {
    .pages-nav ul li a:hover {
        transform: translateY(-.25rem);
    }

    .button.back {
        padding: .4rem 1rem .5rem 2rem;
    }

    .button.continue {
        padding: .4rem 2rem .5rem 1rem;
    }
}

/* -------------------------------------------------------------------------- */
/*                                   Buttons                                  */
/* -------------------------------------------------------------------------- */

.button {
    display: block;
    width: auto;
    text-decoration: none;
    transition: .2s;
    border: none;
    cursor: pointer;
}

.mk-button {
    position: relative; z-index: 1;
    clip-path: polygon( 1rem 0%, calc(100% - 1rem) 0%, 100% 50%, calc(100% - 1rem) 100%, 1rem 100%, 0 50% );
    background-color: var(--color-grey-1);
    background-image: linear-gradient(90deg, var(--color-grey-2), var(--color-grey-1));
    box-shadow: .1rem .1rem 0px red;
    padding: .75rem 1.5rem;
    backdrop-filter: blur(1rem) drop-shadow(0px 0 1rem var(--color-grey-1));
    transform-style: preserve-3d;
}
.mk-button:hover {
    background-image: linear-gradient(90deg, var(--mario-yellow), var(--mario-yellow-0));
    transform: scale(1.05);
}

.mk-button.outline::before, .mk-button.outline::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -2;
}
.mk-button.outline::before {
    top: 2px; left: 2px;
    width: calc(100% - 4px); height: calc(100% - 4px);
    clip-path: polygon( calc(1rem - .5px) 0%, calc(100% - 1rem + .5px) 0%, 100% 50%, calc(100% - 1rem + .5px) 100%, calc(1rem - .5px) 100%, 0% 50% );
    background-color: var(--color-grey-7);
}
.mk-button.outline::after {
    top: 3px; left: 3px;
    width: calc(100% - 6px); height: calc(100% - 6px);
    clip-path: polygon( calc(1rem - 1px) 0%, calc(100% - 1rem + 1px) 0%, 100% 50%, calc(100% - 1rem + 1px) 100%, calc(1rem - 1px) 100%, 0% 50% );
    background-color: var(--color-grey-1);
    background-image: linear-gradient(180deg, var(--color-grey-0) 5%, var(--color-grey-1) 6%);
}
.mk-button.outline:hover::after {
    background-image: linear-gradient(90deg, #f7c73b, #fffba3);
}

.a-button, .b-button, .y-button, .x-button {
    display: block;
    padding: .4rem 2rem .5rem;
    border-radius: .4rem;

    background-image: linear-gradient(180deg, var(--color-grey-5), var(--color-grey-8));
    border: 5px ridge var(--color-grey-2);
    box-shadow: 2px 2px 2px 0px var(--color-black-a50);

    color: var(--mario-yellow);
    font-size: 1.5rem;
    text-transform: uppercase;
    text-align: center;
}

.a-button::before, .b-button::before, .y-button::before, .x-button::before, .button.back::after {
    content: "";
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
    .a-button::before, .b-button::before, .y-button::before, .x-button::before, .button.back::after {
        width: 1.5rem; height: 1.5rem;
        transform: translateY(.2rem);
        margin-right: .5rem;
    }
    .button.back::before {
        content: "";
        background-image: url("../icons/back.svg");
        transform: translateY(.25rem);
    }
    .b-button::after {
        content: "";
        background-image: url("../icons/b_button.svg");
        margin-left: .5rem;
    }
}
@media screen and (max-width: 768px) {
    .a-button::before, .b-button::before, .y-button::before, .x-button::before, .button.back::after {
        width: 1.5rem; height: 1.5rem;
        margin-bottom: .5rem;
        transform: translateY(.2rem);
    }
    .b-button::before {
        content: "";
        background-image: url("../icons/b_button.svg");
    }
    .button.back::after {
        content: none;
    }
}


.a-button::before {
    background-image: url("../icons/a_button.svg");
}

.b-button::before {
    background-image: url("../icons/b_button.svg");
}

.x-button::before {
    background-image: url("../icons/x_button.svg");
}

.y-button::before {
    background-image: url("../icons/y_button.svg");
}


.bento {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

@media screen and (max-width: 768px) {
    .bento {
        grid-template-columns: repeat(1, 1fr);
    }    
}
@media screen and (min-width: 768px) {
    .bento-2c {
        grid-template-columns: repeat(2, 1fr);
    }
    .bento-3c {
        grid-template-columns: repeat(3, 1fr);
    }
    .bento-4c {
        grid-template-columns: repeat(4, 1fr);
    }
    .bento-5c {
        grid-template-columns: repeat(5, 1fr);
    }    
}

.bento-box {
    border-radius: 1rem;
    padding: 1rem;
    background-color: var(--color-grey-1);
    color: var(--color-grey-7);
}
.bento-box .bento-box {
    background-color: var(--color-grey-2);
}

@media screen and (min-width: 768px) {
    .bento-box-1-1 {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .bento-box-1-2 {
        grid-column: span 2;
        grid-row: span 1;
    }
    
    .bento-box-2-1 {
        grid-column: span 1;
        grid-row: span 2;
    }    
}

.round-button {
    display: block;
    width: fit-content;
    margin: auto;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    background-color: var(--color-grey-1);
    border: 2px solid var(--color-grey-1);
    border-radius: 1rem;
}
.round-button:hover {
    background-color: var(--color-white);
}

.bento-box-title {
    margin: 0;
    font-size: 1.5rem;
    text-align: center;
    font-family: var(--subtitle-font);
}

.bento-box h4:not(.bento-box-info) {
    margin: 0;
    font-size: 1.25rem;
    font-weight: normal;
}

.bento-box-infos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.bento-box-info {
    margin: .25rem .25rem .25rem 0;
    font-size: .75rem;
    font-weight: normal;
    color: var(--color-grey-1);
    background-color: var(--color-grey-7);
    padding: 0.25rem 0.5rem;
    border-radius: 2rem;
    display: inline-block;
}

.bento-box-info a {
    color: inherit;
}

.bento-box-description {
    margin: .5rem 0 0;
    font-size: 1rem;
    color: var(--color-grey-9);
}

.bento-box ul {
    list-style-type: '- ';
    margin: 0;
    padding-left: 1rem;
}