body { background: rgb(210, 218, 231); } .wrapper { margin: 0 auto; display: inline-block; background-color: rgba(159, 183, 218, 0.856); border-radius: 10px; width: 70%; height:60vh; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .czytnik { text-align: center; position: absolute; left: 50%; bottom: -20%; transform: translate(-50%, -10%); box-shadow: 0 0 rgb(103, 88, 184); background-color: #3654c9; padding: 30px 40px; font-family: monospace; font-size: 30px; display: none; width: 70%; } .czytnik.open { display: block; } .code-p { text-align: center; } .test-form { display: flex; flex-direction: column; align-items: flex-start; } .test-form div { width: 100%; display: flex; justify-content: space-between; } .main-text { font-family: "Oswald", Tahoma, sans-serif; font-weight: bold; text-transform: uppercase; letter-spacing: .15em; display: inline-block; text-shadow: 0 0 80px rgba(255,255,255,.5); color: #1C1C1C; text-align: center; line-height: 15vh; font-size: 11vh; height: 10%; } @media (max-width: 1300px) { .main-text { font-size: 7.5vh; width: 100%; } } @media (max-width: 900px) { .wrapper { height: 40%; } .main-text { font-size: 3.3em; line-height: 10vh; width: 100%; } .czytnik { bottom: -30%; transform: translate(-50%, -10%); padding: 30px 50px; font-size: 25px; } } @media (max-width: 650px) { .wrapper { height: 30%; } .main-text { font-size: 2.1em; line-height: 6vh; width: 100%; padding: 20px 0; } } .checkout-button { margin: 10px 0; font-size: 14px; background-color: #5d7cd3; border-radius: 3px; border: 0; padding: 15px 40px; display: inline-block; text-align: center; box-shadow:0px 4px 0px #1e3572; font-family: monospace; } .checkout-button:hover { box-shadow: 0 0 rgb(103, 88, 184); background-color: #3654c9; cursor: pointer; } .checkout-button:active { top: 4px; box-shadow: 0 0 #b85a5b; background-color: #3654ff; } a.checkout-button { color: black; text-decoration: none; } .map-buttons { display: flex; align-items: center; justify-content: space-between; width: 100%; } .seat-wrapper { display: flex; flex-direction: column; } .main-seat-text { font-size: 70px; text-align: center; }