@import url(reset.css);

/* variables */
:root {
  /* colors */
  --primary: #0d0d0d;
  --secondary: #ffffff;
  /* spacing */
  --spacing: 3px;
}

/* Modules */
.main-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.main-content--title {
  font-size: 2.25rem;
  font-weight: bold;
  margin-bottom: calc(var(--spacing) * 12);
}
.main-content--subtitle {
  font-size: 1.25rem;
}
.video-frame {
  width: 100%;
}
.button-unmute {
  cursor: pointer;
  position: absolute;
  display: flex;
  flex-direction: column;
  background-color: rgba(220, 0, 0, 0.7);
  width: 220px;
  border: calc(var(--spacing) * 2) solid var(--secondary);
  border-radius: calc(var(--spacing) * 6);
  padding: calc(var(--spacing) * 9) 0;
}
.button-unmute:hover {
  background-color: rgba(230, 0, 0, 0.8);
}
.button-unmute .button-unmute--title {
  font-weight: bold;
  font-size: 36px;
  margin-bottom: calc(var(--spacing) * 3);
  text-align: center;
  color: var(--secondary);
}
.button-unmute img {
  width: 99px;
  margin: 0 auto;
}
.button-cta-inner {
  height: 100px;
  width: 100%;
}
.button-cta {
  cursor: pointer;
  /* position: absolute; */
  /* bottom: 70px; */
  text-align: center;
  background-color: #0c8e0c;
  color: var(--secondary);
  font-weight: bold;
  font-size: 1.8rem;
  padding: calc(var(--spacing) * 6) calc(var(--spacing) * 9);
  border-radius: calc(var(--spacing) * 3);
}
.button-cta:hover {
  background-color: #0a7a0a;
}
.footer {
  padding-top: calc(var(--spacing) * 15);
  padding-bottom: calc(var(--spacing) * 15);
}
.footer .footer-copyright,
.footer .footer-nav {
  margin-bottom: calc(var(--spacing) * 9);
}