html,
body {
  position: relative;
  width: 100%;
  height: 100%;
}

input {
  box-shadow: 15px 28px 25px -18px rgb(0 0 0 / 20%);
  transition: all 235ms ease-in-out 0ms;
}

input:focus,
input:hover {
  transform: translate3d(0, 2px, 0);
  box-shadow: 2px 8px 8px -5px rgb(0 0 0 / 30%);
}

body {
  color: #333;
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
}

h1 {
  margin: 0;
}

.has-text-centered {
  text-align: center;
}

.centered-flex {
  display: flex;
  margin: auto;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}

.col {
  padding-top: 0;
  padding-bottom: 0;
}

progress {
  appearance: none;
}

progress::-webkit-progress-bar {
  background: white;
}

progress::-webkit-progress-value {
  transition: background-color 2s;
}

progress::-moz-progress-bar {
  transition: background-color 2s;
}

.progress.is-success::-webkit-progress-value {
  background-color: #48c78e;
}

.progress.is-success::-moz-progress-bar {
  background-color: #48c78e;
}

.progress.is-warning::-webkit-progress-value {
  background-color: #ffe08a;
}

.progress.is-warning::-moz-progress-bar {
  background-color: #ffe08a;
}

.progress.is-danger::-webkit-progress-value {
  background-color: #f14668;
}

.progress.is-danger::-moz-progress-bar {
  background-color: #f14668;
}