* {margin: 0; padding: 0; box-sizing: border-box;}
page, section, menu, workspace, screen, name, canvas, item, title {display: block;}
body {font-family: 'Arimo', sans-serif; font-size: 6.2vmin;}
body {--bg: #1a1e23; --dark: #1a1e23; --light: #1a1e23; --second: #f04141; --main: white; --pad: 4px; color: white;}

body {background: var(--bg); -moz-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -ms-user-select: none; user-select: none; }

page {height:100vh; width:100vw; flex-direction: column; align-items: center; justify-content: flex-start; display: none;}
screen {height: 100%; width: 100%; min-height: 0; position: relative;}
#container {max-height:100%;max-width:100%; position: absolute; top: 45%; left: 50%; translate: -50% -50%; width:100%}

.card {
    text-align: center;
    border: 0.5vmin solid white;
    border-radius: 3vmin;
    width: 28dvw;
    margin: auto; 
}
.card img {
    height: 10dvh;
}

.card .label {
    margin-top: 0.5dvh;
    font-size: 4.5vmin;
}

.number_picker {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5dvh;
}

.number_picker p {
    margin: 0 0.5dvw;
}

.number_picker .minus,
.number_picker .plus {
    display: inline-block;
    font-size: 5vmin;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.number_picker .minus:active,
.number_picker .plus:active {
    color: #f04141;
}

.number_picker .number {
    min-width: 7.3dvW;
    text-align: center;
    font-size: 5vmin;
}

#container table{
    width: 100%;
    padding: 5dvh;
    padding-top: 3dvh;
}

#container table td{
    padding-bottom: 3dvh;
}

footer {
    padding: 3dvh;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
}
.center {
    text-align: center;
}

#secondSentence, #designateSpy {
    font-size: 6vmin;
    margin-top: 10px;
    color: #e96969;
}

img {
    pointer-events: none;
}

button {
    width: 100%;
    font-size: 5vmin;
    text-transform: uppercase;
    background: #f04141;
    color: #ffffff;
    border-radius: 400px;
    appearance: none;
    -webkit-appearance: none;
    font-family: sans-serif;
    cursor: pointer;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    padding: 12px;
    border: 0px;
    -webkit-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
}

button:focus, button.focus {
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

button:hover {
    color: #ffffff;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
button:disabled {
    background: #f17878;
    color: rgb(255, 195, 195);
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

#top h1 {
    margin-top: 3dvh;
}

#showTimer p {
    padding: 3dvh;
}

menu img {
    margin-top: 1dvh;
    height: 10dvh;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#rul {
    margin: 4dvh;
    font-size: 4vmin;
}
#rul li {
    margin-top: 1.5dvh;
}
#rules p, #timeEnded p {
    text-align: center;
}

#top p {
    position: absolute;
    top: 0;
    right: 0;
    margin: 3dvh;
    border: 0.5vmin solid white;
    border-radius: 400px;
    width: 6.5vmin;
    height: 6.5vmin;
    text-align: center;
    font-size: 5vmin;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

#top #switchLanguage {
    padding-top: 1.2vmin;
    font-size: 3vmin;
}

.redWord {
    color: #f04141;
}

#roleImg {
    height: 15dvh;
}