/* src/css/embed_ex7.css */
@font-face {
  font-family: "Cantarell";
  src: url(../fonts/cantarell-regular.woff2) format("woff2"), url(../fonts/cantarell-regular.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Cantarell";
  src: url(../fonts/cantarell-bold.woff2) format("woff2"), url(../fonts/cantarell-bold.woff) format("woff");
  font-weight: bold;
  font-style: normal;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
}
button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
}
:root {
  --cantarell-ascent: 983;
  --cantarell-descent: 217;
  --cantarell-em: 1000;
  --cantarell-cap: 694;
  --cantarell-content: (var(--cantarell-ascent) + var(--cantarell-descent));
  --cantarell-ratio: (var(--cantarell-content) / var(--cantarell-em));
  --gutter: 2.5vw;
  --rem: 5vw;
}
#episode {
  --width: 100vw;
  --height: 100vw;
  --logo-width: calc(var(--width) / 1.5);
  --logo-height: calc(var(--height) / 1.5);
  position: relative;
  width: var(--width);
  height: var(--height);
  font-family: "Cantarell";
  font-weight: normal;
  overflow: hidden;
}
#fond {
  width: 100%;
}
#ex7 {
  background-color: white;
  position: absolute;
  top: 0px;
  left: 0px;
  width: var(--logo-width);
  height: var(--logo-height);
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 2;
}
#bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: end;
  align-items: center;
  padding: 0 var(--gutter) var(--gutter) var(--gutter);
  z-index: 3;
}
#title {
  --font-size: calc(1.2 * var(--rem));
  --content-height: calc(var(--font-size) * var(--cantarell-ratio));
  --shadow: calc(-0.25 * var(--rem));
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: calc(var(--content-height) * 0.75);
  padding: calc(var(--content-height) * 0.25) calc(var(--content-height) * 0.75) calc(var(--content-height) * 0.25) calc(var(--content-height) * 0.75);
  margin-bottom: calc(0.5 * var(--rem));
  font-weight: bold;
  box-shadow: var(--shadow) var(--shadow) black;
}
#description {
  --font-size: calc(1 * var(--rem));
  --content-height: calc(var(--font-size) * var(--cantarell-ratio));
  width: 100%;
  text-align: center;
  line-height: 1.3;
}
#episode p {
  color: black;
  font-size: var(--font-size);
}
p > span {
  background-color: rgba(255, 255, 255, 0.8);
}
#description span {
  --shadow: calc(-0.125 * var(--rem));
  border-radius: calc(var(--content-height) / 2);
  padding: 0 calc(var(--content-height) / 2) 0 calc(var(--content-height) / 2);
  box-shadow: var(--shadow) var(--shadow) black;
}
#play_container {
  --size: 18.75vw;
  --border-width: calc(var(--size) / 10);
  --progress-color: rgba(239, 43, 42, 0.66);
  --progress: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}
#play {
  position: relative;
  aspect-ratio: 1 / 1;
  display: block;
  height: var(--size);
  border: var(--border-width) solid;
  border-radius: calc(var(--size) / 2);
  background-repeat: no-repeat;
  background-size: 66%, 100%;
  background-position: center;
  background-color: var(--bg-color);
  box-shadow:
    var(--bg-color) calc(-1 * var(--border-width) / 4) calc(-1 * var(--border-width) / 4),
    var(--bg-color) calc(var(--border-width) / 4) calc(-1 * var(--border-width) / 4),
    var(--bg-color) calc(var(--border-width) / 4) calc(var(--border-width) / 4),
    var(--bg-color) calc(-1 * var(--border-width) / 4) calc(var(--border-width) / 4);
  z-index: 4;
}
#play.White {
  --bg-color: rgba(0, 0, 0, 0.66);
  border-color: white;
  background-color: rgba(0, 0, 0, 0.66);
  background-image: url(../svg/play-circle.svg), conic-gradient(var(--progress-color) 0turn calc(var(--progress) * 1turn), transparent calc(var(--progress) * 1turn));
}
#play.Black {
  --bg-color: rgba(255, 255, 255, 0.33);
  border-color: black;
  background-image: url(../svg/play-circle-black.svg), conic-gradient(var(--progress-color) 0turn calc(var(--progress) * 1turn), transparent calc(var(--progress) * 1turn));
}
#play.White.Playing {
  background-image: url(../svg/pause-circle.svg), conic-gradient(var(--progress-color) 0turn calc(var(--progress) * 1turn), transparent calc(var(--progress) * 1turn));
}
#play.Black.Playing {
  background-image: url(../svg/pause-circle-black.svg), conic-gradient(var(--progress-color) 0turn calc(var(--progress) * 1turn), transparent calc(var(--progress) * 1turn));
}
#scrub {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  aspect-ratio: 1 / 1;
  display: block;
  height: var(--size);
  background-color: transparent;
}
/*# sourceMappingURL=embed_ex7.css.map */