:root { --crust: #dce0e8; --mantle: #e6e9ef; --base: #eff1f5; --surface-0: #ccd0da; --surface-1: #bcc0cc; --surface-2: #acb0be; --overlay-0: #9ca0b0; --overlay-1: #8c8fa1; --overlay-2: #7c7f93; --subtext-0: #6c6f85; --subtext-1: #5c5f77; --text: #4c4f69; --logo-purple: #340c46; --logo-yellow: #fcbf00; --logo-pink: #e50051; --logo-blue: #009fe3; } body { background-color: var(--base); color: var(--text); margin: 0; } .site-header { width: 100%; display: flex; padding: 10px; margin-bottom: 40px; .site-logo img { height: 100px; } } .container { background-color: var(--mantle); display: grid; grid-template-columns: 1; row-gap: 20px; padding: 15px 50px; max-width: 50%; width: fit-content; margin: auto; border: 1px solid var(--surface-0); border-radius: 5px; } .container-content { margin-bottom: 10px; margin-top: 10px; } .form-elements { display: grid; grid-template-columns: 1; row-gap: 10px; margin-bottom: 15px; padding: 0 10px; } .form-buttons { display: flex; justify-content: center; } .form-input { width: 100%; padding: 5px; box-sizing: border-box; } .form-input::placeholder { color: var(--subtext-1); } .button { border: none; color: var(--mantle); padding: 5px 20px; border-radius: 3px; text-align: center; vertical-align: middle; text-decoration: none; display: inline-block; font-size: medium; cursor: pointer; } .button-accept { background-color: var(--logo-blue); }