@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&family=Roboto&display=swap'); *{ box-sizing: border-box; } body{ background: white; font-family: 'Poppins', sans-serif; margin: 0; padding: 0; background-color: #9CCDEB; } .form{ border-radius: 50px; justify-content: center; background: #F3FBFD; border: 1px solid #c1c1c1; margin-top: 5%; margin-bottom: 5%; max-width: 1500px; margin-left: auto; margin-right: auto; padding: 1rem; overflow: hidden; box-shadow: 100px; } /* .header{ text-align: center; } */ .form-input label{ float: left; text-align: left; display: block; padding-bottom: 1.20rem; } .form-input input{ margin-bottom: 1rem; background: white; border: 1px solid wheat; border-radius: 2px; width: 100%; padding: 0.7em; margin-bottom: 0.5rem; } .form-input input:focus { outline: 1px solid orange; } .form .button{ margin-top: 10px; } .form .button input{ height: 30px; width: 1165px; float: right; border: none; background-color: rgb(238, 175, 56); letter-spacing: 1px; border-radius: 5px; font-size: 20px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .button input:hover{ background-color: orange; } select { float: right; width: 100%; padding: 0.7em; margin-bottom: 0.5rem; background-color: white; border: 1px solid wheat; } select:focus { outline: 1px solid orange; } .form .messages{ margin-top:100px ; } .form .messages h1{ margin-top:45rem ; } .form .box{ margin-left: 10px; margin-bottom: 50px; margin-top: 50px; width: 500px; height: 150px; border: 1px solid black; background-color: white; border-radius: 5px; } .form .box p{ padding-left: 1rem; } @media (min-width: 400px) { .form { overflow: hidden; } .form-input label { float: left; width: 200px; } .form-input input { float: right; width: calc(100% - 300px); } .form select { float: right; width: calc(100% - 300px); } .form .button { float: right; width: calc(100% - 200px); } }