* { margin: 0px; padding: 0px; box-sizing: border-box; user-select: none; } body, html { position: relative; height: 100%; width: 100%; font-size: 0.7292vw; overflow: hidden; color: white; scroll-behavior: smooth; } .Bodyy { position: relative; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; } span, div:not(.form), img, svg, path, input { transition: all 0.3s ease; } .cont { width: 23.2813vw; height: 24.4115vw; background-image: url('../images/bg.png'); border-radius: 0.625vw; padding: 1.25vw; background-size: 100% 100%; overflow: hidden; } .icon_hd { margin-top: -0.3646vw; margin-left: -0.3646vw; width: 2.8125vw; height: 2.8125vw; background-image: url('../images/tringle.png'); background-size: 100% 100%; filter: drop-shadow(0 0.208vw 0.898vw rgba(244, 0, 0, 0.95)); } .icon_hd svg { width: 0.8854vw; height: 0.8854vw; } .left_block { gap: 0.0521vw; } .flex_hd span:first-child { font-size: 2.2917vw; font-family: 'AgencyB'; letter-spacing: -0.03em; text-shadow: 0 0 2.135vw rgba(255, 255, 255, 0.25); } .flex_hd span:last-child { margin-left: -0.7583vw; width: 4.2708vw; height: 2.6563vw; margin-top: 0.1vw; background-image: url('../images/city_text.png'); background-size: 100% 100%; filter: drop-shadow(0 0 0.835vw rgba(244, 0, 0, 0.85)); } .name_ui { margin-top: 0.1563vw; font-size: 1.0313vw; font-family: 'AgencyR'; color: rgba(255, 255, 255, 0.5); } .flex_hd { height: 1.9479vw; } .header { align-items: flex-start; } .close_pannel { height: 1.4063vw; border-radius: 0.156vw; padding: 0.156vw 0.156vw 0.156vw 0.313vw; background: rgba(255, 59, 59, 0.11); gap: 0.2604vw; margin-left: auto; } .close_box { width: 1.0938vw; height: 1.0938vw; background-image: url('../images/close_box.png'); background-size: 100% 100%; border-radius: 0.1042vw; box-shadow: 0 0.208vw 0.625vw rgba(147, 0, 0, 0.15); } .close_pannel span { font-size: 0.7292vw; font-family: 'Medium'; color: #930000; letter-spacing: -0.03em; text-shadow: 0 0 0.833vw rgba(147, 0, 0, 0.25); } .info_block { gap: 0.3125vw; width: 18.3958vw; margin-top: 0.5208vw; } .info_block svg { width: 0.8333vw; height: 0.8333vw; flex-shrink: 0; } .info_block span { font-size: 0.7292vw; font-family: 'Regular'; letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.65); } .bx_w { position: relative; width: 7.6042vw; height: 8.9583vw; background-size: 100% 100%; padding: 0.4167vw; display: flex; align-items: center; justify-content: center; flex-direction: column; } .Schwarzgeld { background-image: url('../images/bg_red.png'); } .cash { background-image: url('../images/bg_green.png'); } .button1 { text-align: center; } .bx_w img { width: 3.6458vw; height: 3.2813vw; margin-bottom: 2.2vw; } .row_bx { bottom: 1.1458vw; position: absolute; } .row_bx div { font-size: 0.7813vw; font-family: 'SemiBold'; text-shadow: 0 0 1.25vw rgba(255, 255, 255, 0.25); } .row_bx span { font-size: 0.7813vw; font-family: 'Medium'; margin-top: -0.1042vw; color: rgba(255, 255, 255, 0.5); } .tx_proc { background-image: url('../images/circle.png'); background-size: 100% 100%; width: 3.3854vw; height: 3.3854vw; font-size: 0.8687vw; font-family: 'SemiBold'; text-shadow: 0 0 1.771vw rgba(255, 255, 255, 0.25); } .button1 { margin-top: 1.25vw; } .middle_wrap { margin-top: auto; } .middle_wrap { justify-content: space-between; } .button1 { height: 1.9792vw; font-size: 0.7813vw; font-family: 'Regular'; border: 0.052vw solid rgba(255, 255, 255, 0.15); background: none; outline: none; color: white; padding-left: 0.4167vw; padding-right: 0.4167vw; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { /* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none; margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ } .button1::placeholder { color: rgba(255, 255, 255, 0.75); } .button2 { cursor: pointer; width: 100%; height: 1.9792vw; margin-top: 0.4688vw; border-radius: 0.1042vw; font-size: 0.7813vw; font-family: 'SemiBold'; box-shadow: 0 0.469vw 1.406vw rgba(244, 0, 0, 0.25); background: #f40000; gap: 0.2083vw; } .button2 svg { width: 0.8854vw; height: 0.8854vw; } .button2:hover { transform: translateY(0.1vw); } .button2:active { opacity: 0.75; } img { pointer-events: none; } .rev { flex-direction: row-reverse; } .flex { display: flex; } .clmn { display: flex; flex-direction: column; } .alcn { display: flex; align-items: center; } .jlcn { display: flex; align-items: center; justify-content: center; } .space { justify-content: space-between; } .w100 { width: 100%; } .h100 { height: 100%; }