* { padding: 0; margin: 0; font-family: "Roboto", sans-serif; } body { background: #121212; position: fixed; } .loading { width: 59vh; margin-left: 50vw; transform: translateX(-29.5vh); height: 100%; position: fixed; top: 0; display: flex; justify-content: center; align-items: center; z-index: 100; background: #ffffff; /* background-image: url("peluk.gif"); */ background-size: 100px; background-position: center top; } .loading .content { text-align: center; font-weight: 500; color: white; font-size: 1.1em; } .loading img { width: 60px; width: 60px; } .background1 { height: 100vh; width: 59vh; margin: auto; position: absolute; top: 0; left: calc(50vw - 29.5vh); background-color: #121212; background-image: url("https://i.postimg.cc/ZnQqN90V/bg2.jpg"); background-size: cover; } .background2 { margin: auto; width: 59vh; height: 100vh; position: absolute; top: 0; left: calc(50vw - 29.5vh); background-color: #000000; background-image: url("foto.jpg"); background-size: cover; filter: brightness(60%); -webkit-filter: brightness(60%); } .copyright { text-decoration: none; position: fixed; bottom: 10px; width: 90px; margin-left: 50vw; transform: translateX(-45px); display: flex; justify-content: space-around; align-items: center; color: white; z-index: 99; opacity: 0.5; } .main { position: absolute; top: 0; width: 100vw; height: 100vh; /* background: blue; */ } .main .content { /* width: 100%; */ overflow-x: hidden; width: 59vh; margin: auto; } .main .content .jam h1 { color: white; font-weight: 100; font-size: 4.3em; text-align: center; margin-top: 120px; } .main .content .tanggal { display: flex; justify-content: center; color: white; margin: 0px 0 20px 0; font-size: 1.2em; } .main .content .notif { background: rgba(231, 231, 231, 0.945); width: 88%; padding: 15px; margin: 10px auto; border-radius: 15px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.801); cursor: pointer; transform: translateX(-100vw); transition: 300ms all ease; } .main .content .notif .header { width: 100%; display: flex; justify-content: space-between; align-items: center; color: rgb(65, 65, 65); margin-bottom: 5px; } .main .content .notif .header .wa { display: flex; align-items: center; } .main .content .notif .header .wa h3 { margin-right: 6px; font-weight: 400; font-size: 0.9em; } .main .content .notif .header .wa h3 i { display: flex; justify-content: center; align-items: center; background-image: linear-gradient(190deg, #72e587, #23a542); color: white; width: 23px; height: 23px; border-radius: 6px; font-size: 1.2em; } .main .content .notif .header .time { font-size: 0.9em; } .main .content .notif .nama { font-weight: 500; font-size: 1.1em; } .swal2-popup { padding-bottom: 0; padding-top: 25px; background-color: rgb(30, 30, 30); color: white; width: 85vw; max-width: 400px; border-radius: 20px; overflow: hidden; } .swal2-image { height: 130px; } .swal2-title { padding: 10px !important; font-size: 1.2em; font-weight: 500; } .swal2-actions { width: 100%; display: flex; margin: 0 !important; margin-top: 20px !important; border-top: 3px solid rgb(76, 76, 76); } .swal2-actions button, button:active, button:focus { background: none !important; color: #52adf2 !important; width: 50%; font-size: 1.2em !important; font-weight: 400 !important; padding: 17px 0; margin: 0; border-radius: 0 !important; box-shadow: none !important; } .swal2-deny { position: relative; } .swal2-deny::after { content: ""; width: 2px; height: 100%; background: rgb(76, 76, 76) !important; position: absolute; right: -1px; top: 0; } textarea { resize: none; } .btn-mulai { position: fixed; color: rgb(0, 0, 0); bottom: 50px; right: 0; left: 0; text-align: center; } .btn-mulai p { background: rgba(231, 231, 231, 0.788); color: rgb(36, 36, 36); padding: 5px 10px; border-radius: 10px; display: inline-block; font-size: 1.1em; font-weight: bold; cursor: pointer; animation: goyang 1200ms infinite ease; box-shadow: 1px 1px 10px rgb(0, 0, 0); } .btn-mulai p.hilang2, p.hilang3, p.hilang4 { display: none; } .btn-mulai p.kirimWA { display: none; color: white; background: #23a542; } @keyframes goyang { 0% { transform: translateY(0); } 50% { transform: translateY(5px); } 100% { transform: translateY(10); } } .kelip { animation: kelip 1200ms infinite ease; } @keyframes kelip { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } @media screen and (max-width: 600px) { .background1 { width: 100vw; left: 0; } .main .content { width: 100%; } .loading { width: 100%; margin-left: 0; transform: none; } .background2 { width: 100vw; left: 0; } } .border-radius { border-radius: 15px !important; } /*LOADING*/ @keyframes loadingmy { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } .loadingmy div { box-sizing: border-box !important; } .loadingmy > div { position: absolute; width: 74px; height: 74px; top: 13px; left: 13px; border-radius: 50%; border: 10px solid #000; border-color: #e81a46 transparent #e81a46 transparent; animation: loadingmy 1s linear infinite; } .loadingmy > div:nth-child(2) { border-color: transparent; } .loadingmy > div:nth-child(2) div { position: absolute; width: 100%; height: 100%; transform: rotate(45deg); } .loadingmy > div:nth-child(2) div:before, .loadingmy > div:nth-child(2) div:after { content: ""; display: block; position: absolute; width: 10px; height: 10px; top: -10px; left: 22px; background: #e81a46; border-radius: 50%; box-shadow: 0 64px 0 0 #e81a46; } .loadingmy > div:nth-child(2) div:after { left: -10px; top: 22px; box-shadow: 64px 0 0 0 #e81a46; } .myloading { width: 52px; height: 52px; display: inline-block; overflow: hidden; background: #121212; } .loadingmy { width: 100%; height: 100%; position: relative; transform: translateZ(0) scale(0.52); backface-visibility: hidden; transform-origin: 0 0; } .loadingmy div { box-sizing: content-box; }