@font-face {
        font-family: 'SFSlapstickComic';
        src: url("fonts/SF Slapstick Comic.ttf");
    }
    
    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    
    body {
        font-family: "SFSlapstickComic";
        background-color: #3498db;
        overflow-y: hidden;
        overflow-x: hidden;
    }
    
     ::-webkit-scrollbar {
        display: none;
    }
    
    #Screens {
        width: 100%;
        ;
    }
    
    #LoadingPage {
        display: none;
        opacity: 0;
        background: rgba(0, 0, 0, 0.7);
        position: absolute;
        width: 100vw;
        height: 100vh;
        margin: 0;
        left: 0;
        z-index: 1;
        text-align: center;
    }
    
    #LoadingPage div {
        margin: 50vh auto;
        width: 3em;
        height: 3em;
    }
    
    #Login {
        position: absolute;
        width: 90vw;
        top: 14vh;
        left: 0;
        background: #F3F3F3;
        padding: 1vh;
        border-radius: 20px;
        color: black;
        margin: 5vw;
    }
    
    #Main-menu {
        position: absolute;
        width: 100vw;
        top: 14vh;
        left: 100vw;
    }
    
    #Game-playing {
        position: absolute;
        width: 100vw;
        top: 14vh;
        left: 100vw;
    }
    
    #Game-menu, #GameOffline-menu {
        position: absolute;
        width: 100vw;
        top: 14vh;
        left: 100vw;
    }
    
    #Game-player {
        position: absolute;
        width: 100vw;
        top: 14vh;
        left: 100vw;
    }

    #Game-Roulete-text
    {
        margin-top: 2vh;
        height: 30vh;
    }

    #Game-Roulete-container
    {
        background: #34495e;
        width: 100%;
        height: 100%;
        padding: 15px;
        border-radius: 15px;
        color: #ecf0f1;
        overflow: hidden;

    }

    .roulette_item
    {
        text-align: center;
        height: 100%;
        margin-bottom: 2vh;
    }

    #Game-Roulete-buttons
    {
        padding: 0 15vw 0 15vw;
    }

    #Game-Roulete-buttons button
    {
        height: 15vh;
        background: #8e44ad;
        width: 100%;
    }
    
    #Game-Roulete {
        position: absolute;
        width: 100vw;
        top: 14vh;
        left: 100vw;
    }
    
    #Title img {
        width: 100%;
        padding: 0 5vw 0 5vw;
    }
    
    #Title div {
        background: rgba(241, 196, 15, 0.9);
        margin-top: 5vh;
        padding: 1vh 5vw 1vh 5vw;
    }
    
    #info-text {
        font-family: "SFSlapstickComic";
        color: #ecf0f1;
        margin-top: 2vh;
        padding: 0 15vw 0 15vw;
        margin-bottom: 3vh;
    }
    
    #info-text div {
        background: #34495e;
        padding: 1vh 5vw 1vh 5vw;
        border-radius: 13px;
        font-size: 15px;
        line-height: 22px;
    }
    
    #palabra-game {
        margin-top: 2vh;
        text-align: center;
    }
    
    #palabra-game button {
        width: 35vh;
        background: #8e44ad;
        height: 10vh;
    }
    
    #Autor {
        position: absolute;
        bottom: 1vh;
        color: white;
        font-size: 13px;
        margin-left: 8px;
    }
    
    #game-buttons {
        max-height: 60vh;
        overflow: scroll;
    }
    
    #game-menu-buttons, #gameOffline-menu-buttons {
        padding: 0 15vw 0 15vw;
    }
    
    #game-menu-buttons button, #gameOffline-menu-buttons button {
        height: 15vh;
        background: #8e44ad;
    }
    
    #game-info-text, #gameOffline-info-text {
        font-family: "SFSlapstickComic";
        color: #ecf0f1;
        margin-top: 2vh;
        padding: 0 15vw 0 15vw;
        margin-bottom: 3vh;
        max-height: 50vh;
        overflow: scroll;
    }
    
    #game-info-text div {
        background: #34495e;
        padding: 1vh 5vw 1vh 5vw;
        border-radius: 13px;
        font-size: 15px;
        line-height: 22px;
    }
    
    #volver_btn {
        margin-left: 2vw;
        margin-top: 2vw;
    }
    
    #volver_btn button {
        background: #c0392b;
        border: none;
    }
    
    #UserContainer {
        background: red;
        padding: 1px;
        border-radius: 5px;
        overflow: scroll;
        max-height: 40vh;
    }

    #UserContainerMainMenu {
        padding: 1px;
        border-radius: 5px;
        overflow: scroll;
        max-height: 30vh;

        background: #34495e;
        padding: 1vh 5vw 1vh 5vw;
        border-radius: 13px;
        font-size: 15px;
        line-height: 22px;

    }

    #UserContainerRowMainMenu
    {   
        padding: 0 15vw 0 15vw;
        margin-top: 2vh;
        color: #ecf0f1;
    }
    
    #game-player-info-text {
        font-family: "SFSlapstickComic";
        color: #ecf0f1;
        margin-top: 2vh;
        padding: 0 15vw 0 15vw;
        margin-bottom: 3vh;
        max-height: 50vh;
        overflow: scroll;
    }
    
    #game-player-info-text-container {
        background: #34495e;
        padding: 1vh 5vw 1vh 5vw;
        border-radius: 13px;
        font-size: 15px;
        line-height: 22px;
    }
    
    
    .userInfo {
        background: #2c3e50;
        padding-left: 2vw;
        text-align: center;
        margin-bottom: 1vh;
        border-radius: 7px;
    }
    
    #roomId {
        text-align: center;
        margin-bottom: 2vh;
    }
    
    .green {
        background-color: #13783e !important;
    }
    
    .red {
        background-color: #c0392b !important;
    }
    
    button {
        border: none !important;
    }
    
    .myAlias {
        background-color: #517168;
    }
    
    #RoomIdInput {
        width: 100%;
        height: 55px;
        font-size: 30px;
        padding: 10px;
        letter-spacing: 5px;
    }
    
    #rol_player_container {
        text-align: center;
        background: #8e44ad;
        margin: 5vh 5vw;
        height: 30vh;
        border-radius: 20px;
        color: white;
    }
    
    #rol_player_lbl {
        margin: 0 auto;
        padding-top: 10vh;
        font-size: 3em;
    }
    /*https://codepen.io/mohaiman/pen/MQqMyo*/
    
    .area {
        width: 100%;
        height: 100vh;
    }
    
    .circles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: -100;
    }
    
    .circles li {
        position: absolute;
        display: block;
        list-style: none;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.2);
        animation: animate 25s linear infinite;
        bottom: -150px;
    }
    
    .circles li:nth-child(1) {
        left: 25%;
        width: 80px;
        height: 80px;
        animation-delay: 0s;
    }
    
    .circles li:nth-child(2) {
        left: 10%;
        width: 20px;
        height: 20px;
        animation-delay: 2s;
        animation-duration: 12s;
    }
    
    .circles li:nth-child(3) {
        left: 70%;
        width: 20px;
        height: 20px;
        animation-delay: 4s;
    }
    
    .circles li:nth-child(4) {
        left: 40%;
        width: 60px;
        height: 60px;
        animation-delay: 0s;
        animation-duration: 18s;
    }
    
    .circles li:nth-child(5) {
        left: 65%;
        width: 20px;
        height: 20px;
        animation-delay: 0s;
    }
    
    .circles li:nth-child(6) {
        left: 75%;
        width: 110px;
        height: 110px;
        animation-delay: 3s;
    }
    
    .circles li:nth-child(7) {
        left: 35%;
        width: 150px;
        height: 150px;
        animation-delay: 7s;
    }
    
    .circles li:nth-child(8) {
        left: 50%;
        width: 25px;
        height: 25px;
        animation-delay: 15s;
        animation-duration: 45s;
    }
    
    .circles li:nth-child(9) {
        left: 20%;
        width: 15px;
        height: 15px;
        animation-delay: 2s;
        animation-duration: 35s;
    }
    
    .circles li:nth-child(10) {
        left: 85%;
        width: 150px;
        height: 150px;
        animation-delay: 0s;
        animation-duration: 11s;
    }
    
    @keyframes animate {
        0% {
            transform: translateY(0) rotate(0deg);
            opacity: 1;
            border-radius: 0;
        }
        100% {
            transform: translateY(-1000px) rotate(720deg);
            opacity: 0;
            border-radius: 50%;
        }
    }
    
    #tablero {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 5%;
    }
    
    #tablero .box {
        background: rgba(238, 238, 238, 0.2);
        width: 25vw;
        margin: 1px;
        cursor: pointer;
        transition: all 300ms ease;
        background-size: cover;
        /* <------ */
        background-repeat: no-repeat;
        background-position: center center;
        /* optional, center the image */
    }
    
    #tres_info_game {
        text-align: center;
        background: #8e44ad;
        margin: 1vh 5vw;
        height: 10vh;
        border-radius: 10px;
        color: white;
    }