:root {
  --rixel-blue: rgb(0, 24, 80);
  --rixel-blue-dark: rgb(0, 12, 40);
  --rixel-blue-light: rgb(0, 48, 160);
  --rixel-blue-king: rgb(64, 160, 224);
  --rixel-yellow-light: rgb(255, 224, 0);
  --rixel-yellow-dark: rgb(255, 160, 0);
  --rixel-gray-ultra-light: rgb(224, 224, 224);
  --rixel-gray-light: rgb(208, 208, 208);
  --rixel-gray-dark: rgb(192, 192, 192);
  --black: rgb(0, 0, 0);
  --white: rgb(255, 255, 255);

  --base-font-size: 10vmin;
}

body {
    height: 100%;
    margin: 0;
    max-height: 100%;
    max-width: 100%;
    min-height: 100%;
    min-width: 100%;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

html {
    background-color: var(--rixel-blue);
    color: var(--white);
    font-family: 'Roboto', sans-serif;
    font-size: var(--base-font-size);
    font-style: normal;
    font-weight: 400;
    height: 100%;
    margin: 0;
    max-height: 100%;
    max-width: 100%;
    min-height: 100%;
    min-width: 100%;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

.app-base {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    margin: 0;
    max-height: 100%;
    max-width: 100%;
    min-height: 100%;
    min-width: 100%;
    padding: 0;
    overflow: hidden;
    width: 100%;
}

.app-button {
    background-color: var(--white);
    color: var(--rixel-blue);
    font-size: 4vmin;
    line-height: 5vmin;;
    height: 5vmin;
    max-height: 5vmin;
    max-width: 10vmin;
    min-height: 5vmin;
    min-width: 10vmin;
    text-align: center;
    vertical-align: middle;
    width: 10vmin;
}

.app-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 80vmin;
    max-height: 80vmin;
    max-width: 80vmin;
    min-height: 80vmin;
    min-width: 80vmin;
    text-align: center;
    width: 80vmin;
}

.app-controls {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 5vmin;
    justify-content: center;
    height: 10vmin;
    max-height: 10vmin;
    max-width: 80vmin;
    min-height: 10vmin;
    min-width: 80vmin;
    text-align: center;
    width: 80vmin;
}

.app-info {
    align-items: center;
    color: var(--rixel-yellow-light);
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 10vmin;
    max-height: 10vmin;
    max-width: 80vmin;
    min-height: 10vmin;
    min-width: 80vmin;
    text-align: center;
    width: 80vmin;
}

.app-label {
    font-size: calc(0.5 * var(--base-font-size));
    font-weight: 300;
    padding-bottom: calc(0.5 * var(--base-font-size));
}

.app-results-line {
    font-size: calc(0.3 * var(--base-font-size));
    margin: calc(0.3 * var(--base-font-size)) 0;
}

.app-results-title {
    font-size: calc(0.5 * var(--base-font-size));
}

.app-results-total {
    font-size: calc(0.5 * var(--base-font-size));
    font-weight: 300;
}

.app-subtitle {
    font-weight: 300;
    margin-top: 5vmin;
}

.app-tool {
    align-items: center;
    color: var(--rixel-yellow-light);
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 20vmin;
    max-height: 20vmin;
    max-width: 80vmin;
    min-height: 20vmin;
    min-width: 80vmin;
    text-align: center;
    width: 80vmin;
}

.app-vote-button {
    align-items: center;
    border: 2px solid var(--white);
    border-radius: calc(0.04 * var(--base-font-size));
    cursor: default;
    display: flex;
    font-size: calc(0.4 * var(--base-font-size));
    font-weight: 300;
    justify-content: center;
    height: calc(1.2 * var(--base-font-size));
    margin: calc(0.4 * var(--base-font-size)) 0;
    max-height: calc(1.2 * var(--base-font-size));
    max-width: 100%;
    min-height: calc(1.2 * var(--base-font-size));
    min-width: 100%;
    width: 100%;
}

.app-vote-question {
    font-size: calc(0.8 * var(--base-font-size));
}