@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap'); body{ background: #111; font-family: "Roboto", sans-serif; text-align: center; } p{ color: #fff; } a{ color:#fff; } .wrapper{ margin-top: 10vh; text-align: -webkit-center; } ul{ color: #848484; list-style-type: none; display: inline-flex; padding: 0; font-size: 11px; } ul li{ padding-right: .2vh; } form{ position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -250px; width: 500px; height: 200px; border: 2px dashed #353535; } form p{ position: absolute; width: 100%; height: 100%; margin-top: -20vh; text-align: center; color: #ffffff; z-index: -1; } form input{ margin: 0; padding: 0; width: 100%; height: 100%; outline: none; opacity: 0; } form button{ margin: 0; color: #fff; background: #2d2d2d; border: none; width: 508px; height: 35px; margin-top: 15px; margin-left: -4px; border-radius: 4px; border-bottom: 4px solid #252525; transition: all .2s ease; outline: none; } form button:hover{ background: #383838; } form button:active{ border:0; } .notification{ width: 25%; padding: 10px; border-radius: 5px; font-size: 12.5px; } .notification.error{ background: #ce3e3e; color: #fff; } .notification.success{ background:#36923b; color: #fff; } .download-area{ position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -250px; width: 500px; height: 200px; } .download-area p{ position: absolute; width: 100%; height: 100%; margin-top: -20vh; text-align: center; color: #ffffff; z-index: -1; } .download-btn{ margin: 0; color: #fff; background: #2d2d2d; border: none; width: 508px; height: 35px; margin-top: 15px; margin-left: -4px; border-radius: 4px; border-bottom: 4px solid #252525; transition: all .2s ease; outline: none; } .download-btn.timer{ color: #fff; background: #2d2d2d; pointer-events: none; } .download-btn:hover{ background: #383838; } .download-btn:active{ border:0; }