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 { display: inline-block; text-align: center; position: absolute; left: 50%; bottom: -20%; transform: translate(-50%, -10%); background-color: rgba(139, 152, 172, 0.856); padding: 30px 40px; font-family: monospace; font-size: 30px; } .czytnik:hover { box-shadow: 0 0 rgb(103, 88, 184); background-color: #3654c9; cursor: progress; } .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; } }