body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    align-items: center;
    text-align: center;
    font-family:Arial, Helvetica, sans-serif;
    min-height: 100vh;
}

p {
    display: block;
    width: min(300px, 95vw);
    position: absolute;
    text-align: center;
    right: 2.5vw;
    bottom: 1vh;
    padding: 5px;
    border-radius: 15px;
    border: 3px solid #000;
}

.error_bad::after {
    content: "Network Error";
    position: relative;
    top: -20px;
    color: #f00;
    font-weight: 900;
    font-family: arial;
    text-transform: uppercase;
    width: min(200px, 90vw);
    display: block;
    left: -21px;
}

input[type="text"] {
    border: 0.5px solid #ccc;
    border-radius: 8px;
    padding: 3px 6px;
}

input[type="checkbox"] {
    position: relative;
    top: 1px;
}

ul#tastierino {
    display: grid;
    bottom: 5px;
    gap: 5px;
    width: min(160px, 80vw);
    list-style-type: none;
    height: min(160px, 80vw);
    padding: 0;
    grid-template:
        '. up .'
        'left space right'
        '. down .';
}

ul#tastierino li {
    border-radius: 10px;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 50%;
    cursor: pointer;
    border: 4px solid #000;
}

li#ArrowUp {
    grid-area: up;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg width="800px" height="800px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 8L2 8L2 6L8 5.24536e-07L14 6L14 8L10 8L10 16L6 16L6 8Z" fill="%23000000"/></svg>')
}

li#ArrowLeft {
    grid-area: left;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg width="800px" height="800px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 10L8 14L6 14L-2.62268e-07 8L6 2L8 2L8 6L16 6L16 10L8 10Z" fill="%23000000"/></svg>')
}

li#ArrowDown {
    grid-area: down;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg width="800px" height="800px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 8L14 8V10L8 16L2 10V8H6V0L10 4.76995e-08V8Z" fill="%23000000"/></svg>')
}

li#ArrowRight {
    grid-area: right;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg width="800px" height="800px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 6L8 2L10 2L16 8L10 14L8 14L8 10L-1.74845e-07 10L-3.01991e-07 6L8 6Z" fill="%23000000"/></svg>')
}

ul#tastierino li#space {
    grid-area: space;
    background-size: 90%;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg fill='%23000000' height='800px' width='800px' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 369.564 369.564' xml:space='preserve'%3E%3Cg%3E%3Cg id='Layer_5_18_'%3E%3Cg%3E%3Cpath d='M225.252,177.878c-8.815,1.976-16.982,0.168-24.113-1.505c-4.528-1.065-4.833-4.36-1.656-7.721 c6.151-6.491,9.919-15.261,9.919-24.904c0-20.024-16.223-36.247-36.249-36.247c-14.51,0-27.036,8.529-32.833,20.849 c-1.976,4.211-6.319,7.101-10.896,6.337c-8.954-1.521-15.344-1.044-15.344,7.638c0,8.752,10.931,17.46,24.217,23.725 c4.187,1.977,4.24,4.748,0.388,7.352c-13.117,8.803-21.751,23.775-21.751,40.757c0,27.104,19.764,43.263,46.811,45.008 c56.139,3.623,78.828-5.282,90.382-37.577C278.801,152.623,238.032,175.015,225.252,177.878z'/%3E%3Cpath d='M363.292,168.713h-12.011c-0.679,0-4.098-0.211-4.633-4.384c-9.497-72.924-67.073-130.7-140.019-140.5 c-5.217-0.691-5.779-4.153-5.779-5.609V6.272c0-3.457-2.813-6.27-6.271-6.27h-19.598c-3.457,0-6.271,2.813-6.271,6.27v11.945 c0,2.888-2.362,5.148-5.878,5.622c-38.372,5.153-73.787,23.954-99.719,52.939c-21.977,24.545-35.867,54.718-40.166,87.254 c-0.455,3.451-2.778,4.681-4.802,4.681H6.27c-3.457,0-6.27,2.813-6.27,6.271v19.597c0,3.457,2.813,6.27,6.27,6.27h11.688 c2.046,0,4.378,1.248,4.794,4.755c4.359,35.726,20.801,69.515,46.295,95.144c25.485,25.62,59.168,42.238,94.848,46.793 c2.394,0.305,4.817,2.033,4.817,4.744v11.006c0,3.457,2.813,6.27,6.271,6.27h19.598c3.457,0,6.271-2.813,6.271-6.27V352.29 c0-2.497,1.997-4.373,5.084-4.778c35.707-4.62,69.389-21.32,94.841-47.023c25.471-25.722,41.842-59.608,46.101-95.434 c0.334-3.103,2.686-4.205,4.597-4.205h11.819c3.457,0,6.27-2.813,6.27-6.27v-19.597 C369.561,171.526,366.748,168.713,363.292,168.713z M194.58,305.857h-19.598c-3.457,0-6.271,2.813-6.271,6.271v5.373 c0,2.37-1.671,4.76-5.404,4.76c-0.546,0-1.123-0.05-1.713-0.149c-59.041-9.957-104.727-56.425-113.701-115.716 c-0.144-0.679-0.526-2.484,0.729-4.035c0.79-0.975,1.982-1.512,3.359-1.512h5.453c3.458,0,6.271-2.813,6.271-6.27v-19.597 c0-3.458-2.813-6.271-6.271-6.271h-5.213c-1.333,0-2.499-0.507-3.284-1.428c-0.803-0.941-1.097-2.125-0.873-3.52 c4.161-26.227,15.761-50.588,33.543-70.448c21.012-23.468,49.618-39.193,80.557-44.281l0.157-0.027 c0.478-0.081,1.131-0.193,1.85-0.193c3.12,0,4.54,2.173,4.54,4.192v4.428c0,3.458,2.813,6.271,6.271,6.271h19.598 c3.457,0,6.271-2.813,6.271-6.271v-4.428c0-2.002,1.452-4.158,4.642-4.158c0.788,0,1.54,0.125,2.096,0.218 c58.051,9.626,103.718,55.063,113.633,113.066c0.164,0.956,0.548,3.196-0.945,4.968c-0.875,1.039-2.171,1.61-3.65,1.61h-4.5 c-3.458,0-6.271,2.813-6.271,6.271v19.597c0,3.457,2.813,6.27,6.271,6.27h4.73c1.49,0,2.795,0.566,3.677,1.595 c1.464,1.71,1.13,3.857,1.005,4.666c-9.208,59.102-55.045,105.354-114.059,115.091c-0.525,0.086-1.008,0.129-1.475,0.129 c-3.035,0-5.155-1.983-5.155-4.822v-5.381C200.85,308.669,198.037,305.857,194.58,305.857z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
}

.state_ArrowUp #ArrowUp,
.state_ArrowLeft #ArrowLeft,
.state_ArrowRight #ArrowRight,
.state_ArrowDown #ArrowDown,
.state_ #space {
    background-color: #666;
}


div#cosino {
    display: block;
    width: min(200px, 50vw);
    height: min(200px, 50vw);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23.406' height='25.896' viewBox='0 0 6.193 6.852'%3E%3Cg fill='none' stroke='%23000' stroke-width='.265' transform='translate(-2.586 -1.3)'%3E%3Crect width='.855' height='3.464' x='2.718' y='4.556' ry='.428'/%3E%3Ccircle cx='4.489' cy='2.119' r='.374'/%3E%3Crect width='.8' height='5.254' x='5.274' y='1.433' ry='.164'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.9 2.916-.881 1.405v3.33h1.656'/%3E%3Crect width='.855' height='3.464' x='-8.647' y='4.556' ry='.428' transform='scale(-1 1)'/%3E%3Ccircle cx='-6.876' cy='2.119' r='.374' transform='scale(-1 1)'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6.465 2.916.881 1.405v3.33H5.69'/%3E%3C/g%3E%3C/svg%3E")  center center no-repeat;
    background-size: contain;
}

#cosino.state_arrowUp {
    animation-name: arrowUp;
    animation-duration: 3s;
}
@keyframes arrowUp {
    0% { transform: translateY(0) }
    99% { transform: translateY(-100px) }
    100% { transform: translateY(0) }
}
#cosino.state_arrowDown {
    animation-name: arrowDown;
    animation-duration: 3s;
}
@keyframes arrowDown {
    0% { transform: translateY(0) }
    99% { transform: translateY(100px) }
    100% { transform: translateY(0) }
}
#cosino.state_arrowLeft {
    animation-name: arrowLeft;
    animation-duration: 3s;
}
@keyframes arrowLeft {
    0% { transform: translateX(0) }
    99% { transform: translateX(-100px) }
    100% { transform: translateX(0) }
}
#cosino.state_arrowRight {
    animation-name: arrowRight;
    animation-duration: 3s;
}
@keyframes arrowRight {
    0% { transform: translateX(0) }
    99% { transform: translateX(100px) }
    100% { transform: translateX(0) }
}


@media screen and (max-width:864px) {
    p {
        bottom: auto;
        right: auto;
        top: 100vh;
        left: 50%;
        transform: translateX(-50%);
    }
}