*
{
    font-family: Arial;
    user-select: none;
}
body
{
    --colorreal1: white;
    --colorreal2: #DADADA;
    --colorreal3: #adadad;
    --colorreal4: #777777;
    --colorreal5: #535353;
    --color1: white;
    --color2: #DADADA;
    --color3: #adadad;
    --color4: #777777;
    --color5: #535353;
}
#container
{
    --colorreal1: white;
    --colorreal2: #DADADA;
    --colorreal3: #adadad;
    --colorreal4: #777777;
    --colorreal5: #535353;
    --color1: white;
    --color2: #DADADA;
    --color3: #adadad;
    --color4: #777777;
    --color5: #535353;
    --transition_length: 2000ms;
    position: absolute;
    width: 100%;
    height: 100%;

    top:0;
    left: 0;
    overflow: hidden;
    background: var(--color1);
    transition: background-color var(--transition_length), border var(--transition_length), filter 1000ms;


}
#container_game
{

    transform-style: preserve-3d;
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    perspective: 50vw;
    z-index: 200;

}
#map_roll
{
    position: absolute;
    transform-style: preserve-3d;
    width: 0;
    height: 0;
    top: calc(50% + 110vw);
    left: 50%;
    //transform: translateY(150vw);
    //animation: rotatemap 40s linear infinite;
}
.map_slice
{
    position: absolute;
    width: 150vw;
    left: calc(50% - 75vw);
    height: 10vw;
    top: calc(50% - 5vw);
    //border: 1px solid black;
    background: var(--color2);
    transform-style: preserve-3d;
    transition: background-color var(--transition_length), border var(--transition_length);


}
@keyframes rotatemap {
    from
    {
        transform: rotateX(360deg);
    }
    to
    {
        transform: rotateX(0deg);
    }

}
.debri
{
    position: absolute;
    background: var(--color3);
    //background: #535353;
    transition: background-color var(--transition_length), border var(--transition_length);
}
.debri1
{
    width: 1vw;
    height: 1vw;
}
.debri2
{
    width: 1vw;
    height: 1.5vw;
}
.debri3
{
    width: 2vw;
    height: 1vw;
}
.model_cont
{
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    transform: rotateX(-90deg);
    /border: 2vw #ff4fe0 solid;
    transition: background-color var(--transition_length), border var(--transition_length);
}
.model_cont2
{
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    transition: background-color var(--transition_length), border var(--transition_length);
}
.cactus_part
{
    position: absolute;
    bottom: 0;
    width: 1vw;
    left: calc(50% - 1vw);
    height: 4.75vw;
    background: var(--color4);
    border: .25vw solid var(--color5);
    border-bottom: none;
}
.cactus_part2
{
position: absolute;
bottom: 0;
width: 5.5vw;
left: calc(50% - 3.25vw);
height: .5vw;
background: var(--color4);
border: .25vw solid var(--color5);
/border-left: none;
}
.cactus_part3
{
position: absolute;
bottom: 0;
width: .5vw;
left: calc(50% - 3.25vw);
height: 2vw;
background: var(--color4);
border: .25vw solid var(--color5);
border-bottom: none;
}

.cactus_top
{
    position: absolute;
    width: 1vw;
    height: 1vw;
    border: .25vw solid var(--color5);
    background: var(--color4);
    transform: rotateX(90deg) translateZ(4.9vw);
    left: calc(50% - 1vw);
    top: calc(50% - .75vw);
}
.cactus_top2
{
    position: absolute;
    width: .5vw;
    height: .5vw;
    border: .25vw solid var(--color5);
    background: var(--color4);
    transform: translateY(-4.4vw) translateX(-2.75vw) rotateX(90deg);
    left: calc(50% - .5vw);
    top: calc(50% - .5vw);
}
.cactus_top3
{
    transform: translateY(-4.4vw) translateX(2.25vw) rotateX(90deg);
}
.test
{
    position: absolute;
    width: 50vw;
    height: 100%;
    left: calc(50% - 25vw);
    background: #00ed72;
    top: 0;
}
#player
{
    position: absolute;
    width: 0;
    height: 0;
    top: calc(50% + 110vw);
    left: 50%;
    transform-style: preserve-3d;

    //animation: rotatemap 1s linear infinite;
    transform:  translateZ(30vw)translateY(-106vw) rotateX(75deg);
    //transition: transform 200ms linear;
}
#player2
{
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    top: calc(50% + 110vw);
    left: 50%;
    transform-style: preserve-3d;
//animation: rotatemap 1s linear infinite;
    transform:  translateZ(30vw)translateY(-106vw) rotateX(75deg);
//transition: transform 200ms linear;
}
#point_cont
{
    position: absolute;
    top: 1vmin;
    left: 1vmin;
    font-size: 5vmin;
    z-index: 300;
    color: var(--color5);
    text-shadow: var(--color2) white 0 0 1vmin;

}
#coin_cont
{
    position: absolute;
    top: 1vmin;
    right: 1vmin;
    font-size: 5vmin;
    text-align: right;
    width: 100%;
    z-index: 300;
    color: var(--color5);
    text-shadow: var(--color2) 0 0 1vmin;

}
#sunmoon_cont
{
    width: 100vmin;
    height: 20vmin;
    position: absolute;
    top: calc(50% - 10vmin);
    left: calc(50% - 50vmin);
    /border: 1px solid;
    z-index: 100;
   // animation: linear rotatesky infinite 20s;
}
#sun
{
    position: absolute;
    width: 20vmin;
    height: 20vmin;
    background: var(--colorreal3);
    border-radius: 50%;
    top: 0;
    left: 0;
}
#moon
{
    position: absolute;
    width: 20vmin;
    height: 20vmin;
    background: var(--colorreal1);
    border-radius: 50%;
    top: 0;
    //animation: linear rotatemoon infinite 20s;
    right: 0;
    //overflow: hidden;

}
#moon_in
{
    position: absolute;
    width: 20vmin;
    height: 20vmin;
    background: var(--color1);
    border-radius: 50%;
    top: 0;
    left: 8vmin;

    transition: background-color var(--transition_length), border var(--transition_length);
}
@keyframes rotatesky {
    from
    {
        transform: rotate(0);
    }
    to
    {
        transform: rotate(1turn);
    }

}
@keyframes rotatemoon {
    from
    {
        transform: rotate(0);
    }
    to
    {
        transform: rotate(-1turn);
    }

}

.rock_part
{
    position: absolute;
    left: calc(50% - 1vw);
    bottom: 0;
    width: 1.5vw;
    height: 1.5vw;
    background: var(--color4);
    border: .25vw solid var(--color5);

}
.rock2_part
{
    position: absolute;
    left: calc(50% - .5vw);
    bottom: 0;
    width: .5vw;
    height: .5vw;
    background: var(--color4);
    border: .25vw solid var(--color5);

}
.bird_torso_part
{
    height: 3vw;
    width: .5vw;
    border: .25vw solid var(--color5);
    background: var(--color4);
    position: absolute;
    left: calc(50% - .5vw);
    top: calc(50% - 2vw);
}
.bird_head_part
{
    position: absolute;
    height: 1.5vw;
    width: 1vw;
    border: .25vw solid var(--color5);
    background: var(--color4);
    bottom: 0;
    left: 0;
    transform-origin: 0 100%;
    transform: rotateX(-90deg);
}
.bird_head_side
{
    position: absolute;
    width: 2vw;
    height: 2vw;
    background: var(--color5);
    bottom: 0;
    left: 0;
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    transform-origin: 0 100%;

}
.bird_head_side:after
{
    content: '';
    position: absolute;
    width: 1vw;
    height: 1vw;
    background: var(--color4);
    bottom: .25vw;
    left: .25vw;
    clip-path: polygon(0 0, 0% 100%, 100% 100%);

}
.bird_head_side1
{
    transform: rotateY(-90deg);
}
.bird_head_side2
{
    transform: translateX(1.5vw) rotateY(-90deg);
}
.bird_head_front
{
    position: absolute;
    height: 2.3284vw;
    width: 1vw;
    border: .25vw solid var(--color5);
    background: var(--color4);
    bottom: 0;
    left: 0;
    transform-origin: 0 100%;
    transform: translateZ(2vw) rotateX(45deg);
}
.bird_head_front:after
{
    width: 1.5vw;
    height: .75vw;
    position: absolute;
    top: calc(50% - .375vw);
    left: calc(50% - .75vw);
    background-image: url(eyes0.png);
    background-size: 100% 100%;
    content: '';
}
.bird_wing_top
{
    position: absolute;
    background: var(--color5);
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    width: 4vw;
    height: 2vw;
}
.bird_wing_top:before
{
    content: '';
    position: absolute;
    background: var(--color4);
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    width: 3vw;
    bottom: .25vw;
    left: .25vw;
    height: 1.25vw;
}
.bird_wing1_top
{
    transform: rotateX(-90deg) translateY(.25vw);
}
.bird_wing1_bottom
{
    transform: translateY(.25vw) rotateX(-90deg) ;
}
.bird_wing_back
{
    position: absolute;
    height: .25vw;
    width: 4vw;
    background: var(--color4);
    top: 1vw;
    transform: translateZ(-1vw);
}
.bird_wing_front
{
    position: absolute;
    height: .25vw;
    width: 4.6vw;
    background: var(--color4);
    top: 1vw;
    transform: translateZ(.9vw) rotateY(28deg);
    transform-origin: 0 0;
}
.bird_wing1
{
    transform-origin: 0 50%;
    transform: translateY(-1.1vw);
    animation: bird_wing1_move linear infinite 600ms;
}

.bird_wing2
{
    transform-origin: 0 50%;
    transform:  rotateZ(180deg) translateY(-1.1vw);
    animation: bird_wing2_move linear infinite 600ms;
}

@keyframes bird_wing1_move {
    0%
    {
        transform: translateY(-1.1vw) rotateZ(0deg);
    }
    25%
    {
        transform: translateY(-1.1vw) rotateZ(20deg);
    }
    50%
    {
        transform: translateY(-1.1vw) rotateZ(0deg);
    }
    75%
    {
        transform: translateY(-1.1vw) rotateZ(-20deg);
    }
    100%
    {
        transform:  translateY(-1.1vw) rotateZ(0deg);
    }
}

@keyframes bird_wing2_move {
    0%
    {
        transform: rotateZ(180deg) translateY(-1.1vw) rotateZ(0deg);
    }
    25%
    {
        transform: rotateZ(180deg) translateY(-1.1vw) rotateZ(-20deg);
    }
    50%
    {
        transform: rotateZ(180deg) translateY(-1.1vw) rotateZ(0deg);
    }
    75%
    {
        transform: rotateZ(180deg) translateY(-1.1vw) rotateZ(20deg);
    }
    100%
    {
        transform:  rotateZ(180deg) translateY(-1.1vw) rotateZ(0deg);
    }
}
#menu
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 900;
    overflow: hidden;
}
#press_a_button
{
    position: absolute;
    height: 100%;
    width: 100%;
    font-size: 2.5vw;
    color: white;
    text-shadow: black 0 0 1vw, black 0 0 2vw;
    text-align: center;
    line-height: 100vh;
    /*height: 2.5vh;
    bottom: 5vw;*/
    z-index: 2000;
    transition: opacity 50ms;
    animation: blinkpress 2s linear infinite;
}
@keyframes blinkpress {
    0%
    {
        text-shadow: black 0 0 1vw, black 0 0 3vw;
    }
    50%
    {
        text-shadow: black 0 0 .5vw, black 0 0 1vw;
    }
    100%
    {
        text-shadow: black 0 0 1vw, black 0 0 3vw;
    }
}
#title
{
    color: white;
    text-shadow: black 0 0 1vw, black 0 0 2vw, black 0 0 4vw;
    text-align: center;
    text-align: center;
    font-size: 5vw;
    position: absolute;
    width: 100%;
    height: 5vw;
    top: 1vw;
}
#description
{
    width: calc(100% - 10vw - 30vw);
    //height: 21.5vw;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: black 0 0 .1vw;
    padding: 1vw;
    position: absolute;
    top: 15vw;
    right: 5vw;
    text-align: justify;
    font-size: 1.5vw;
    opacity: 0;
    color: white;
    transition: opacity 1000ms;
}
.button_cont
{
    position: absolute;
    left: 5vw;
    top: 15vw;
    width: 30vw;

    transition: opacity 1000ms;
}
#button_cont
{
    opacity: 0;
}
.button
{
    font-size: 3vw;
    height: 3vw;
    color: white;
    text-shadow: black 0 0 2vw, black 0 0 1vw;
    transition: text-shadow 100ms;
    cursor: pointer;
    margin-bottom: 2vw;
}
.button:hover
{
    text-shadow: black 0 0 .5vw, black 0 0 .5vw;
}
.a
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
#inspection_box
{
    position: absolute;
    height: 70vh;
    width: 70vh;
    background: #f3f3f3;
    left: calc(50% - 35vh);
    top: calc(50% - 35vh);
    box-shadow: black 0 0 1vw;
    perspective: 20vw;
    transform-style: preserve-3d;
}
#inspect_area
{
    display: none;

}
#inspection_cont
{
    transform-style: preserve-3d;
    transform: translateY(35vh) translateZ(10vw);
}
#dinoinspection_cont
{
    transform-style: preserve-3d;
    transform: translateY(35vh) translateZ(10vw);
    animation: rotatedino 4s linear infinite;
    position: absolute;
    height: 0;
    width: 0;
    left: 50%;
    top: 50%;
}
@keyframes rotatedino {
    0%
    {
        transform:translateZ(13vw)rotateY(0) rotateX(90deg) ;
    }
    50%
    {
        transform:translateZ(13vw) rotateY(180deg) rotateX(90deg) ;
    }
    100%
    {
        transform:translateZ(13vw) rotateY(360deg) rotateX(90deg);
    }

}
#button_cont2
{
    display: none;
}
#death_screen
{
    font-size: 6vw;
    line-height: 100vh;
    color: white;
    text-shadow: black 0 0 1vw, black 0 0 2vw;
    display: none;
    text-align: center;
    z-index: 3000;
}
#death_msg
{
    height: 3vw;
    line-height: 3vw;
    font-size: 3vw;
    text-align: center;
    position: absolute;
    left: 0;
    width: 100%;
    top: calc(50% + 4vw);
    color: white;
    text-shadow: black 0 0 .5vw, black 0 0 1vw;
}
#highscore
{
    position: absolute;
    height: 2vw;
    font-size: 2vw;
    width: 100%;
    top: 7.5vw;
    text-align: center;
    color: white;
    text-shadow: black 0 0 1vw, black 0 0 .5vw;
    transition: opacity 1s;
    opacity: 0;
}
.coin_side
{
    position: absolute;
    top: calc(50% - 1.75vw);
    left: calc(50% - 1.75vw);
    width: 3vw;
    height: 3vw;
    border: .25vw solid var(--color4);
    background: var(--color5);

}
.coin_side:after
{
    content: '$';
    position: absolute;
    top: -0.1vw;
    left: .1vw;
    width: 3vw;
    height: 3vw;
    text-align: center;
    font-size: 3vw;
    color: var(--color4);
    transform: rotate(45deg);

}
.coin_side_side
{
    height: .25vw;
    width: 3.5vw;
    position: absolute;
    top: calc(50% - .125vw);
    left: calc(50% - 1.75vw);
    background: var(--color4);
}
.coin_cont
{
    animation: coinrotate 2s linear infinite;
}
@keyframes coinrotate {
    0%
    {
        transform: rotateX(-90deg) translateY(-4vw) rotateY(0);
    }
    50%
    {
        transform: rotateX(-90deg) translateY(-3.5vw) rotateY(180deg);
    }
    100%
    {
        transform: rotateX(-90deg) translateY(-4vw) rotateY(360deg);
    }
}
#js13k
{
    position: absolute;
    width: 100%;
    font-size: 1vw;
    bottom: 1vw;
    color: white;
    text-align: center;
    text-shadow: black 0 0 .5vw, black 0 0 .5vw;
}
#dino_shop
{
    display: none;
}
#dino_inspector
{
    position: absolute;
    height: 70vh;
    width: 70vh;
    background: #f3f3f3;
    left: calc(50% - 35vh);
    top: calc(50% - 35vh);
    box-shadow: black 0 0 1vw;
    perspective: 25vw;
    transform-style: preserve-3d;
}
#dino_parts
{
    position: absolute;
    width: calc(50% - 35vh - 4vw);
    right: 2vw;
    /height: 400px;
    background: #f3f3f3;
    top: calc(50% - 35vh);
    box-shadow: black 0 0 1vw;
    overflow-x: hidden;
    overflow-y: scroll;
    max-height: 70vh;
    display: flex;
    flex-wrap: wrap;

}
.part_category
{
    height: 1vw;
    width: 100%;
    position: relative;
    font-size: 1.5vw;
    color: #172e2e;
    padding: .5vw;
}
.part_elem
{
    position: relative;
    width: 7vw;
    height: 7vw;
    background: #f6f6f6;
    box-shadow: black 0 0 .3vw;
    overflow: hidden;
    cursor: pointer;
    margin: 1vw;
    cursor: pointer;
    transform: scale(1);
    transition: transform 200ms;
}
.part_elem:hover
{
    transform: scale(1.05);
}
.part_price
{
    position: absolute;
    width: calc(100% - .5vw);
    padding-left: .5vw;
    height: 1vw;
    bottom: 0;
    left: 0;
    font-size: 1vw;
    font-weight: bold;
    color: white;
    background: linear-gradient(90deg, dimgray, transparent);
    z-index: 200;
}
.part_content
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    perspective: 20vw;
    transform-style: preserve-3d;
}


.dino_eyes
{
    position: absolute;
    width: 1.5vw;
    height: .75vw;
    left: calc(50% - .75vw);
    top: calc(50% - .375vw);
    background-size: 100% 100%;
}

.dino_head_side
{
    position: absolute;
    width: 1.5vw;
    height: 1.5vw;
    border: .25vw solid var(--color4);
    background: var(--color5);
    left: calc(50% - 1vw);
    top: calc(50% - 1vw);
}
.dino_head_longside
{
    position: absolute;
    width: 1.5vw;
    height: 2.5vw;
    border: .25vw solid var(--color4);
    background: var(--color5);
    left: calc(50% - 1vw);
    top: calc(50% - 1.5vw);
}
.dino_tail
{
    position: absolute;
    transform-style: preserve-3d;
}
.dino_tail_ball
{
    width: 1.5vw;
    height: .75vw;
    border: solid var(--color5) .25vw;
    border-top: none;
    background: var(--color4);
    position: absolute;
    left: calc(50% - 1vw);
    /bottom: 0;
    top: calc(50% - 1vw);
    border-radius: 1vw;
}
.dino_tail_box
{
    width: 1vw;
    height: 1vw;
    border: solid var(--color5) .25vw;
    background: var(--color4);
    left: calc(50% - .75vw);
    top: calc(50% - .75vw);
    position: absolute;
}
.dino_torso
{
    height: 3vw;
    width: 2vw;
    border: solid var(--color5) .25vw;
    background: var(--color4);
    position: absolute;
    left: calc(50% - 1vw);
    top: calc(50% - 1.5vw);
}
.dino_torso_ends
{
    height: 2vw;
    width: 2vw;
    border: solid var(--color5) .25vw;
    background: var(--color4);
    position: absolute;
    left: calc(50% - 1vw);
    top: calc(50% - 1vw);
}
#coin_amount
{
    position: absolute;
    top: 1vmin;
    right: 1vmin;
    font-size: 5vmin;
    text-align: right;
    width: 100%;
    z-index: 300;
    color: white;
    text-shadow: black 0 0 1vmin;

}
.dino_leg_part
{
    height: 1vw;
    width: .25vw;
    border-left: solid var(--color5) .25vw;
    background: var(--color4);
    top: 0;
    left: calc(50%);
    position: absolute;
}
.dino_leg
{
    animation: dinolegmove 1s linear infinite;
    position: absolute;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
}
.dino_head
{
    transform-style: preserve-3d;
}
.base_cont
{
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    position: absolute;
    transform-style: preserve-3d;
}
@keyframes dinolegmove {
    0%
    {
        transform: rotateX(20deg);
    }
    50%
    {
        transform: rotateX(-20deg);
    }
    100%
    {
        transform: rotateX(20deg);
    }
}