/* INDEX CSS */

@font-face {
    font-family: 'Ludor';
    src: url('fonts/m6x11plus.ttf') format('woff2');
    font-weight: normal;
    font-style: normal;
  }

.off{
    display: none;
}

.loader {
    border: 8px solid #014729; /* Light grey */
    border-top: 8px solid #fff; /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 0.5s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

html, body{
    height: 100vh;
    margin: 0;
    padding: 0;

    background-color: #014729;
    color: #fff;

    font-family: 'Ludor', sans-serif;
}

    header {
        position: absolute;

        margin: 20px 0px 0px 10px;
    }

        header img {
            cursor: pointer;
        }

        header img:hover {
            rotate: 5deg;
        }

    #gameboard{
        display: flex;

        width: 100%;
        height: 100vh;
        
        text-align: center;

    }

        #gfix{
            margin: auto;
        }   

            #startup{
                width: 300px;
                height: auto;
                padding: 28px 12px 12px;

                border-radius: 8px;
                box-shadow: #00000031 0px 4px 4px 0px;

                background-color: #fff;
            }

                #startup input{
                    margin: 0px 5px 0px 0px;
                    padding: 15px;

                    font-size: 15px;

                    border-radius: 6px;
                    border: none;
                    
                    background-color: #CCCCCC;
                }

                #startup button{
                    padding: 15px;

                    font-size: 15px;

                    border-radius: 6px;
                    border: none;
                    
                    color: #fff;
                    background-color: #014729;

                    cursor: pointer;
                }
                
                #nombre{
                    margin: 0px 0px 20px;
                }

                #dropdown {
                    margin: 0px 0px 0px 0px;
                    font-size: 30px;
                    font-weight: bold;
                    color: #333;

                    cursor: pointer;
                }

                #partyMenu{
                    margin: 0px 0px 10px 0px;  ;

                    border-top: 1px solid #C5C3C3;

                    color:#333;
                }

                    #partyMenu h4{
                        margin: 35px 0px 12px 0px;
                    }