body {
  background: transparent;
  color: white;
  font-family: sans-serif;
  display: flex;
  gap: 20px;
  justify-content: center;
  padding-top: 90px;

  --border-size: 7px;
  --blue-color: #1F51FF;
}
.timer-wrapper::before,
.timer-wrapper::after {
  content: '';
  z-index: -1;
  position: absolute;
  width: calc(100% + var(--border-size) * 2);
  height: calc(100% + var(--border-size) * 2);
  top: calc(var(--border-size) * -1);
  left: calc(var(--border-size) * -1);
  background: radial-gradient(white, var(--blue-color));
  border-radius: 15px;
  background-size: 300%;
  animation: border 15s linear infinite;
}

.timer-wrapper::after {
  filter: blur(50px);
}

@keyframes border {
  0%, 100% {
    background-position: 0 0;
  }
  50% {
    background-position: 300%;
  }
}

.timer-wrapper {
  color: #F4B713;
  background-color: #18181b;
  border-radius: 10px;
  padding: 10px;
  position: relative;
  display: flex;
  gap: 40px;
  width: 650px;
  min-height: 105px;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}

.timer-wrapper .svg-img {
  min-height: 85px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.timer-wrapper .svg-img.-voice-svg {
  min-width: 85px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiIGZpbGw9IndoaXRlIj4KICAgICAgICAgIDxwYXRoIGQ9Ik05LDJDOC40NSwyLDgsMi40NSw4LDNjMCw1LjY3LDAsMTEuMzMsMCwxN2MwLDEuMTEsMC44OSwyLDIsMmg1YzEuMTEsMCwyLTAuODksMi0yVjljMC0xLjExLTAuODktMi0yLTJoLTVWMyAgQzEwLDIuNDUsOS41NSwyLDksMiBNMTAsOWg1djRoLTVWOXoiPjwvcGF0aD4KICAgICAgICAgIDxyZWN0IGZpbGw9Im5vbmUiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PC9yZWN0PgogICAgICA8L3N2Zz4=);
}
.timer-wrapper .svg-img.-cuss-svg {
  min-width: 85px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZSIgd2lkdGg9IjgwMHB4IiBoZWlnaHQ9IjgwMHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICAgIDxnIGlkPSJzd2VhciI+CiAgICAgICAgPHBhdGggZD0iTTUuMjg2MSwxOS44MTg0QTEsMSwwLDEsMCw2LjcsMTguNDA0M2wtLjc2Ny0uNzY3MUw2LjcsMTYuODdhMSwxLDAsMCwwLTEuNDE0MS0xLjQxNGwtLjc2NjguNzY2OS0uNzY2OS0uNzY2OWExLDEsMCwxLDAtMS40MTQsMS40MTRsLjc2NjkuNzY3MS0uNzY2OS43NjcxYTEsMSwwLDEsMCwxLjQxNCwxLjQxNDFsLjc2NjktLjc2N1oiPjwvcGF0aD4KICAgICAgICA8cGF0aCBkPSJNNTUsMTRhMywzLDAsMSwwLDMsM0EzLjAwMzMsMy4wMDMzLDAsMCwwLDU1LDE0Wm0wLDRhMSwxLDAsMSwxLDEtMUExLjAwMDksMS4wMDA5LDAsMCwxLDU1LDE4WiI+PC9wYXRoPgogICAgICAgIDxjaXJjbGUgY3g9IjQ1IiBjeT0iMTAiIHI9IjEiPjwvY2lyY2xlPgogICAgICAgIDxwYXRoIGQ9Ik0yNC4yNDksMTYuNTk4NmExOS4yMTYxLDE5LjIxNjEsMCwwLDEsMTAuMTY0Ni4xODM2LDEsMSwwLDAsMCwuNTY4My0xLjkxNzksMjEuMjUwNywyMS4yNTA3LDAsMCwwLTExLjIzMDktLjIwMzIsMSwxLDAsMCwwLC40OTgsMS45Mzc1WiI+PC9wYXRoPgogICAgICAgIDxjaXJjbGUgY3g9IjM2IiBjeT0iMzIiIHI9IjIiPjwvY2lyY2xlPgogICAgICAgIDxjaXJjbGUgY3g9IjIyIiBjeT0iMzIiIHI9IjIiPjwvY2lyY2xlPgogICAgICAgIDxwYXRoIGQ9Ik0yNC41NTM3LDI5Ljc4MzJhLjk3NzkuOTc3OSwwLDAsMCwuMTE5Mi4wMDY4LDEsMSwwLDAsMCwuMTE2Mi0xLjk5MzFjLS4wMzU3LS4wMDM5LTMuNTU3Mi0uNDczNy00LjQ2LTIuNDgxNWExLDEsMCwwLDAtMS44MjQyLjgyQzE5Ljg4MTMsMjkuMTk3MywyNC4zNjM4LDI5Ljc2MDcsMjQuNTUzNywyOS43ODMyWiI+PC9wYXRoPgogICAgICAgIDxwYXRoIGQ9Ik0zMi40MjQ4LDI4LjkwOTJhLjk5OTQuOTk5NCwwLDAsMCwuOTkxMi44ODA4Ljk3NTQuOTc1NCwwLDAsMCwuMTE4Ny0uMDA2OGMuMTktLjAyMjUsNC42NzI4LS41ODU5LDYuMDQ4OC0zLjY0NzVhMSwxLDAsMCwwLTEuODI0Mi0uODJjLS43NTU5LDEuNjgxNy0zLjQ3NzEsMi4zNjE0LTQuNDYxNCwyLjQ4MTVBMS4wMDE2LDEuMDAxNiwwLDAsMCwzMi40MjQ4LDI4LjkwOTJaIj48L3BhdGg+CiAgICAgICAgPHBvbHlnb24gcG9pbnRzPSIxNC4zNzMgNDYgMTYuMTk4IDQ2IDE2LjYyNyA0NSAxNC44MDIgNDUgMTQuMzczIDQ2Ij48L3BvbHlnb24+CiAgICAgICAgPHBhdGggZD0iTTI5LDExQTI0LjAwNSwyNC4wMDUsMCwwLDAsNS40NDA5LDM5LjU4NDcsNC40NDMzLDQuNDQzMywwLDAsMCw1LDQxLjQ5MjJ2OC4wMTU2QTQuNDk3NSw0LjQ5NzUsMCwwLDAsOS40OTIyLDU0aDQuODYxNGMuMDE0NC4wMTI1LjAyMTIuMDMuMDM2NS4wNDJhMjQuMDA0NywyNC4wMDQ3LDAsMCwwLDI5LjIyLDBjLjAxNTMtLjAxMTcuMDIyMS0uMDI5NS4wMzY1LS4wNDJoMy44NjE0QTQuNDk3NSw0LjQ5NzUsMCwwLDAsNTIsNDkuNTA3OFY0MS44NzExQTI0LjAxMzUsMjQuMDEzNSwwLDAsMCwyOSwxMVpNMTYuOTE4OSw0OS4zOTM2QS45OTg0Ljk5ODQsMCwwLDEsMTYsNTBhLjk4NTkuOTg1OSwwLDAsMS0uMzkzNS0uMDgxMSwxLDEsMCwwLDEtLjUyNDktMS4zMTI1bC4yNi0uNjA2NEgxMy41MTYybC0uNTk3MywxLjM5MzZBLjk5ODQuOTk4NCwwLDAsMSwxMiw1MGEuOTg1OS45ODU5LDAsMCwxLS4zOTM1LS4wODExLDEsMSwwLDAsMS0uNTI0OS0xLjMxMjVsLjI2LS42MDY0SDExYTEsMSwwLDAsMSwwLTJoMS4xOTgxbC40Mjg1LTFIMTJhMSwxLDAsMCwxLDAtMmgxLjQ4MzhsLjU5NzMtMS4zOTM2YTEsMSwwLDEsMSwxLjgzNzguNzg3MmwtLjI2LjYwNjRoMS44MjQ3bC41OTczLTEuMzkzNmExLDEsMCwxLDEsMS44Mzc4Ljc4NzJsLS4yNi42MDY0SDIwYTEsMSwwLDAsMSwwLDJIMTguODAxOWwtLjQyODUsMUgxOWExLDEsMCwwLDEsMCwySDE3LjUxNjJaTTI5LDU3YTIxLjc3MjksMjEuNzcyOSwwLDAsMS0xMS4wNjYyLTNINDAuMDY2M0EyMS43NzM1LDIxLjc3MzUsMCwwLDEsMjksNTdabS4yMzE5LTE0LjY0MDZhMSwxLDAsMSwxLDEuNTM2MiwxLjI4MTJsLTUsNmExLDEsMCwxLDEtMS41MzYyLTEuMjgxMlpNMjUsNDNhMSwxLDAsMSwxLDEsMUExLDEsMCwwLDEsMjUsNDNabTUsNmExLDEsMCwxLDEtMS0xQTEsMSwwLDAsMSwzMCw0OVptNiwwYTEsMSwwLDEsMS0xLDFBMSwxLDAsMCwxLDM2LDQ5Wm0tMS0yVjQxYTEsMSwwLDAsMSwyLDB2NmExLDEsMCwwLDEtMiwwWm0xMS4zMTY0LTEuMDUxOC0xLjc1ODQuNTg2MiwxLjI3NCwxLjkxMDlhMSwxLDAsMSwxLTEuNjY0LDEuMTA5NEw0Myw0Ny44MDI3bC0xLjE2OCwxLjc1MmExLDEsMCwxLDEtMS42NjQtMS4xMDk0bDEuMjc0LTEuOTEwOS0xLjc1ODQtLjU4NjJhMSwxLDAsMSwxLC42MzI4LTEuODk2NEw0Miw0NC42MTNWNDNhMSwxLDAsMCwxLDIsMHYxLjYxM2wxLjY4MzYtLjU2MTJhMSwxLDAsMSwxLC42MzI4LDEuODk2NFptNC40Mi03LjU2NjRBNC40NzE3LDQuNDcxNywwLDAsMCw0Ny41MDc4LDM3SDkuNDkyMmE0LjQ0NSw0LjQ0NSwwLDAsMC0yLjMxNC42NjE5QTIxLjk5MjIsMjEuOTkyMiwwLDEsMSw1MSwzNSwyMi4xOTM2LDIyLjE5MzYsMCwwLDEsNTAuNzM2LDM4LjM4MThaIj48L3BhdGg+CiAgICAgIDwvZz4KICAgIDwvc3ZnPg==);
}
.timer-wrapper .svg-img.-vape-svg {
  min-width: 85px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBVcGxvYWRlZCB0bzogU1ZHIFJlcG8sIHd3dy5zdmdyZXBvLmNvbSwgR2VuZXJhdG9yOiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgLTAuNSAxNyAxNyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBjbGFzcz0ic2ktZ2x5cGggc2ktZ2x5cGgtbm8tc21va2UiPgo8dGl0bGU+MTAxOTwvdGl0bGU+CjxkZWZzPgo8L2RlZnM+CjxnIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjAwMDAwMCwgMC4wMDAwMDApIiBmaWxsPSJ3aGl0ZSI+CjxyZWN0IHg9IjMiIHk9IjgiIHdpZHRoPSIxLjk3MyIgaGVpZ2h0PSIwLjk2NSIgY2xhc3M9InNpLWdseXBoLWZpbGwiPgo8L3JlY3Q+CjxyZWN0IHg9IjYiIHk9IjgiIHdpZHRoPSI1LjkzOCIgaGVpZ2h0PSIwLjkyMyIgY2xhc3M9InNpLWdseXBoLWZpbGwiPgo8L3JlY3Q+CjxwYXRoIGQ9Ik0xMS44MTYsNS45NjMgQzExLjQ1Nyw1LjY5MyAxMS4xMjMsNS42MzEgMTAuNzIyLDUuNTE1IEM5LjgzNyw1LjI1OSA5LjQ0MSw0LjIxNSA5LjQsMy40MDEgQzkuMjgzLDMuOTQ3IDkuMzQsNC40OTkgOS40MTUsNC44NiBDOS41MjUsNS40MDIgOS44MjksNS45MTEgMTAuMzE4LDYuMTg0IEMxMC43Myw2LjQxMSAxMS4yNzYsNi40MyAxMS43MTYsNi42NTYgQzEyLjE0Miw2Ljg3MyAxMi40OTYsNy4xNjUgMTIuNjIzLDcuMzQ4IEMxMi42MjQsNy4zNDggMTIuMzk0LDYuMzk4IDExLjgxNiw1Ljk2MyBMMTEuODE2LDUuOTYzIFoiIGNsYXNzPSJzaS1nbHlwaC1maWxsIj4KPC9wYXRoPgo8cGF0aCBkPSJNNy45OTUsMC4wNjcgQzMuNjAzLDAuMDY3IDAuMDMxLDMuNjMgMC4wMzEsOC4wMTMgQzAuMDMxLDEyLjM5NCAzLjYwMywxNS45NTcgNy45OTUsMTUuOTU3IEMxMi4zODUsMTUuOTU3IDE1Ljk1OCwxMi4zOTQgMTUuOTU4LDguMDEzIEMxNS45NTgsMy42MzEgMTIuMzg1LDAuMDY3IDcuOTk1LDAuMDY3IEw3Ljk5NSwwLjA2NyBaIE0xNS4xMDYsOC4wOSBDMTUuMTA2LDkuNzkzIDE0LjUwNSwxMS4zNTcgMTMuNTA1LDEyLjU4NiBMMy40NjcsMi41MzQgQzQuNjk2LDEuNTQyIDYuMjU1LDAuOTQzIDcuOTU1LDAuOTQzIEMxMS44OTgsMC45NDMgMTUuMTA2LDQuMTQ4IDE1LjEwNiw4LjA5IEwxNS4xMDYsOC4wOSBaIE0wLjk2Nyw3Ljk4NiBDMC45NjcsNi4yNjYgMS41ODIsNC42ODYgMi42MDIsMy40NTggTDEyLjU2MywxMy40NTEgQzExLjMzNywxNC40NjggOS43NjUsMTUuMDc5IDguMDUxLDE1LjA3OSBDNC4xNDQsMTUuMDc5IDAuOTY3LDExLjg5NiAwLjk2Nyw3Ljk4NiBMMC45NjcsNy45ODYgWiIgY2xhc3M9InNpLWdseXBoLWZpbGwiPgo8L3BhdGg+CjwvZz4KPC9nPgo8L3N2Zz4=);
}


.timer-wrapper .text-container {
  height: fit-content;
}

.timer-wrapper .text-label {
  font-size: 30px;
}

.timer-wrapper .text-timer {
  font-size: 52px;
}