html { background: #EC1187 linear-gradient(to bottom right, #EC1187 0%, #FF8D10 100%); background-repeat: no-repeat; width: 100vw; height: 100vh; height: -webkit-fill-available; } body { font: 0.875rem "Avenir Next", Helvetica, Arial, sans-serif; } [class~="container"] { width: 85%; max-width: 40rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } [class~="form"] { width: 100% } a { cursor: pointer; } [class~="bubble"] { display: block; margin-top:2.75rem; border-radius: 1.5rem; } [class~="header"] { padding:1rem 1rem 0.75rem; font-size:1rem; background-color: white; border-radius: 2rem 2rem 0 0; display: flex; align-items: top; justify-content: left; } [class~="navbar"] { display: flex; align-items: center; width: 100%; height: 3.5rem; margin-top: 1rem; } [class~="pfp-container"] { border-radius:18.75rem; width:2.5rem; height:2.5rem; background-color: #F1F1F1; background-image: url('../images/profilePlaceholder[class~="png"]'); background-position:center center; background-size: 1rem 1rem; background-repeat: no-repeat; overflow: hidden; position: relative; flex-shrink: 0; display: block; } [class~="pfp"] { width: 100%; height: 100%; object-fit: contain; border-radius: 1.25rem; } [class~="user-container"] { margin-left:0.75rem; font-size: 0.875rem; } [class~="username"] { font-weight: 500; } [class~="prompt"] { font-weight: bold; } [class~="textarea-container"] { width:100%; margin-bottom:0.625rem; background-color:rgba(255,255,255,0.4); backdrop-filter: blur(1.5rem); -webkit-backdrop-filter: blur(0.375rem); border-radius: 0 0 1.5rem 1.5rem; position: relative; -webkit-appearance: none; } [class~="top-left-corner"] { position:absolute; top:0; left:0; background: url(../images/top-left-corner[class~="svg"]); width:1.5rem; height:1.5rem; } [class~="top-right-corner"] { position:absolute; top:0; right:0; background: url(../images/top-right-corner[class~="svg"]); width:1.5rem; height:1.5rem; } textarea { width:100%; padding:1.125rem 1.5rem; height:8.75rem; box-sizing: border-box; font-size:1.25rem; font-weight: 600; border:none; outline:none; background-color: transparent; } textarea::placeholder { color: rgba(0,0,0,0.25); } [class~="dice-button"] { position:absolute; bottom: 1rem; right: 1rem; font-size: 1rem; background-color: rgba(255, 255, 255, 0.25); padding: 0.5rem; border-radius: 6.25rem; width: 1.25rem; height: 1.25rem; text-align: center; touch-action: manipulation; display: flex; justify-content: center; align-items: center; } [class~="button"], [class~="button"]{ display: flex; align-items: center; justify-content: center; width: 100%; background-color: black; border-radius: 6.25rem; border: none; font-size: 1.125rem; font-weight: 700; color:white; text-decoration: none; box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.25); height: 3.75rem; box-sizing: border-box; cursor: pointer; } [class~="button-white"] { background: white; color: black; } [class~="button-translucent"] { background: rgba(255,255,255,0.5); color: black; } [class~="button-gold"] { background: linear-gradient(90deg, #FFE197, #FFB923); font-weight: 800; font-style: italic; font-size: 1.25rem; text-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.25); } [class~="button-small"] { width: auto; height: 3rem; font-size: 0.9375rem; padding: 0 1.5rem 0.0625rem; } [class~="pulse"] { animation: animate-shake 2s ease-in-out infinite; } @keyframes pulse { 0% { transform: scale(1); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } @keyframes animate-shake { 0%, 10%, 65%, 100% { transform: rotate(0deg) scale(1.0); } 30%, 40% { transform: rotate(-1deg) scale(1.05); } 35%, 45% { transform: rotate(1deg) scale(1.05); } } [class~="submit"]:disabled { text-indent: -624.9375rem; } [class~="submit"]:disabled::after { content: ""; position: absolute; width: 1rem; height: 1rem; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border: 0.25rem solid transparent; border-top-color: #ffffff; border-radius: 50%; animation: loading-spinner 1s ease infinite; } @keyframes loading-spinner { from { transform: rotate(0turn); } to { transform: rotate(1turn); } } [class~="bottom"] { position: absolute; bottom: env(safe-area-inset-bottom); left: 8%; right: 8%; display: flex; flex-direction: column; align-items: center; justify-content: center; } [class~="home-container"] { text-align: center; } [class~="logo"] { object-fit: cover; width:75%; margin-top: 40% } [class~="check"] { display: inline-block; width: 15vh; height: 15vh; } [class~="sent"] { font-weight: 700; font-size: 1.25rem; color:#fff; margin: 0; } [class~="download-prompt"] { font-size: 1rem; font-weight: 700; color:white; margin: 0; text-align: center; } [class~="home-subtitle"] { margin: 0 auto; margin-top:1.5rem; font-size:1.5rem; font-weight: 700; color: #fff; } [class~="another"] { text-decoration: none; color: white; font-weight: 700; font-size:1.125rem; margin: 0; display: inline-block; border-bottom: 0.125rem solid white; } [class~="bottom-container"] { bottom: calc(env(safe-area-inset-bottom) + 3.125rem) ; position: absolute; width: 85%; max-width: 40rem; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 2.1875rem; padding-top: 2rem; text-align: center; left: 0; right: 0; margin: 0 auto; z-index: 1; } [class~="anonymous-tooltip"] { margin-top:0.75rem; font-size:0.875rem; color:white; margin-bottom:0.75rem; text-align: center; } [class~="ad-container"] { text-align: center; } [class~="tos-privacy"] { position: absolute; bottom: 0; width: 100%; } [class~="tos"] { text-decoration: none; font-size: 0.75rem; font-weight: 700; color: rgb(255, 255, 255, 0.5); margin-right: 0.625rem; } [class~="privacy"] { text-decoration: none; font-size: 0.75rem; font-weight: 700; color: rgb(255, 255, 255, 0.5); } [class~="modal-"]container[class~="off"] [class~="modal-bg"] { opacity: 0; } [class~="modal-"]container[class~="off"] [class~="modal-bottom-sheet"] { transform: translateY(100%); } [class~="modal-bg"] { background-color: rgba(0,0,0,0.75); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; transition: all 0.2s; } [class~="modal-bottom-sheet"] { background-color: #fff; padding: 1.5rem 1.875rem; border-radius: 1.875rem 1.875rem 0 0; display: flex; flex-direction: column; align-items: center; position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; text-align: center; transition: all 0.3s; } [class~="priority-title"] { font-weight: 700; font-size: 1.375rem; color: #000; white-space: pre-wrap; } [class~="priority-subtext"] { font-weight: 400; font-size: 1rem; } [class~="priority-smalltext"] { font-weight: 400; font-size: 0.75rem; } [class~="priority-smalltext"] a { text-decoration: none; } [class~="priority-skip"] { font-weight: 600; font-size: 1rem; color: #53565B; text-decoration: none; } [class~="priority-x"] { position: absolute; top: 1.5rem; right: 1.5rem; } [class~="grey"] { color: #53565B; } [class~="apple-pay"] { height: 3.375rem; width: 100%; background: black; border-radius: 3.125rem; overflow: hidden; transform: translateZ(0rem); } [class~="priority-gold-container"] { position: relative; width: 6.25rem; height: 6.25rem; } [class~="priority-gold-container"] [class~="pfp-container"] { position: absolute; bottom: -0.625rem; right: -0.625rem; border: 0.25rem solid white; } [class~="space1"] { height: 0.5rem; width: 0.5rem; } [class~="space2"] { height: 1rem; width: 1rem; } [class~="space25"] { height: 1.25rem; width: 1.25rem; } [class~="space3"] { height: 1.5rem; width: 1.5rem; } [class~="space4"] { height: 2rem; width: 2rem; } [class~="space5"] { height: 2.5rem; width: 2.5rem; } [class~="celebs-header"] { display: flex; width: 100%; height: 5rem; background-color: white; align-items: center; justify-content: center; } [class~="celebs-user-info"] { margin-left: 0.625rem; } [class~="step-one-container"] { margin-top: 2.5rem; } [class~="step-two-container"] { margin-top: 1.25rem; } [class~="celebs-steps"] { } [class~="celebs-step-title"] { color: white; font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.25rem; margin-left: 1.875rem; margin-right: 1.875rem; } [class~="celeb-select-container"]{ overflow: auto; white-space: nowrap; margin-top: 0.625rem; display: flex; flex-direction: row; align-items: center; padding: 0.625rem; padding-left: 1.875rem; overflow: scroll; } [class~="celeb-select-container"]::-webkit-scrollbar { display: none; } [class~="celeb-container"] { margin-right: 0.9375rem; height: 4.0625rem; display: flex; align-items: center; justify-content: center; } [class~="celeb-pic"] { width: 3.375rem; height: 3.375rem; object-fit: contain; border: thin solid; border-radius: 3.125rem; border-color: white; border-width: 0.125rem; } [class~="selected-celeb-pic"] { border-width: 0.3125rem; } [class~="celebs-textarea-container"] { margin-top: 0.9375rem; margin-bottom:0.625rem; background-color:rgba(255,255,255,0.4); backdrop-filter: blur(1.5rem); -webkit-backdrop-filter: blur(0.375rem); border-radius: 1.5rem; margin-left: 1.875rem; margin-right: 1.875rem; -webkit-appearance: none; } [class~="send-voice-message-container"] { margin-top: 1.25rem; margin-right: 1.875rem; margin-left: 1.875rem; } [class~="playerContainer"] { width: 10rem; height: 10rem; border-radius: 6.25rem; background-color: rgba(0,0,0,0.25); background-size:cover; border: 0.3125rem solid white; } [class~="playButton"] { width: 10rem; height: 10rem; background-image: url(../images/playIcon[class~="png"]); background-size: 5rem; background-position: center center; background-repeat: no-repeat; }