@view-transition {
    navigation: auto;
}


::view-transition-group(root) {
    animation-duration: 0.5s;
}


@keyframes move-out {
    from {
        transform: translateY(0%);
    }

    to {
        transform: translateY(-100%);
    }
}

@keyframes move-in {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0%);
    }
}

::view-transition-old(root) {
    animation: 0.4s ease-in both move-out;

}

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

:root {
    --font-size-xxl: 12rem;
    --font-size-xl: 6rem;
    --font-size-l: 3rem;
    --font-size-m: 2rem;

    --yellow: #FFD369;
    --light-gray: #EEEEEE;
    --gray: #393E46;
    --dark-gray: #222831;
    --red: #D64550;
}

html {
    box-sizing: border-box;
    font-size: 112.5%;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: var(--font-weight-normal);
    color: var(--page-text-color);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background-color: var(--dark-gray);
    line-height: 1.5;
    min-width: 34.5rem;
    font-family: "pixelify-sans";
    color: var(--light-gray);


}


.background__container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
    display: flex;
}

.infinite-scrolling {
    width: 100vw;
    height: 100vh;
    background: url('../assets/BgGrassEmpty.png') no-repeat;
    background-size: cover;
    flex-shrink: 0;
    animation: slide 10s linear infinite;
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}


button {
    font-family: "pixelify-sans";
    border: none;
}

a {
    text-decoration: none;
}

h1 {
    font-family: "puffin-arcade-chrome";
    font-size: var(--font-size-xxl);
    color: var(--yellow);
}

.small__title {
    font-size: var(--font-size-l);
}


.centered {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.centered li {
    display: flex;
    justify-content: center;
    padding: 1rem;
    background-image: url(../assets/Button.svg);
    background-repeat: no-repeat;
}

header div {
    display: flex;
    flex-direction: row;
    color: var(--dark-gray);
    text-align: center;
    gap: 1rem;
}

header {
    color: var(--light-gray);
    margin-top: -5rem;
}

.style__points {
    color: var(--dark-gray);
    background-color: var(--yellow);
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}

main {
    user-select: none;
}

.skater__wrapper {
    height: 30rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    justify-content: end;
}

#skater {
    margin: 4rem;
    max-width: 15rem;
}

.falling.fail {
    color: var(--red);
}

.falling {
    position: fixed;
    pointer-events: none;
    user-select: none;
    z-index: 10;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    font-family: 'pixelify-sans';
    font-size: var(--font-size-m);
    color: var(--light-gray);
}

.falling.left {
    animation-name: arc-left;
}

.falling.right {
    animation-name: arc-right;
}

@keyframes arc-left {
    0% {
        opacity: 1;
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-30px, -20px);
    }

    100% {
        opacity: 0;
        transform: translate(-60px, 60px);
    }
}

@keyframes arc-right {
    0% {
        opacity: 1;
        transform: translate(0, 0);
    }

    50% {
        transform: translate(30px, -20px);
    }

    100% {
        opacity: 0.5;
        transform: translate(60px, 60px);
    }
}

.trick__list {
    display: flex;
    gap: 2rem;
}

.trick__list--item {
    display: flex;
    flex-direction: column;
    background-color: var(--light-gray);
    color: var(--dark-gray);
    padding: 2rem 1rem;
    align-items: center;
}

.probability__list {
    display: flex;
    gap: 2rem;
}

.probability__list--item {
    display: flex;
    flex-direction: column;
    background-color: var(--light-gray);
    padding: 0rem 0.8rem;
    align-items: center;
}

.edit {
    opacity: 50%;

}

.name {
    display: flex;
    justify-content: center;
    font-size: var(--font-size-m);
    gap: 2rem;
}




.shop__nav {
    display: flex;
    justify-content: end;
    margin: 1rem;
}

.shop__button {
    padding: 1rem;
    background-color: var(--light-gray);
    border: solid 2.5px var(--dark-gray);
    color: var(--red);
}

.shop__items {
    overflow: scroll;
    max-height: 15rem;
}

.shop__item {
    max-width: 20rem;
    padding: 1rem;
}

.shop__container {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, auto);
}

.shop__wrapper {
    padding: 0 5rem;
}







.locked svg * {
    fill: black;
}

.locked {
    opacity: 33%;
    color: var(--red);
}

.invisible {
    opacity: 0%;
}


@font-face {
    font-family: puffin-arcade-chrome, sans-serif;
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: pixelify-sans, sans-serif;
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: pixelify-sans, sans-serif;
    font-weight: 700;
    font-style: normal;
}

.menu__sidepanel,
.rep__shop__sidepanel {
    position: fixed;
    top: 0;
    left: -100%;
    width: 250px;
    height: 100%;
    background-color: var(--dark-gray);
    color: var(--light-gray);
    transition: left 0.3s ease;
    z-index: 1000;
    padding: 1rem;
}

.sidepanel--active {
    left: 0;
}

.menu__toggle {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1100;
    font-size: 1.5rem;
    background: none;
    border: none;
    color: var(--light-gray);
    cursor: pointer;
}

.rep__shop__toggle {
    position: fixed;
    left: 1rem;
    z-index: 1100;
    font-size: 1.5rem;
    background: none;
    border: none;
    color: var(--light-gray);
    cursor: pointer;
}

.sidepanel__nav {
    padding-top: 2.5rem;
}

aside li {
    padding: 0.5rem;
}

aside a {
    color: var(--light-gray);
}