@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap"); * { margin: 0; padding: 0; font-family: "Ubuntu", sans-serif !important; color: #3c3c3c; } .ppr { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: rgb(249, 235, 210); border-radius: 20px; animation: anm-bg 10s infinite alternate; } .ppr .t { border-top: 5px solid rgb(97, 39, 39); border-left: 5px solid rgb(97, 39, 39); border-right: 5px solid rgb(97, 39, 39); position: fixed; left: 0; right: 0; height: 50px; background-color: rgb(164, 98, 98); display: flex; justify-content: space-around; padding: 0 10px; } .ppr .t div { position: relative; height: 18px; width: 18px; top: 20px; background: rgb(97, 39, 39); border-radius: 50%; } .ppr .t div::after { content: ""; position: absolute; left: 5px; top: -28px; height: 40px; width: 8px; background-color: rgb(224, 224, 224); border-radius: 4px; } .ppr .b { height: 100%; margin-top: 50px; padding: 0 20px; } .ppr .b div { width: 100%; height: 40px; border-bottom: 1px solid black; } .pldr, .ctnr, .ccp { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; } .ctnr { border: 5px solid rgb(97, 39, 39); border-top: none; z-index: 1; } .pldr { z-index: 99; display: flex; justify-content: center; align-items: center; gap: 10px; background: rgb(249, 235, 210); transition: 0.5s all; opacity: 1; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; -o-transition: 0.5s all; } .pldr.rmv { opacity: 0 !important; } .pldr p { display: block; position: relative; height: 10px; width: 10px; background-color: rgb(97, 39, 39); animation: anm-pldr 1s ease-in-out infinite; border-radius: 5px; -webkit-animation: anm-pldr 1s ease-in-out infinite; } .pldr p:nth-child(2) { animation-delay: 0.15s; } .pldr p:nth-child(3) { animation-delay: 0.3s; } @keyframes anm-pldr { 0%, 70%, 100% { height: 10px; } 35% { height: 25px; } } @keyframes anm-bg { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } .lv { text-align: center; transition: 0.5s linear; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; } .lv img { animation: anm-lv 2s ease-in-out infinite; -webkit-animation: anm-lv 2s ease-in-out infinite; } .lv p { position: fixed; left: 0; right: 0; text-align: center; font-weight: 600; letter-spacing: 2px; font-size: 1.1em; margin-top: 10px; animation: lv-p 2s infinite; } @keyframes lv-p { 0% { transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); } 50% { transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); } 60% { transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); } 65% { transform: translateY(-3px); -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); } 70% { transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); } 75% { transform: translateY(-3px); -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); } 80% { transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); } 85% { transform: translateY(-3px); -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); } 90% { transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); } 95% { transform: translateY(-3px); -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); } 100% { transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); } } .lv-out { opacity: 0; } @keyframes anm-lv { 0%, 100% { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } 50% { transform: scale(0.85); -webkit-transform: scale(0.85); -moz-transform: scale(0.85); -ms-transform: scale(0.85); -o-transform: scale(0.85); } } .ctn { display: none; } .crd-ctnr { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; display: none; } .crd { position: relative; max-width: 270px; padding: 20px; display: flex; flex-direction: column; gap: 10px; background: white; border-radius: 3px; box-sizing: border-box; box-shadow: 8px 7px 0px rgba(0, 0, 0, 0.25); animation: anm-in linear 0.75s; -webkit-animation: anm-in linear 0.75s; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; } .crd-ctnr:last-child { display: flex; } .out { animation: anm-out ease-out 0.75s; } @keyframes anm-in { 0% { opacity: 0; transform: translate3d(-70%, 0, 0) rotate(-120deg); -webkit-transform: translate3d(-70%, 0, 0) rotate(-120deg); -moz-transform: translate3d(-70%, 0, 0) rotate(-120deg); -ms-transform: translate3d(-70%, 0, 0) rotate(-120deg); -o-transform: translate3d(-70%, 0, 0) rotate(-120deg); } 100% { opacity: 1; transform: translateZ(0); -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); } } @keyframes anm-out { 0% { opacity: 1; transform: translateZ(0); -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); } 100% { opacity: 0; transform: translate3d(100%, 0, 0) rotate(120deg); -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); -moz-transform: translate3d(100%, 0, 0) rotate(120deg); -ms-transform: translate3d(100%, 0, 0) rotate(120deg); -o-transform: translate3d(100%, 0, 0) rotate(120deg); } } .crd div { position: relative; } .crd img { background: rgb(238, 189, 189); border-radius: 3px; width: 100%; filter: sepia(30%) contrast(120%) brightness(90%) saturate(120%); -webkit-filter: sepia(30%) contrast(120%) brightness(90%) saturate(120%); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; } .crd p { text-align: center; font-size: 1.3em; font-weight: 600; } .btn { position: absolute; left: 0; right: 0; width: fit-content; text-align: center; margin: auto; margin-top: 30px; z-index: 2; } button.btn { border: none; outline: none; font-size: 1.1em; font-weight: 600; letter-spacing: 1.5px; background: none; animation: anm-btn 1s ease; transition: 0.1s ease all; -webkit-transition: 0.1s ease all; -moz-transition: 0.1s ease all; -ms-transition: 0.1s ease all; -o-transition: 0.1s ease all; -webkit-animation: anm-btn 1s ease; } button.btn:active { transform: scale(0.95); -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); } button.btn.send { display: none; animation: anm-btn 0.5s ease; -webkit-animation: anm-btn 0.5s ease; } .btn-out { opacity: 0; transform: translateY(70px); -webkit-transform: translateY(70px); -moz-transform: translateY(70px); -ms-transform: translateY(70px); -o-transform: translateY(70px); animation: anm-btn-out 0.5s ease !important; -webkit-animation: anm-btn-out 0.5s ease !important; } @keyframes anm-btn { from { opacity: 0; transform: translateY(70px); -webkit-transform: translateY(70px); -moz-transform: translateY(70px); -ms-transform: translateY(70px); -o-transform: translateY(70px); } to { opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } } @keyframes anm-btn-out { from { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); } to { opacity: 0; transform: translateY(70px); -webkit-transform: translateY(70px); -moz-transform: translateY(70px); -ms-transform: translateY(70px); -o-transform: translateY(70px); } } .ads { position: fixed; z-index: 2; bottom: 0px; left: 0; right: 0; } .ads > div { position: relative; display: flex; justify-content: center; align-items: center; height: 40px; background-color: rgb(164, 98, 98); transition: 0.5s ease; border: 5px solid rgb(97, 39, 39); -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease; } .ads.close > div { transform: translateY(45px) !important; -webkit-transform: translateY(45px) !important; -moz-transform: translateY(45px) !important; -ms-transform: translateY(45px) !important; -o-transform: translateY(45px) !important; } @keyframes anm-ads-in { from { transform: translateY(80px); -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); } to { transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } } .out { transform: translateY(80px); -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); } .ads button:nth-child(1) { position: absolute; height: 40px; width: 40px; right: -5px; top: -40px; border: none; background-color: rgb(164, 98, 98); border-radius: 5px 0 0; border-left: 5px solid rgb(97, 39, 39); border: 5px solid rgb(97, 39, 39); box-sizing: border-box; -webkit-border-radius: 5px 0 0; -moz-border-radius: 5px 0 0; -ms-border-radius: 5px 0 0; -o-border-radius: 5px 0 0; } .ads button:nth-child(1) div { position: relative; height: 30px; width: 30px; height: 100%; width: 100%; transition: 0.5s ease; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .ads.close > div div { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } .ads button:nth-child(1) div::after, .ads button:nth-child(1) div::before { content: ""; position: absolute; height: 3px; width: 20px; left: 5px; top: 13.5px; background: rgb(255, 255, 255); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .ads button:nth-child(1) div::after { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); } .ads button:nth-child(2) { font-weight: 500; letter-spacing: 1px; background: white; padding: 4px 12px; border: none; border-radius: 3px; box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.2); text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; } .ads button:nth-child(2):active { box-shadow: 1.5px 2px 0 rgba(0, 0, 0, 0.2); transform: scale(0.98); -webkit-transform: scale(0.98); -moz-transform: scale(0.98); -ms-transform: scale(0.98); -o-transform: scale(0.98); } .ads p { position: fixed; bottom: 10px; left: 0; right: 0; font-size: 0.8em; color: rgb(97, 39, 39); text-align: center; z-index: -1; letter-spacing: 2px; transition: 1s ease all; -webkit-transition: 1s ease all; -moz-transition: 1s ease all; -ms-transition: 1s ease all; -o-transition: 1s ease all; transform: translateY(40px); -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); } .ads.close p { transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); } #ccp { position: fixed; display: block; overflow: auto; left: 0; right: 0; top: 0; bottom: 0; background-color: rgb(249, 235, 210); } #ccp * { color: #3c3c3c; } .cp { position: relative; background: rgb(255, 255, 255); margin: 12px; padding: 10px; padding-bottom: 30px; border-radius: 3px; box-shadow: 6px 5px 0 rgba(0, 0, 0, 0.4); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; } .cp span, .cp p { font-size: 1em; } .cp h6 { position: absolute; right: 10px; bottom: 10px; } .swal2-popup textarea { resize: none; background: wheat; border-radius: 10px !important; -webkit-border-radius: 10px !important; -moz-border-radius: 10px !important; -ms-border-radius: 10px !important; -o-border-radius: 10px !important; } .swal2-title { font-size: 1.4em; color: #3c3c3c; margin-top: 5px; } .swal2-popup { background: rgb(249, 235, 210); border-radius: 15px !important; -webkit-border-radius: 15px !important; -moz-border-radius: 15px !important; -ms-border-radius: 15px !important; -o-border-radius: 15px !important; } .swal2-confirm { background: rgb(164, 98, 98) !important; } .swal2-loader { border-color: rgb(164, 98, 98) transparent; } .swal2-popup.swal2-toast .swal2-success { border-color: #aa2828 !important; }