@keyframes fadeInOut {
  0% {
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes fadeInOutTwo {
  0% {
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes fadeOut {
  0% {
    opacity: 0; }
  100% {
    opacity: 100; } }

@keyframes expandCircle {
  0% {
    width: 3rem;
    height: 3rem; }
  100% {
    width: 25rem;
    height: 25rem; } }

@keyframes shrinkCircle {
  0% {
    width: 25rem;
    height: 25rem; }
  100% {
    width: 3rem;
    height: 3rem; } }

@keyframes expandCircleSmall {
  0% {
    width: 3rem;
    height: 3rem; }
  100% {
    width: 20rem;
    height: 20rem; } }

@keyframes shrinkCircleSmall {
  0% {
    width: 20rem;
    height: 20rem; }
  100% {
    width: 3rem;
    height: 3rem; } }

.fadeInOut {
  animation: fadeInOut 5s; }

.fadeInOutTwo {
  animation: fadeInOutTwo 5s; }

.fadeOut {
  animation: fadeOut 5s; }

.expand-circle {
  animation: expandCircle 5s; }
  @media (max-width: 18.75em) {
    .expand-circle {
      animation: expandCircleSmall 5s; } }

.shrink-circle {
  animation: shrinkCircle 5s; }
  @media (max-width: 18.75em) {
    .shrink-circle {
      animation: shrinkCircleSmall 5s; } }

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  user-select: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }

html {
  font-size: 62.5%; }

body {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  line-height: 1.6;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; }

.heading-1 {
  font-size: 4rem;
  color: #2196f3;
  text-transform: uppercase;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 900; }

.u-center-text {
  text-align: center !important; }

.u-margin-bottom-big {
  margin-bottom: 8rem !important; }

.u-margin-bottom-medium {
  margin-bottom: 4rem !important; }

.u-margin-bottom-small {
  margin-bottom: 2rem !important; }

.u-margin-bottom-tiny {
  margin-bottom: 1rem !important; }

.u-margin-top-big {
  margin-top: 8rem !important; }

.u-margin-top-huge {
  margin-top: 10rem !important; }

header {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 2rem;
  position: fixed;
  top: 3rem; }

/* start of footer */
footer {
  width: 100%;
  margin-top: auto;
  position: fixed;
  bottom: 3rem;
  padding: 4rem;
  text-align: center;
  font-size: 2rem;
  color: var(--color-text);
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: lightblue; */
  color: #2196f3; }
  @media (max-width: 25em) {
    footer {
      font-size: 1.6rem; } }
  @media (max-width: 18.75em) {
    footer {
      font-size: 1.2rem; } }

footer a {
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700; }

footer img {
  width: 3rem;
  height: auto;
  transition: transform .7s ease-in-out;
  margin-left: 1rem; }
  @media (max-width: 18.75em) {
    footer img {
      width: 2rem; } }

footer img:hover {
  transform: rotate(360deg) scale(1.5); }

/* end of footer */
.main {
  display: flex;
  justify-content: center;
  align-items: center; }

.container {
  width: 65rem;
  height: 45rem;
  background-color: #2196f3;
  border-radius: 1rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; }
  @media (max-width: 50em) {
    .container {
      width: 45rem;
      height: 50rem; } }
  @media (max-width: 31.25em) {
    .container {
      width: 37rem;
      height: 45rem; } }
  @media (max-width: 25em) {
    .container {
      width: 30rem;
      height: 40rem; } }
  @media (max-width: 18.75em) {
    .container {
      width: 23rem;
      height: 35rem; } }

.share {
  position: absolute;
  right: 3rem;
  top: 1.5rem; }
  .share > img {
    width: 3rem; }
  .share:hover {
    cursor: pointer; }

.circle {
  display: flex;
  justify-content: center;
  align-items: center; }
  .circle__white {
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
    background: white;
    position: absolute; }
    .circle__white:hover {
      cursor: pointer; }
    @media (max-width: 18.75em) {
      .circle__white {
        width: 20rem;
        height: 20rem; } }
  .circle__blue {
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
    background-color: #4faaf5;
    box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.1); }
    .circle__blue:hover {
      cursor: pointer; }
    @media (max-width: 18.75em) {
      .circle__blue {
        width: 20rem;
        height: 20rem; } }
  .circle__play {
    width: 12rem;
    position: absolute;
    translate: 1rem 0; }
    .circle__play:hover {
      cursor: pointer; }
  .circle__reload {
    width: 10rem;
    position: absolute;
    translate: .5rem;
    display: none; }
    .circle__reload:hover {
      cursor: pointer; }

.instruction-text {
  position: absolute;
  bottom: 3rem;
  color: white;
  font-size: 2rem; }
  @media (max-width: 25em) {
    .instruction-text {
      font-size: 1.6rem; } }
  @media (max-width: 18.75em) {
    .instruction-text {
      font-size: 1.2rem; } }