:root {
  --font: system-ui;
  --blue: #1b6bb5;
  --blue-light: #4883be;
  --blue-lighter: #a4c8f8;
  --blue-border: #307ac0;
  --grey: #7b8085;
  --black: #000108;
  --text-light: #c3cee7;
  --radius: min(5vw, 6.67vh);
  --key-width: calc(min(100vw - 6vh, 96.57vh) / 14.5); /* 96.57 == (14.5*base_width) */
  --big-key-width: calc(var(--key-width) * 1.5);
  --key-height: calc(1.142 * var(--key-width));
}

* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
    width: 100%;
}
body {
    position: relative;
    background: var(--blue);
    background: -webkit-linear-gradient(349deg,rgba(27, 107, 181, 1) 0%, rgba(255, 230, 230, 1) 100%);
    background: -moz-linear-gradient(349deg,rgba(27, 107, 181, 1) 0%, rgba(255, 230, 230, 1) 100%);
    background: linear-gradient(349deg,rgba(27, 107, 181, 1) 0%, rgba(255, 230, 230, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr="#1B6BB5",
    endColorstr="#FFE6E6",
    GradientType=0
);
}
p {
    color: var(--black);
}
#main_title {
    position: absolute;
    top: 21.6vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
    font-family: var(--font);
    font-size: max(1rem, 10.8vw);
}
.games_buttons {
    width: 26.4vw;
    height: min(20.4vh, 11.48vw);
    position: absolute;
    background: var(--blue-light);
    transform: translate(0%, 0%);
    border-radius: var(--radius);
    outline-width: 1.2px;
    outline-style: solid;
    outline-color: var(--blue-border);
}
.games_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -53.5%);
    font-size: 4.82vw;
    text-align: center;
    color: var(--text-light);
    white-space: nowrap;
    font-family: var(--font);
}
#palabrita_text1 {
    display: table-cell;
    vertical-align: top;
    top: calc(16.6vh + (4.91vh + 8.73vw) / 4.6);
    left: 50vw;
    font-size: min(max(1rem, calc(4.91vh + 8.73vw)), 11.2vw);
    font-family: var(--font);
    font-weight: bold;
    position: absolute;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
}
#palabrita_text2 {
    top: calc(30.3vh + 0.3 * min(min(5.75vw + 3.23vh, 9.26vw), 8vh));
    left: 50vw;
    font-size: min(min(max(1rem, calc(2.03vh + 5.4vw)), 8.2vw), 11vh);
    line-height: min(min(calc(5.75vw + 3.23vh), 12vw), 9.2vh);
    font-family: var(--font);
    position: absolute;
    transform: translate(-50%, 0%);
    text-align: center;
}
#main_screen {
    will-change: transform, opacity;
}
#palabrita_play {
    top: 66vh;
    left: 50vw;
    position: absolute;
    background: #6191c3;
    width: 23vh;
    height: 9.26vh;
    transform: translate(-50%, 0%);
    border-radius: var(--radius);
    outline-width: 1.2px;
    outline-style: solid;
    outline-color: var(--blue-border);
}
#palabrita_text_play {
    top: 50%;
    left: 50%;
    font-size: 6.8vh;
    font-family: var(--font);
    position: absolute;
    transform: translate(-50%, -53.5%);
    text-align: center;
    white-space: nowrap;
    color: var(--text-light);
}
.better_button {
    border: none;
    padding: 0;
    display: block;
    box-sizing: border-box;
    cursor: pointer;
}
.keyboard_button {
    width: var(--key-width);
    height: var(--key-height);
    background: #a4c8f8;
    position: absolute;
    transform: translate(-50%, 0%);
    border-radius: calc(var(--radius) / 4.67);
    outline-width: 0.2px;
    outline-style: solid;
    outline-color: var(--black);
}
.keyboard_button_big {
    width: var(--big-key-width);
    height: var(--key-height);
    background: var(--blue-lighter);
    position: absolute;
    transform: translate(-50%, 0%);
    border-radius: calc(var(--radius) / 4.67);
    outline-width: 0.2px;
    outline-style: solid;
    outline-color: var(--black);
}
.keyboard_text {
    position: absolute;
    top: 50%;
    left: 50%;
    color: var(--black);
    font-size: 4vh;
    font-family: var(--font);
    transform: translate(-50%, -53.5%);
}
.keyboard_enter {
    position: absolute;
    top: 50%;
    left: 50%;
    color: var(--black);
    font-size: 2vh;
    font-family: var(--font);
    transform: translate(-50%, -53.5%);
}
#back_button {
    background: transparent;
    position: absolute;
    color: var(--black);
    font-family: var(--font);
    top: 2vh;
    left: 3vh;
    font-size: 5vh;
}

.word_display_box {
    width: 7.62vh;
    height: 7.62vh;
    background: transparent;
    position: absolute;
    transform: translate(-50%, 0%);
    outline-width: 0.5px;
    outline-style: solid;
    outline-color: var(--black);
}