html{ width: 100%; height: 100%; margin: 0px; background-color: #14181b; } body{ position: relative; width: 100%; padding-top: 20px; padding-bottom: 130px; min-height: calc(100% - 150px); max-width: 60rem; min-width: 30rem; margin: auto; background-color: #1f262b; } table{ position: relative; margin: auto; width: calc(100% - 50px); max-width: 600px; background-color: #1f262b; box-shadow: 3px 3px 10px #333; border: 2px solid #fff; border-collapse: separate; border-spacing: 2px; border-radius: 10px; color: #fff; font-size: 15pt; font-family:"Roboto", regular, sans-serif; } tr{ margin: auto; border: 1px solid #fff; } th{ margin: auto; border: 0px solid #aaa; background-color: #546E7A; padding: 20px; border-radius: 8px; } td{ margin: auto; border: 0px solid #aaa; background-color: #37474F ; padding: 10px; border-radius: 8px; } td.left,th.left{ border-radius: 8px 0px 0px 8px; } td.right,th.right{ border-radius: 0px 8px 8px 0px; } td.mid,th.mid{ border-radius: 0px 0px 0px 0px; } div.input-box { position: absolute; left: calc(50% - 14rem); top: calc(50% - 100px); width: 28rem; height: 14rem; background-color: #14181b00; border-radius: 8px; border: 0px solid #fff; } div.input-field { position: relative; left: 0px; top: 0px; margin-left: 5%; margin-top: 20px; width: 90%; height: 2.5rem; background-color: #14181b; border-radius: 0.6rem; border: 1px solid #fff; } .input { position: absolute; left: 1rem; top: 50%; margin-top: -15px; width: calc(100% - 2rem); height: 2rem; text-align: center; color:#fff; font-size: 15pt; font-family:Arial, "lucida console", sans-serif; border: 0px solid #fff; background-color: transparent; outline: 0 none; } input[id="longurl-input"]::-webkit-input-placeholder { color: #ffffff; } .btn-blue{ cursor: pointer; height: 2.5rem; background-color: #00BCD4; box-shadow: 3px 3px 10px #333; border-radius: 1.25rem; } .btn-green{ cursor: pointer; height: 2.5rem; background-color: #009688; box-shadow: 3px 3px 10px #333; border-radius: 1.25rem; } .btn-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 15pt; color:#fff; font-family:Arial, "lucida console", sans-serif; } .sym_btn-red{ cursor: pointer; height: 2.5rem; width: 2.5rem; background-color: #E53935; border-radius: 1.25rem; box-shadow: 3px 3px 10px #333; float: left; } .sym_btn-blue{ cursor: pointer; height: 2.5rem; width: 2.5rem; background-color: #1E88E5; border-radius: 1.25rem; box-shadow: 3px 3px 10px #333; float: left; } .sym_btn-invisible{ cursor: pointer; height: 2.5rem; width: 2.5rem; border-radius: 1.25rem; float: left; } img.icon { margin-top: 8px; margin-left: 8px; } .title { text-align: center; width: 100%; color:#fff; font-size: 30pt; font-family:"Roboto", bold, sans-serif; } .title2 { margin-top: 20px; text-align: center; width: 100%; color:#fff; font-size: 20pt; font-family:"Roboto", bold, sans-serif; } .box-dark{ position: relative; margin: auto; width: calc(100% - 50px); max-width: 600px; background-color: #1f262b; box-shadow: 3px 3px 10px #333; border: 2px solid #fff; border-radius: 10px; color: #fff; font-size: 15pt; font-family:"Roboto", regular, sans-serif; } .error{ position: absolute; bottom: 1rem; left: 1rem; height: 10rem; width: 16rem; background-color: #E53935; border-radius: 15px; } #short-btn { position: absolute; width: 10rem; margin-left: calc(50% - 5rem); margin-top: 20px; } #copy-btn { position: absolute; width: 10rem; margin-left: calc(50% - 5rem); margin-top: 1rem; } #surl-popup{ position: fixed; width: 30rem; height: 14rem; left: calc(50% - 15rem); top: calc(50% - 7rem); display: none; animation: slide-from-top alternate 0.4s; } #error-box{ display: none; } @keyframes slide-from-top{ from{top:20%;opacity: 0} to{top:calc(50% - 7rem);opacity: 1} } @keyframes slide-from-left{ from{left:-30rem;opacity: 0} to{left:1rem;opacity: 1} }