@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');table { border-collapse: separate; } body { font-family: "Montserrat", sans-serif; scroll-behavior: smooth; margin: 0; position: relative; min-height: 100%; } h1 { font-size: 1.5rem; margin-top: 2.5rem; color: #00000F; } input { font-size: 16px; padding: 10px 10px 10px 5px; display: block; border: none; border-bottom: 1px solid #757575; background: transparent; font-family: "Montserrat", sans-serif; appearance: none; border-radius: 0; } input:focus, input:focus-visible{ outline: 0; } .footer b { color: #FFF23D; } .footer a { text-decoration: none; color: #FFF23D; } form{ max-width: 840px; margin: 1rem auto; } .container { width: 90%; max-width: 1280px; margin: 0 auto; } .container-center { display: flex; justify-content: center; flex-direction: column; align-items: center; margin: 2rem auto; gap: 2rem; } .button { font-size: 1rem; font-weight: 300; color: #FFF23D; padding: 14px 20px 13px; border-radius: 4px; background-color: #00000F; transition: .15s ease-in-out; text-align: center; outline: none; border: none; font-family: "Montserrat", sans-serif; font-weight: 600; } .button:hover { cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.4); } .head { display: flex; flex-direction: column; align-items: center; } .head img { max-width: 100%; max-height: 60px; padding-top: 2rem; } .form-row { display: flex; gap: 1rem; margin: 1rem 0; width: 100%; } .form-row>input { flex-grow: 1; } .email-container { flex-grow: 1; display: flex; align-items: center; } .email-container>input { flex-grow: 1; } .email-container span { padding: 0.75rem 1rem; font-size: 1.2rem; } .footer{ background-color: #111; color: #D5D7DD; position: absolute; bottom: 0; width: 100%; } .footer .container{ padding: 2rem 0; text-align: center; } #signature-container { display: none; margin: 5rem auto; padding-bottom: 450px; margin-bottom: 0; } .copy-confirm { display: none; position: absolute; padding: 1rem 1.3rem; background: #73db8b; color: #fff; font-size: 1.3rem; border-radius: 10px; } @media screen and (max-width: 975px) { .form-row { flex-direction: column; } .footer{ position: relative; } #signature-container{ padding-bottom: 2rem; } } @media screen and (max-width: 520px) { .email-container { flex-direction: column; align-items: stretch; } .email-container span { text-align: end; } .how-to { padding: 2.5rem 1rem; } form{ max-width: 75%; } }