.crash-content { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 1fr); gap: 10px; grid-auto-flow: row; grid-template-areas: "crashgame crashgame crashgame crashgame crashgame crashgame" "crashgame crashgame crashgame crashgame crashgame crashgame" "crashgame crashgame crashgame crashgame crashgame crashgame" "crashplayers crashplayers crashplayers crashplayers crashplayers crashplayers" "crashplayers crashplayers crashplayers crashplayers crashplayers crashplayers"; background: #17181C; box-shadow: 0 4px #00000040; border-radius: 20px; } .crash-game { background: #22252F; border-radius: 20px; box-shadow: 4px 4px 4px 0px #00000040; width: 95%; height: 475px; margin: 41px auto 0 auto; } .crash-game__content { display: flex; } /* Crash-Window */ .crash-game__start-window { margin-left: 30px; height: 0; } .crash-game__start-window .crash__game-name { margin: 62px 0 2px 0; font-family: 'Montserrat Alternates'; font-weight: 700; font-size: 26px; color: #fff; box-shadow: 1px 1px 1px 0px #00000001; } .crash-game__start-window p { font-family: 'Montserrat Alternates'; font-weight: 700; font-size: 14px; color: #FFFFFF85; } .crash-game-window__inputs { margin-top: 29px; } .crash-label { font-family: 'Montserrat Alternates'; font-weight: 700; font-size: 13px; color: #44C6EF54; margin: 0 0 4px 4px; } .input-style-crash { width: 347px; height: 40px; border: 2px solid #2B3458; border-radius: 15px; background: #22252F; } .diamond-input-crash { margin-left: -25px; } .input-style-crash__text { font-family: 'Montserrat Alternates'; font-weight: 700; font-size: 12px; color: #fff; padding-left: 35px; } .crash-input-deposit .diamonds-btns__display { margin: 8px 0 19px -22px; } .crash-input-deposit #max-button { padding: 4px 10px; } .crash-input-deposit .diamond-icon { left: 12px; } .crash-game-window__btn-start { display: flex; flex-direction: column; align-items: center; margin-top: 23px; } .crash-game-window__btn-start button { margin-bottom: 5px; background: #EF4444; border: unset; border-radius: 10px; width: 300px; height: 60px; font-family: 'Montserrat Alternates'; font-weight: 700; font-size: 16px; } .crash-window__line { display: flex; flex-direction: row-reverse; } .line-crash { width: 2px; height: 474px; background: #30364F; position: relative; top: -342px; left: 10%; z-index: 1; } .crash-content .error-block { top: 420px; } /* /Crash-Window */ /* Crash-Graph */ .crash-game__graph { width: 800px; top: 200px; left: 600px; position: fixed; } .chart-container canvas { background-color: transparent !important; width: 800px !important; height: 400px !important; transition: .3s ease; } .lost-ratio { color: #EF4444; font-weight: 700; } /* /Crash-Graph */ /* Crash-Players */ .crash-game__players { z-index: 2; background: #22252F; height: 91%; width: 95%; margin: 0 auto; border-radius: 20px; } .crash-game-players__content { background: #1D1F24; border-radius: 15px; width: 98%; height: 270px; margin: 20px auto 0 auto; overflow-y: auto; } .user-crash { background: #000000; width: 800px; margin: 10px auto 0 auto; display: grid; align-items: center; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(2, 1fr); grid-auto-columns: 1fr; grid-auto-rows: 1fr; gap: 0 50px; grid-auto-flow: row; grid-template-areas: "user-card user-card user-bid user-bid user-bid user-bid user-bid winmoney" "user-card user-card user-bid user-bid user-bid user-bid user-bid winmoney"; } .user-crash-name { display: flex; align-items: center; grid-area: user-card; } .user-crash-name h2 { color: #ffffff; font-family: 'Montserrat'; font-weight: 700; font-size: 20px; margin-left: 5%; } .user-crash-bid { display: flex; align-items: center; } .user-crash-game__status { display: flex; align-items: center; } .user-crash-bid h2 { color: #ffffff; font-family: 'Montserrat'; font-weight: 700; font-size: 18px; } .user-crash-game__status h2 { border-radius: 5px; font-size: 13px; font-family: 'Montserrat'; font-weight: 700; padding: 2px 6px; } .ingame-crash { color: #61647F; background: #22252F; box-shadow: 0px 4px 4px 0px #00000040; } .lostgame-crash { color: #fff; background: #EF4444; box-shadow: 0px 4px 4px 0px #00000040; } .wingame-crash { color: #28BD49; border: 1px solid #28BD49; } .wingame-money-crash { color: #28BD49; } .wingame-crash-count { display: flex; margin-top: 5px; } .user-crash-bid img { margin: 7px 0 0 0; } .user-crash-status { grid-area: user-bid; display: flex; justify-content: space-evenly; } .user-crash-game__winmoney { display: flex; align-items: center; grid-area: winmoney; } .user-crash-game__winmoney h2 { color: #28BD49; font-family: 'Montserrat'; font-size: 16px; font-weight: 700; } .user-crash-game__winmoney img { margin-top: 7px; } /* /Crash-Players */ /* Notification */ .notification-crash { text-align: center; top: 20%; left: 50%; position: absolute; background: #000; width: 200px; height: 40px; } /* /Notification */ /* Media */ @media screen and (max-width: 1740px) and (min-width: 1400px) { .crash-content .error-block { top: 410px; } .crash-game__graph { width: 500px; height: 500px; top: 190px; left: 570px; } .crash-input-deposit .btn-style__diamonds button { padding: 4px 18px !important; } .chart-container { width: 500px !important; height: 500px !important; } } @media screen and (max-width: 1400px) and (min-width: 1200px) { .header__nav nav a { font-size: 16px; } .crash-content .error-block { top: 400px; } .crash-game__graph { width: 400px; height: 400px; top: 180px; left: 550px; } .chart-container { width: 400px !important; height: 400px !important; } .crash-input-deposit .btn-style__diamonds button { padding: 4px 18px !important; } } /* /Media */