@import url(https://fonts.googleapis.com/css?family=Ubuntu); @import url(https://fonts.googleapis.com/css?family=Handlee); * { padding: 0; margin: 0; font-family: "Ubuntu", sans-serif; } body { background: #eed9af; } .bg { position: absolute; height: 100%; width: 100%; background-size: cover; background-position: center; filter: brightness(0.5); } .content { color: white; height: 100%; text-align: center; display: flex; justify-content: center; align-items: center; align-content: center; position: relative; z-index: 2; } .card { background: rgba(0, 0, 0, 0.5); padding: 35px 40px; border-radius: 20px; } .content img.surat { margin: 25px auto; animation: animasi1 1s ease infinite; height: 90px; cursor: pointer; } @keyframes animasi1 { 0% { transform: scale(1.03); } 50% { transform: scale(1); } 100% { transform: scale(1.03); } } @keyframes animasi2 { 0% { transform: translateY(0); } 50% { transform: translateY(5px); } 100% { transform: translateY(0); } } .content2 { position: fixed; z-index: 3; top: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.575); display: none; } .content2 .wa { text-align: center; display: none; } .content2 .wa button { background-image: linear-gradient(to top left, #ff009d, #ff004c); padding: 7px 20px; margin: 50px auto; border-radius: 10px; font-size: 1.1rem; font-weight: 600; color: white; border: 2px solid white; animation: animasi2 1s ease infinite; } .paper { position: relative; width: 80%; max-width: 800px; min-width: 360px; height: 480px; margin: 0 auto; margin-top: 60px; background: #fafafa; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); overflow: hidden; } .paper:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40px; background: radial-gradient(#575450 6px, transparent 7px) repeat-y; background-size: 30px 30px; border-right: 3px solid #d44147; box-sizing: border-box; } .paper-content { position: absolute; top: 30px; right: 0; bottom: 30px; left: 40px; background: linear-gradient(transparent, transparent 28px, #91d1d3 28px); background-size: 30px 30px; } .paper-content textarea { width: 100%; max-width: 100%; height: 100%; max-height: 100%; line-height: 30px; padding: 0 10px; border: 0; outline: 0; background: transparent; color: rgb(0, 0, 0); font-family: "Handlee", cursive; font-weight: bold; font-size: 17px; box-sizing: border-box; z-index: 1; }