* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #83a41f;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

button {
    border: none;
    cursor: pointer;
    outline: none;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(69, 69, 69);
    transition-property: transform, background-color, color, box-shadow;
    transition-duration: .4s;
    transition-timing-function: ease;
}

.road {
    height: 100vh;
    width: 350px;
    background: #525252;
    z-index: -1;
}

.road-container {
    position: absolute;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
}

.car {
    position: absolute;
    transform: translateY(75vh);
    width: 70px;
    transition: transform .2s ease-out;
    z-index: 2;
}

.trees {
    position: absolute;
    width: 230px;
    z-index: 3;
}

.tree1 {
    transform: translate(400px, -7vh);
}

.tree2 {
    transform: translate(830px, 5vh);
}

.tree3 {
    transform: translate(320px, 28vh);
}

.tree4 {
    transform: translate(810px, 45vh);
}

.tree5 {
    transform: translate(350px, 80vh);
}

.tree6 {
    transform: translate(840px, 85vh);
    z-index: 3;
}

.tree7 {
    transform: translate(920px, -30vh);
}

.tree8 {
    transform: translate(150px, 50vh);
}

.tree9 {
    transform: translate(950px, 60vh);
}

.tree10 {
    transform: translate(110px, 10vh);
}

.tree11 {
    transform: translate(100px, 90vh);
}

.tree12 {
    transform: translate(1040px, 28vh);
    z-index: 1;
}

.tree13 {
    transform: translate(330px, -30vh);
}

.tree14 {
    transform: translate(150px, -25vh);
}

.tree15 {
    transform: translate(1070px, -5vh);
    z-index: -1;
}

.house-img {
    position: absolute;
    width: 270px;
    transform: translate(1050px, 98vh);
    z-index: 1;
}

.line {
    background: rgba(255, 255, 255, 0.838);
    width: 10px;
    height: 60px;
    border-radius: 3px;
    z-index: -1;
    transform: translateY(0vh);
}

.line2 {
    transform: translateY(25vh);
}

.line3 {
    transform: translateY(50vh);
}

.line4 {
    transform: translateY(75vh);
}

.line5 {
    transform: translateY(-25vh);
}

.line6 {
    transform: translateY(-48vh);
}

.game-block {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 30px;
    right: 30px;
    display: none;
    font-family:'Courier New', Courier, monospace;
}

.game-button {
    padding: 0;
    background: transparent;
    border-radius: 50%;
    transition: transform .3s ease;
}

.game-button img {
    width: 80px;
}

.game-button .pause {
    display: none;
}

.game-button:hover {
    transform: scale(1.1, 1.1);
}

.crash,
.acceleration,
.coin {
    position: absolute;
}



.crash {
    transform: translate(-100px, -80vh);
    width: 130px;
    z-index: 0;
}

.acceleration {
    transform: translate(100px, -150vh);
    height: 130px;
    z-index: -1;
}

.coin {
    transform: translate(100px, -40vh);
    width: 60px;
    z-index: 1;
}

.score {
    display: flex;
    flex-direction: column;
    align-items: end;
    font-size: 20px;
    padding: 10px;
}

.score span {
    font-size: 24px;
}

.info-container {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 10;
}

.info-button,
.info-close-button {
    border-radius: 50%;
    color: rgb(110, 110, 110);
    width: 50px;
    height: 50px;
    font-size: 20px;
    font-family:'Courier New', Courier, monospace;
}

.info-button {
    background: rgb(255, 242, 203);
    font-weight: bold;
}

.info-button:hover {
    transform: scale(1.05, 1.05);
    color: rgb(75, 75, 75);
}

.info-block {
    display: flex;
    align-items: center;
    padding: 20px;
    width: 400px;
    height: 550px;
    border-radius: 20px;
    background: rgb(255, 242, 203);
    display: none;
}

.info-close-button {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(219, 219, 219, 0.384);
}

.info-close-button:hover {
    box-shadow: 0px 0px 4px 2px rgba(111, 111, 111, 0.2) inset;
    color: rgb(75, 75, 75);
}

.info-separator {
    background: rgb(213, 213, 213);
    width: 3px;
    height: 400px;
}

.info-page-button {
    width: 120px;
    height: 50px;
    background: rgb(255, 242, 203);
    border-bottom: 1px solid rgb(213, 213, 213);
    color: rgb(111, 111, 111);
}

.info-page-button:hover {
    color: rgb(47, 47, 47);
}

.active-button {
    box-shadow: -44px 0px 15px -39px rgba(111, 111, 111, 0.2) inset;
    color: rgb(47, 47, 47);
}

.info-pages-buttons {
    display: flex;
    flex-direction: column;
    justify-content: start;
    height: 80%;
}

.info-pages {
    width: 70%;
    height: 80%;
    padding: 10px;
}

.info-page {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    text-align: center;
    color: rgb(53, 53, 53);
}

.info-page h4 {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 17px;
    margin: 0;
    padding: 10px 0px;
}

.page-default {
    display: none;
    align-items: start;
}

.page-default h4 {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 400;
    padding: 0;
    font-size: 30px;
    align-self: center;
}

.page-default img{
    width: 100px;
}

.page-how {
    display: none;
}

.page-how p {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.page-how img {
    margin-top: 20px;
    width: 150px;
}

.page-top {
    display: none;
}

.page-top img {
    margin-top: 20px;
    width: 100px;
}

.info-top-list {
    width: 100%;
}

table {
    margin-top: 10px;
    border-collapse: collapse;
}

th {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    border-right: 1px solid rgb(213, 213, 213);
}

th:last-child {
    border-right: none;
}

th:nth-child(2) {
    width: 140px;
}

tr {
    border-bottom: 1px solid rgb(213, 213, 213);
}

td {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#li-1 {
    background: linear-gradient(38deg, rgba(2,0,36,1) 0%, rgba(255,237,0,1) 0%, rgba(0,212,255,0) 80%);
}

#li-2 {
    background: linear-gradient(38deg, rgba(2,0,36,1) 0%, rgba(179,179,179,1) 0%, rgba(0,212,255,0) 80%);
}

#li-3 {
    background: linear-gradient(38deg, rgba(2,0,36,1) 0%, rgba(213,105,0,1) 0%, rgba(0,212,255,0) 80%);
}


.backdrop-play-block {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.1);
    z-index: 5;
}

.play-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 500px;
    height: 200px;
    background: rgb(255, 242, 203);
    border-radius: 20px;
    color: rgb(255, 159, 85);
    font-size: 70px;
    padding: 20px;
    z-index: 10;
}

.play-block b {
    color:rgb(255, 234, 0);
    -webkit-text-stroke: 4px rgb(60, 60, 60);
}

.play-button {
    width: 240px;
    height: 50px;
    background: rgb(165, 255, 91);
    border-radius: 5px;
    font-size: 20px;
}

.play-button:hover {
    transform: scale(1.05, 1.05);
    background: rgb(158, 255, 79);
    color: rgb(40, 40, 40);
}

.backdrop-container {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5;
    display: none;
}

.finish-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 300px;
    height: 400px;
    background: rgb(255, 243, 206);
    border-radius: 20px;
    padding: 20px;
    font-size: 56px;
    color: rgb(255, 166, 82);
}

.restart-button {
    width: 200px;
    height: 50px;
    background: rgb(255, 206, 126);
    border-radius: 5px;
    font-size: 18px;
}

.restart-button:hover {
    background: rgb(255, 197, 104);
    transform: scale(1.05, 1.05);
    color: rgb(40, 40, 40);
}

.finish-score {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 80%;
    font-size: 30px;
}

.finish-score span {
    display: flex;
    flex-direction: column;
}

.finish-score span b {
    color: rgb(165, 96, 30);
}

.finish-score form {
    width: 200px;
    font-size: 14px;
}

.finish-score form span {
    flex-direction: row;
    justify-content: space-between;
}

.finish-score form span input,
.finish-score form span button {
    height: 30px;
    border-radius: 5px;
}

.finish-score form span input {
    width: 140px;
    border: none;
    outline: none;
    background: rgb(238, 238, 238);
    font-size: 14px;
    padding: 5px 10px;
}

.finish-score form span input:focus {
    outline: 1px solid rgb(217, 255, 129);
}

.finish-score form span button {
    width: 50px;
    background: rgb(227, 255, 163);
}

.finish-score form span button:hover {
    background: rgb(217, 255, 129);
    transform: scale(1.05, 1.05);
    color: rgb(40, 40, 40);
}

.unknown,
.done,
.max {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: none;
}

.unknown {
    color: rgb(250, 90, 90);
}

.done {
    color: rgb(161, 230, 0);
}

.max {
    color: rgb(146, 146, 255);
}