*, :after, :before {
  box-sizing: border-box;
}

body {
  background-color: #f7f7f7;
  background-image: url(img/bg.png);
  @supports (background-image: url("img/bg.avif")) {
    background-image: url(img/bg.avif);
  }
  background-position: 0 0;
  background-repeat: repeat;
  color: #333;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  height: 100vh;
  line-height: 20px;
  margin: 0;
  padding-top: 15px;
  text-rendering: optimizelegibility;
  text-shadow: 0 1px hsla(0, 0%, 100%, .5);
}

.grill-wrapper, body {
  background-attachment: fixed;
}

.grill-wrapper {
  --avif-bg: url();
  --png-bg: url();
  background-image: var(--png-bg);
  @supports (background-image: var(--avif-bg)) {
    background-image: var(--avif-bg);
  }
  background-position: 85% 100%;
  background-repeat: no-repeat;
  min-height: 100vh;
}

.container {
  margin: 0 auto;
  max-width: 750px;
}

p {
  margin: 0 0 10px;
}

img, input[type=image] {
  vertical-align: middle;
}

a {
  color: #0078b4;
  text-decoration: none;
  transition: color .25s;
}

a:active, a:focus, a:hover {
  color: #005580;
}

a:focus {
  outline: thin dotted #333;
}

.jumbotron {
  margin: 60px 0;
  text-align: center;
}

.jumbotron h1 {
  color: inherit;
  cursor: default;
  font-family: inherit;
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  margin: 10px 0;
  text-rendering: optimizelegibility;
}

.jumbotron .lead {
  font-size: 21px;
  font-weight: 200;
  line-height: 30px;
  margin-bottom: 20px;
}

.jumbotron .btn {
  background: rgba(202, 230, 190, .75);
  border: 1px solid #b7d1a0;
  border-radius: 4px;
  color: #468847;
  cursor: pointer;
  display: inline-block;
  font-size: 24px;
  padding: 28px 48px;
  text-shadow: 0 1px hsla(0, 0%, 100%, .5);
  transition: background-color .25s, width .5s, height .5s;
}

.jumbotron .btn.drop, .jumbotron .btn:active, .jumbotron .btn:focus, .jumbotron .btn:hover {
  background-color: #bce4aa;
  text-decoration: none;
}

.alert {
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 14px;
  text-shadow: 0 1px hsla(0, 0%, 100%, .5);
}

.alert-error {
  background-color: #f2dede;
  border-color: #eed3d7;
  color: #aa4342;
}

.alert-info {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #167196;
}

span.donate-btns {
  display: block;
  margin: 11px 0 3px;
  text-align: center;
}

a.donate-btn {
  background: #f2f2f2;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  color: #404040;
  display: inline-block;
  height: 26px;
  line-height: 16px;
  margin: 2px 5px;
  padding: 3px 8px 3px 24px;
  transition: all .2s;
}

a.donate-btn:hover {
  background-color: #ccc;
  border: 1px solid #b3b3b3;
  color: #000;
}

.icon {
  display: block;
  float: left;
  height: 16px;
  margin-left: -20px;
  margin-top: 1px;
  width: 16px;
}

.icon-paypal {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="16" height="16"><path style="fill:%23385c8e" d="M14.823 2.791c.65 1.192.435 2.597.179 3.428-1.385 4.524-7.635 4.278-8.539 4.278s-1.113.842-1.113.842l-.675 2.946c-.184 1.034-1.122.982-1.122.982H1.52q-.077 0-.143-.01c-.01.189.017.743.694.743h2.034s.938.053 1.122-.981l.674-2.946s.211-.842 1.114-.842 7.154.246 8.539-4.278c.309-1.011.56-2.869-.731-4.162"/><path style="fill:%23385c8e" d="m4.048 13.642.675-2.946s.21-.841 1.114-.841c.902 0 7.153.245 8.538-4.278C14.882 3.923 15.233 0 8.922 0H4.364s-.948-.044-1.181.963L.204 13.819s-.128.806.687.806h2.035s.938.053 1.122-.982m1.718-7.479.605-2.612s.193-.71.816-.816c.622-.106 1.682.019 1.955.07 1.77.332 1.394 2.007 1.394 2.007-.35 2.586-4.375 2.227-4.375 2.227-.631-.228-.395-.877-.395-.877"/></svg>');
}

.icon-bitcoin {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="16" viewBox="0 -0.01 0.68 0.68" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M.665.323a.323.323 0 1 1-.648 0 .323.323 0 0 1 .649 0M.42.203c.045.015.078.038.071.081Q.482.329.446.336q.048.027.033.086C.46.477.414.481.354.47L.339.529.303.52.318.462.29.455.275.513.24.504.255.445.183.427.201.386l.026.006C.237.394.242.388.243.384l.04-.159C.283.217.281.208.266.204L.24.198.249.16l.072.018L.336.12l.035.009-.014.057.029.007L.4.136l.036.009zM.335.3C.359.306.412.32.421.284S.379.235.354.23L.347.228.329.299l.006.002M.308.415C.337.423.4.439.41.399.42.358.359.344.329.337L.32.335.3.413l.007.002" fill="%23F7931A"/></svg>');
}

.icon-ethereum {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="m7.963 11.98-4.91-2.9L7.962 16l4.913-6.92-4.915 2.9zM8.037 0l-4.91 8.149 4.91 2.903 4.91-2.9z"/></svg>');
}

.icon-kofi {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="16" viewBox="-0.181 0 1.859 1.859" xmlns="http://www.w3.org/2000/svg"><g data-name="Layer 2"><g data-name="Layer 1"><g data-name="Coffee Icon"><path data-name="Coffee Cup" d="M.124.36A.125.125 0 0 1 .248.222H1.25a.125.125 0 0 1 .124.138l-.151 1.388a.125.125 0 0 1-.124.111h-.7a.125.125 0 0 1-.124-.111Z" style="fill:%237b7b7b"/><path d="M1.387.14h-.032V.11a.11.11 0 0 0-.11-.11h-.99a.11.11 0 0 0-.11.11v.03H.11A.11.11 0 0 0 0 .249v.06a.11.11 0 0 0 .11.11h1.277a.11.11 0 0 0 .11-.11v-.06a.11.11 0 0 0-.11-.11" style="fill:%2398c7eb"/><g data-name="Cup Sleeve"><path data-name="Cup Sleeve" d="M.072.861A.11.11 0 0 1 .181.738H1.32a.11.11 0 0 1 .109.123l-.062.5a.11.11 0 0 1-.109.096H.242a.11.11 0 0 1-.109-.096Z" style="fill:%23edaea3"/><path d="m.751 1.271-.026-.026C.629 1.16.566 1.103.566 1.033A.1.1 0 0 1 .668.932a.11.11 0 0 1 .083.039.11.11 0 0 1 .083-.039.1.1 0 0 1 .102.101c0 .07-.063.127-.159.212Z" style="fill:%23ff7878"/></g></g></g></g></svg>');
}

nav {
  padding-bottom: 30px;
}

nav a, nav > ul {
  color: #167196;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

nav > ul > li {
  cursor: default;
  display: inline-block;
  margin: 0;
  padding: 0;
}

nav > ul > li:after {
  content: "|";
  margin: 0 8px;
  opacity: .3;
}

nav > ul > li:last-child:after {
  content: "";
  margin: 0;
}

#upload-filelist {
  list-style-type: none;
  margin: 20px 30px;
  padding: 0;
  text-align: left;
}

.error #upload-filelist {
  color: #891a18;
}

button.upload-clipboard-btn {
  height: 27px;
  margin-left: 8px;
}

button.upload-clipboard-btn img {
  content: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="16" viewBox="0 0 0.48 0.48" xmlns="http://www.w3.org/2000/svg"><path d="M.42.179.419.174V.172L.415.166l-.12-.12L.289.042H.287L.28.04H.2A.06.06 0 0 0 .14.1v.02H.12a.06.06 0 0 0-.06.06v.2a.06.06 0 0 0 .06.06h.16A.06.06 0 0 0 .34.38V.36h.02A.06.06 0 0 0 .42.3zM.3.108.352.16H.32A.02.02 0 0 1 .3.14ZM.3.38A.02.02 0 0 1 .28.4H.12A.02.02 0 0 1 .1.38v-.2A.02.02 0 0 1 .12.16h.16A.02.02 0 0 1 .3.18zM.21.222A.01.01 0 0 0 .22.236h.03a.01.01 0 0 0-.03-.014z"/></svg>');
}

#upload-filelist li {
  color: #0e9f3a;
  line-height: 1.35;
  padding: 2px 0;
}

#upload-filelist li.error {
  color: #891a18;
}

#upload-filelist li i {
  display: block;
  float: left;
  margin-right: 10px;
}

#upload-filelist li.done {
  color: #468847;
}

#upload-filelist li.done i {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M173.9 439.4c-4.7 0-9.4-1.8-13.1-5.3l-137.3-137.3c-7.1-7.1-7.1-18.6 0-25.7 7.1-7.1 18.6-7.1 25.7 0l124.2 124.3 211.1-211.1c7.1-7.1 18.6-7.1 25.7 0 7.1 7.1 7.1 18.6 0 25.7L187 434c-3.5 3.5-8.2 5.3-13.1 5.3z" fill="%23648C41"/></svg>');
}

#upload-filelist li.error i {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M506 386c0 69-56 125-125 125H125c-69 0-125-56-125-125V125c0-69 56-125 125-125h256c69 0 125 56 125 125v261zm-44 0V125c0-45.9-37.1-83-83-83H125c-45.9 0-83 37.1-83 83v261c0 45.9 37.1 83 83 83h256c45.9 0 83-37.1 83-83z" fill="%23b30000"/></svg>');
}

#upload-filelist li.done i {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M173.9 439.4c-4.7 0-9.4-1.8-13.1-5.3l-137.3-137.3c-7.1-7.1-7.1-18.6 0-25.7 7.1-7.1 18.6-7.1 25.7 0l124.2 124.3 211.1-211.1c7.1-7.1 18.6-7.1 25.7 0 7.1 7.1 7.1 18.6 0 25.7L187 434c-3.5 3.5-8.2 5.3-13.1 5.3z" fill="%23648C41"/></svg>');
}

#upload-progress-bar-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .4);
  text-align: center;
}

#upload-progress-bar {
  display: inline-block;
  width: 50%;
  background-color: #5bc0de;
  height: 10px;
  line-height: 0;
  margin-top: 100px;
  text-align: center;
  transition: width 0.2s;
}

#upload-progress-text {
  font-weight: bold;
  font-size: 14px;
}

#upload-progress-bar-container .btn {
  background: rgba(202, 230, 190, .75);
  border: 1px solid #b7d1a0;
  border-radius: 4px;
  color: #468847;
  cursor: pointer;
  font-size: 24px;
  padding: 10px 20px;
  text-shadow: 0 1px hsla(0, 0%, 100%, .5);
  transition: background-color .25s, width .5s, height .5s;
}

#upload-progress-bar-container .btn:active, #upload-progress-bar-container .btn:focus, #upload-progress-bar-container .btn:hover {
  background-color: #bce4aa;
  text-decoration: none;
}

#success-message {
  text-align: center;
}

Let me know if you need anything else!
