:root {
  --front-page-font-size: 16px;
  --color-text-shadow: rgb(0 0 0 / 50%);
  --front-page-padding: var(--page-padding);
  --front-page-pane-radius: var(--pane-radius);
  --front-page-margin-bottom: 28px;
  --front-page-color-bling: var(--color-bling);
  --front-page-color-primary: var(--color-primary);
  --front-page-color-secondary: var(--color-secondary);
  --front-page-color-secondary-text: var(--color-secondary-text);
}

.front-page {
  font-size: var(--front-page-font-size);
  height: 100%;
  padding: var(--front-page-padding);
}

.front-page .video {
  max-width: 800px;
  margin: auto;
  margin-bottom: 2em;
}

.front-page .wp-block-buttons {
  display: flex;
  /* font-size: 0.4em; */
  align-items: center;
  justify-content: space-around;
  padding: 2em;
  background-color: var(--front-page-color-primary);
  border-radius: var(--front-page-pane-radius);
  margin-bottom: var(--front-page-margin-bottom);
}

.front-page .wp-block-button {
  /* margin: 1em; */
  width: 50ch;
}

.front-page .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 5px #0000008f;
  background-color: var(--front-page-color-secondary-text);
  color: var(--front-page-color-secondary);
  border: solid 3px var(--color-alpha-black);
  font-family: "Oswald", seif;
  text-transform: uppercase;
  text-shadow: var(--text-shadow-dark);
  width: 12ch;
  height: 4ch;
  font-size: 1.25em;
}

.front-page .wp-block-buttons .wp-block-button:last-child {
  margin-right: 1em;
}

.front-page .wp-block-button__link:hover {
  background-color: var(--front-page-color-bling);
}

@media all and (max-width: 850px) {
  .front-page .wp-block-buttons {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .front-page .wp-block-button {
    margin: 1em;
    width: unset;
  }
  .front-page .wp-block-button__link {
    width: 22ch;
    /* font-size: 2em; */
    /* min-height: 4em; */
    /* min-width: 20em; */
  }
}

@media all and (max-width: 500px) {
  .front-page {
    font-size: 14px;
  }
  .front-page .wp-block-button__link {
    /* font-size: 2em; */
    /* min-width: 12em; */
  }
}

@media all and (max-width: 400px) {
  .front-page {
    font-size: 12px;
  }
  .front-page .wp-block-button__link {
    /* font-size: 2em; */
    /* min-width: 12em; */
  }
}