body { font-family: "Montserrat", sans-serif; background: #ffffff; margin: 0; padding: 0; } .max-container { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; width: 100%; } .container { background: white; padding: 100px; margin-top: 50px; border-radius: 12px; box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); text-align: center; width: 750px; border-top: 5px solid #652bf6; min-height: 350px; display: flex; flex-direction: column; align-items: center; justify-content: center; } h2 { font-size: 32px; color: rgb(43, 35, 76); font-weight: 400; margin-bottom: 15px; } .countdown-wrapper { width: 100px; height: 100px; border: 2px solid rgb(70, 41, 204); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 20px auto; position: relative; } .countdown { font-size: 16px; font-weight: 400; color: rgb(70, 41, 204); text-align: center; } .countdown span { font-size: 25px; font-weight: 400; color: rgb(70, 41, 204); text-align: center; } button { padding: 17px 40px; border-radius: 50px; cursor: pointer; border: 0; background-color: rgb(103, 204, 129); box-shadow: rgba(68, 68, 68, 0.572) 3px 2px 10px 0px; color: #ffffff; font-weight: 600; text-transform: uppercase; cursor: not-allowed; font-size: 15px; transition: all 0.5s ease; } button:active { box-shadow: rgba(68, 68, 68, 0.572) 3px 2px 10px 0px; cursor: pointer; } @media (max-width: 1170px) { .container { width: 650px; } } @media (max-width: 1024px) { .container { width: 500px; } } @media (max-width: 768px) { .container { padding: 40px 20px; width: 85%; } h2 { font-size: 26px; } .countdown-wrapper { width: 90px; height: 90px; } .countdown span { font-size: 20px; } button { padding: 15px 35px; font-size: 15px; } } @media (max-width: 480px) { .container { padding: 30px 15px; width: 90%; } h2 { font-size: 22px; } .countdown span { font-size: 18px; } button { padding: 12px 25px; font-size: 14px; } }