/*
* Legal Disclaimer for Web licence
*
* Licence to use self-hosted webfonts for displaying dynamic text on specified website domains. Our package includes WOFF and WOFF2 font formats.
*
* Should the license page views limit be exceeded the license holder will be required to contact Lineto.com for an upgrade.
*
* It is strictly prohibited to rename the font and to download or use these fonts in any other media.
*
* These Web fonts are licensed exclusively for the use on the following domain(s) and their subdomains:
*
* bronze.ai (monthly pageviews: <50K)
*
*/

/* Unica77LLWeb */

@font-face {
  font-display: swap;
  font-family: "Unica77LL";
  /* -Web-ThinRegular */
  font-weight: 100;
  /* Thin */
  font-style: normal;
  /* Regular */
  src: url("/fonts/Unica77LLWeb-Thin.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LL";
  /* -Web-ThinItalic */
  font-weight: 100;
  /* Thin */
  font-style: italic;
  /* Italic */
  src: url("/fonts/Unica77LLWeb-ThinItalic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LL";
  /* -Web-LightRegular */
  font-weight: 300;
  /* Light */
  font-style: normal;
  /* Regular */
  src: url("/fonts/Unica77LLWeb-Light.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LL";
  /* -Web-LightItalic */
  font-weight: 300;
  /* Light */
  font-style: italic;
  /* Italic */
  src: url("/fonts/Unica77LLWeb-LightItalic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LL";
  /* -Web-RegularRegular */
  font-weight: 400;
  /* Regular */
  font-style: normal;
  /* Regular */
  src: url("/fonts/Unica77LLWeb-Regular.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LL";
  /* -Web-RegularItalic */
  font-weight: 400;
  /* Regular */
  font-style: italic;
  /* Italic */
  src: url("/fonts/Unica77LLWeb-RegularItalic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LL";
  /* -Web-MediumRegular */
  font-weight: 500;
  /* Medium */
  font-style: normal;
  /* Regular */
  src: url("/fonts/Unica77LLWeb-Medium.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LL";
  /* -Web-MediumItalic */
  font-weight: 500;
  /* Medium */
  font-style: italic;
  /* Italic */
  src: url("/fonts/Unica77LLWeb-MediumItalic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LL";
  /* -Web-BoldRegular */
  font-weight: 700;
  /* Bold */
  font-style: normal;
  /* Regular */
  src: url("/fonts/Unica77LLWeb-Bold.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LL";
  /* -Web-BoldItalic */
  font-weight: 700;
  /* Bold */
  font-style: italic;
  /* Italic */
  src: url("/fonts/Unica77LLWeb-BoldItalic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LL";
  /* -Web-BlackRegular */
  font-weight: 800;
  /* Black */
  font-style: normal;
  /* Regular */
  src: url("/fonts/Unica77LLWeb-Black.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LL";
  /* -Web-BlackItalic */
  font-weight: 800;
  /* Black */
  font-style: italic;
  /* Italic */
  src: url("/fonts/Unica77LLWeb-BlackItalic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LL";
  /* -Web-ExtraBlackRegular */
  font-weight: 900;
  /* ExtraBlack */
  font-style: normal;
  /* Regular */
  src: url("/fonts/Unica77LLWeb-ExtraBlack.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LL";
  /* -Web-ExtraBlackItalic */
  font-weight: 900;
  /* ExtraBlack */
  font-style: italic;
  /* Italic */
  src: url("/fonts/Unica77LLWeb-ExtraBlackItalic.woff2") format("woff2");
}

/* Unica77LLSubSub */

@font-face {
  font-display: swap;
  font-family: "Unica77LLSub";
  /* -Sub-ThinRegular */
  font-weight: 100;
  /* Thin */
  font-style: normal;
  /* Regular */
  src: url("/fonts/Unica77LLSub-Thin.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LLSub";
  /* -Sub-ThinItalic */
  font-weight: 100;
  /* Thin */
  font-style: italic;
  /* Italic */
  src: url("/fonts/Unica77LLSub-ThinItalic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LLSub";
  /* -Sub-LightRegular */
  font-weight: 300;
  /* Light */
  font-style: normal;
  /* Regular */
  src: url("/fonts/Unica77LLSub-Light.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LLSub";
  /* -Sub-LightItalic */
  font-weight: 300;
  /* Light */
  font-style: italic;
  /* Italic */
  src: url("/fonts/Unica77LLSub-LightItalic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LLSub";
  /* -Sub-RegularRegular */
  font-weight: 400;
  /* Regular */
  font-style: normal;
  /* Regular */
  src: url("/fonts/Unica77LLSub-Regular.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LLSub";
  /* -Sub-RegularItalic */
  font-weight: 400;
  /* Regular */
  font-style: italic;
  /* Italic */
  src: url("/fonts/Unica77LLSub-RegularItalic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LLSub";
  /* -Sub-MediumRegular */
  font-weight: 500;
  /* Medium */
  font-style: normal;
  /* Regular */
  src: url("/fonts/Unica77LLSub-Medium.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LLSub";
  /* -Sub-MediumItalic */
  font-weight: 500;
  /* Medium */
  font-style: italic;
  /* Italic */
  src: url("/fonts/Unica77LLSub-MediumItalic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LLSub";
  /* -Sub-BoldRegular */
  font-weight: 700;
  /* Bold */
  font-style: normal;
  /* Regular */
  src: url("/fonts/Unica77LLSub-Bold.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LLSub";
  /* -Sub-BoldItalic */
  font-weight: 700;
  /* Bold */
  font-style: italic;
  /* Italic */
  src: url("/fonts/Unica77LLSub-BoldItalic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LLSub";
  /* -Sub-BlackRegular */
  font-weight: 800;
  /* Black */
  font-style: normal;
  /* Regular */
  src: url("/fonts/Unica77LLSub-Black.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LLSub";
  /* -Sub-BlackItalic */
  font-weight: 800;
  /* Black */
  font-style: italic;
  /* Italic */
  src: url("/fonts/Unica77LLSub-BlackItalic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LLSub";
  /* -Sub-ExtraBlackRegular */
  font-weight: 900;
  /* ExtraBlack */
  font-style: normal;
  /* Regular */
  src: url("/fonts/Unica77LLSub-ExtraBlack.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Unica77LLSub";
  /* -Sub-ExtraBlackItalic */
  font-weight: 900;
  /* ExtraBlack */
  font-style: italic;
  /* Italic */
  src: url("/fonts/Unica77LLSub-ExtraBlackItalic.woff2") format("woff2");
}

html {
  --diameter-px: min(60vw, 90vh);
  background-color: rgb(234, 234, 234);
}

html,
body {
  font-family: Unica77LL, Open-Sans, Helvetica, sans-serif;
  color: black;
  font-size: 15.5px;
  line-height: 19px;
  overflow: hidden;
}

dd {
  margin: 0px;
  padding: 0px;
}

dt {
  margin: 1rem 0px 0px;
  padding: 0px;
  text-transform: uppercase;
}

input,
button {
  all: unset;
  cursor: pointer;
  display: inline;
}

button:hover {
  border-bottom: 1px solid black;
}

a {
  color: black;
  text-transform: uppercase;
}

a,
a:link,
a:visited {
  text-decoration: none;
}

a:hover,
a:active {
  border-bottom: 1px solid black;
}

.firstCol {
  width: calc(212px - 24px);
}

.outer {
  padding: 24px;
}

.player {
  text-transform: uppercase;
  display: inline-block;
  margin-right: 18px;
}

.progressContainer {
  width: 99vw;
  height: 99vh;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.progress {
  border-radius: 100%;
  width: var(--diameter-px);
  height: var(--diameter-px);
  position: absolute;
  top: 24px;
  left: 20vw;
}

.progress.circle {
  border: 1px solid black;
}

.progress .centered {
  top: calc(var(--diameter-px) * -1);
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--diameter-px);
  height: var(--diameter-px);
}

.playhead {
  width: 15.45px;
  height: 15.45px;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  transform: translateX(calc(var(--diameter-px) - 7.725px)) rotate(45deg);
  left: -1px;
  top: 50%;
  position: relative;
  pointer-events: none;
  z-index: 100;
}

@media (max-width: 620px) {
  .progress {
    top: 15vh;
  }
}

/* mozilla being stubborn with vh here
 */
@-moz-document url-prefix() {
  @media (max-width: 620px) {
    .progress {
      top: 20vh;
    }
  }
}

/* CSS specific to iOS devices */
@supports (-webkit-touch-callout: none) {
  .progress {
    top: 30vh;
  }
}