:root {
  --opacity-var-1: 0.3;
  --opacity-var-2: 0.48;
  --opacity-var-3: 0.65;
  --opacity-var-4: 0.83;
  --opacity-var-5: 1;
  --scale-var-1: 100%;
  --scale-var-2: 105%;
  --scale-var-3: 110%;
  --scale-var-4: 115%;
  --scale-var-5: 120%;
}

@font-face {
  font-family: "Lexend_Deca";
  src: URL("assets/Lexend_Deca/static/LexendDeca-Regular.ttf")
    format("truetype");
}
@font-face {
  font-family: "Lexend_Deca-SemiBold";
  src: URL("assets/Lexend_Deca/static/LexendDeca-SemiBold.ttf")
    format("truetype");
}
@font-face {
  font-family: "Lexend_Deca-Bold";
  src: URL("assets/Lexend_Deca/static/LexendDeca-Bold.ttf") format("truetype");
}
body {
  margin: 0;
  font-family: "Lexend_Deca";
}

.footer-text a {
  color: #ff5c35;
}

/* TOP ITEMS */

.top-box {
  background-color: #ff5c35;
  /* height: 1255px; */
}

.top-container {
  margin: 0 5% 0 5%;
}

.logo-container {
  text-align: right;
  padding: 50px 30px 0 0;
}
#hubspot-logo {
  width: 180px;
}

.main-title-container {
  font-size: 72px;
  font-weight: bold;
  margin: -70px 0 80px 0;
}
#main-title-1 {
  display: inline-block;
  color: #ffb84a;
  margin: 0 0 0 20px;
}
#main-title-2 {
  display: inline-block;
  color: #ffffff;
  margin: 0 0 0 0px;
}

/* .metrics-row-1 {
  margin: 0 0 50px 0;
}

.metrics-row-2 {
  margin: 0 0 0 0px;
} */

.intro-box-container {
  /* display: inline-block;
  position: relative;
  vertical-align: top;
  width: 393px;
  height: 361px; */
  margin: 0 0px 0 20px;
}

.intro-box {
  /* max-width: 381px; */
  /* max-height: 349px; */
  /* display: inline-block;
  position: relative;
  vertical-align: top;
  width: 333px;
  height: 360px; */
  font-family: "Lexend_Deca-Bold";
  /* font-size: 48px; */
  font-size: 48px;
  /* padding: 0 120px 0 0; */
  /* line-height: 1.3em; */
}

/* .metric-container {
  position: relative;
} */

.metric-box {
  display: inline-block;
  position: relative;
  vertical-align: top;
  /* max-width: 381px; */
  margin: 0 20px 30px 20px;
  /* max-height: 349px; */
  /* width: 100%; */
  max-width: 381px;
  min-width: 90%;
  /* height: 95%; */
  /* margin: 0 20px 0 20px; */
  background-color: #d04325;
  border-radius: 20px;
  border: 6px solid #d04325;
}

/* .metric-box:last-child {
  margin-right: 0;
} */

/* .metrics-row-2 .metric-box:first-child {
  margin-left: 0px;
} */

.highlight {
  border: 6px solid #ebd133;
}

.lightbulb-box {
  position: absolute;
  top: 30%;
  left: 50%;
  height: 70%;
  margin: 0 0 70px 0;
  transform: translate(-50%, -50%);
}

.bulb {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  transform: translate(-50%, -50%);
}

.light {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  transform: translate(-50%, -50%);
  /* animation: flicker-gentle 2s linear reverse infinite; */
  /* animation: flicker 2s linear reverse infinite; */

  /* animation: flicker-single 5s linear reverse infinite; */
  filter: brightness(0) saturate(100%) invert(79%) sepia(46%) saturate(654%)
    hue-rotate(3deg) brightness(96%) contrast(98%);

  /* filter: brightness(0) saturate(100%) invert(92%) sepia(7%) saturate(2170%)
    hue-rotate(358deg) brightness(103%) contrast(91%); */
  /* filter: brightness(0) saturate(100%) invert(82%) sepia(96%) saturate(436%)
    hue-rotate(1deg) brightness(91%) contrast(111%); */
  /* filter: brightness(0) saturate(100%)   invert(84%) sepia(60%) saturate(226%) hue-rotate(2deg) brightness(96%) contrast(100%); */
}

.light-1 {
  animation-delay: 0s !important;
  animation: flicker-1 5s linear reverse infinite;
  opacity: var(--opacity-var-1);
  transform: translate(-50%, -50%) scale(var(--scale-var-1));
}
.light-2 {
  animation-delay: 4s !important;
  animation: flicker-4 5s linear reverse infinite;
  opacity: var(--opacity-var-4);
  transform: translate(-50%, -50%) scale(var(--scale-var-4));
}
.light-3 {
  animation-delay: 3.5s !important;
  animation: flicker-5 5s linear reverse infinite;
  opacity: var(--opacity-var-5);
  transform: translate(-50%, -50%) scale(var(--scale-var-5));
}
.light-4 {
  animation-delay: 2s !important;
  animation: flicker-3 5s linear reverse infinite;
  opacity: var(--opacity-var-3);
  transform: translate(-50%, -50%) scale(var(--scale-var-3));
}
.light-5 {
  animation-delay: 1.5s !important;
  animation: flicker-2 5s linear reverse infinite;
  opacity: var(--opacity-var-2);
  transform: translate(-50%, -50%) scale(var(--scale-var-2));
}
.light-6 {
  animation-delay: 0.5s !important;
  animation: flicker-1 5s linear reverse infinite;
  opacity: var(--opacity-var-1);
  transform: translate(-50%, -50%) scale(var(--scale-var-1));
}
.light-7 {
  animation-delay: 2.5s !important;
  animation: flicker-3 5s linear reverse infinite;
  opacity: var(--opacity-var-3);
  transform: translate(-50%, -50%) scale(var(--scale-var-3));
}

.metric-title {
  color: white;
  font-size: 32px;
  font-family: "Lexend_Deca-SemiBold";
  text-align: center;
  line-height: 1.3em;
  margin: 260px 0 0 0;
}

.metric-value {
  color: #192732;
  font-family: "Lexend_Deca-Bold";
  font-size: 21px;
  text-align: center;
  padding: 0 0 10px 0;
}

/* Flicker effect */
/* @keyframes flicker-gentle {
  0% {
    opacity: 0.7;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
  }
} */

/* @keyframes flicker {
  0%,
  19.999%,
  22%,
  62.999%,
  64%,
  64.999%,
  70%,
  100% {
    opacity: 0.99;
  }
  20%,
  21.999%,
  63%,
  63.999%,
  65%,
  69.999% {
    opacity: 0.4;
  }
} */

@keyframes flicker-1 {
  0%,
  19.999%,
  22%,
  62.999%,
  64%,
  64.999%,
  70% {
    opacity: calc(0.99 * var(--opacity-var-1));
  }
  20%,
  21.999%,
  63%,
  63.999%,
  65%,
  69.999% {
    opacity: calc(0.4 * var(--opacity-var-1));
  }
}
@keyframes flicker-2 {
  0%,
  19.999%,
  22%,
  62.999%,
  64%,
  64.999%,
  70% {
    opacity: calc(0.99 * var(--opacity-var-2));
  }
  20%,
  21.999%,
  63%,
  63.999%,
  65%,
  69.999% {
    opacity: calc(0.4 * var(--opacity-var-2));
  }
}
@keyframes flicker-3 {
  0%,
  19.999%,
  22%,
  62.999%,
  64%,
  64.999%,
  70% {
    opacity: calc(0.99 * var(--opacity-var-3));
  }
  20%,
  21.999%,
  63%,
  63.999%,
  65%,
  69.999% {
    opacity: calc(0.4 * var(--opacity-var-3));
  }
}
@keyframes flicker-4 {
  0%,
  19.999%,
  22%,
  62.999%,
  64%,
  64.999%,
  70% {
    opacity: calc(0.99 * var(--opacity-var-4));
  }
  20%,
  21.999%,
  63%,
  63.999%,
  65%,
  69.999% {
    opacity: calc(0.4 * var(--opacity-var-4));
  }
}
@keyframes flicker-5 {
  0%,
  19.999%,
  22%,
  62.999%,
  64%,
  64.999%,
  70% {
    opacity: calc(0.99 * var(--opacity-var-5));
  }
  20%,
  21.999%,
  63%,
  63.999%,
  65%,
  69.999% {
    opacity: calc(0.4 * var(--opacity-var-5));
  }
}
@keyframes flicker-single {
  0%,
  19.999%,
  22%,
  62.999%,
  64%,
  64.999%,
  70% {
    opacity: 0.99;
  }
  20%,
  21.999%,
  63%,
  63.999%,
  65%,
  69.999% {
    opacity: 0.4;
  }
}

/* DAILY RESULTS */

.hidden {
  display: none;
}

.results-box {
  background-color: #192732;
  overflow: hidden;
}

.results-container {
  margin: 0 5% 0 5%;
  /* padding: 100px 30px 0 80px; */
}

.results-title {
  margin: 60px 0 30px 0;
  color: #ffffff;
  font-family: "Lexend_Deca-Bold";
  font-size: 57px;
}

.day-container {
  /* padding: 70px 30px 70px 30px; */
  border-bottom: 1px solid #507091;
  background-color: #192732;
  padding: 0 0 50px 0;
  margin: 0 0 40px 0;
  /* overflow: hidden;
  display: flex; */
  align-items: center;
}

.day-container:last-child {
  border-bottom: none;
  /* padding: 70px 30px 110px 30px; */
}

.line-break {
  width: 100%;
}

/* .day-number-container {
  flex: 1;
  max-width: 300px;
  display: flex;
  align-items: center;
} */

.day {
  /* width: 200px; */
  /* margin-left: 70px; */
  color: #ffffff;
  font-family: "Lexend_Deca-Bold";
  font-size: 40px;
  padding: 0 0 0 30px;
  margin: 0 0 30px 0;
}

.day-image-container {
  /* flex: 1; */
  /* max-width: 550px; */
}

.day-image {
  /* width: 467px; */
  width: 100%;
  padding: 0 50px 0 30px;
  margin: 0 0 30px 0;
}

/* .day-text-container {
  flex: 1;
  flex-wrap: wrap;
  max-width: 1000px;
  display: flex;
} */

.day-text-title {
  /* display: flex; */
  font-family: "Lexend_Deca-Bold";
  font-size: 40px;
  padding: 0 0 0 30px;
  /* margin-top: 50px; */
}

.day-1 .day-text-title {
  color: #ffe4c2;
}
.day-2 .day-text-title {
  color: #c8ccf0;
}
.day-3 .day-text-title {
  color: #e6b4d8;
}
.day-4 .day-text-title {
  color: #b2e9e8;
}
.day-5 .day-text-title {
  color: #fac9be;
}

.day-text-department {
  /* display: flex; */
  color: #ffffff;
  font-family: "Lexend_Deca-Bold";
  font-size: 40px;
  align-self: flex-start;
  padding: 0 0 0 30px;
  /* margin-top: -70px; */
}

.song {
  font-size: 32px;
}

/* FOOTER ITEMS */

.footer-box {
  background-color: #223243;
}

.footer-container {
  padding: 40px 0px 80px 0px;
  /* display: flex; */
  align-items: center;
  overflow: hidden;
}

/* .footer-image-container {
  flex: 1;
  display: flex;
  align-items: center;
  max-width: 200px;
} */

.footer-image {
  width: 100%;
  max-width: 200px;
}

/* .footer-text-container {
  margin: 0 0 0 90px;
  max-width: 1125px;
  flex: 1;
  display: flex;
  align-items: center;
} */

.footer-text {
  color: white;
  font-size: 36px;
  font-family: "Lexend_Deca-SemiBold";
  padding: 0 50px 0 30px;
}

@media screen and (max-width: 1920px) {
  .main-title-container {
    margin-bottom: 50px;
    line-height: 1.1em;
  }
  .intro-box-container {
    margin-bottom: 30px;
  }
  .metric-box-container {
    margin-bottom: 20px;
  }
  .intro-box {
    font-size: 36px;
  }
  #main-title-2 {
    margin: 0 0 0 0px;
  }
}

@media screen and (max-width: 1420px) {
  #main-title-2 {
    margin: 0 0 0 0px;
  }
  .intro-box {
    font-size: 36px;
  }
  .footer-text {
    font-size: 30px;
    padding: 20px 30px 0 50px;
  }
}

@media screen and (max-width: 1350px) {
  .main-title-container {
    margin-top: 0px;
  }
}

@media screen and (max-width: 1200px) {
  .intro-box {
    font-size: 32px;
  }
}

@media screen and (max-width: 1052px) {
  #main-title-2 {
    margin: 0 0 0 20px;
  }
}

@media screen and (max-width: 500px) {
  .logo-container {
    padding: 10px 20px 20px 0;
  }
  #hubspot-logo {
    width: 120px;
    margin: 10px 0 0 0;
  }
  .main-title-container {
    font-size: 36px;
    margin-bottom: 20px;
  }
  .intro-box {
    font-size: 30px;
    padding: 0;
    margin: 0 20px 0 0;
  }
}
@media screen and (max-width: 450px) {
  .results-title {
    font-size: 40px;
  }
  .day-text-title {
    font-size: 20px;
  }
  .day-text-department {
    font-size: 20px;
  }
}