body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    html {
        height: -webkit-fill-available;
    }

    body  {
        background:#051548 ;
        
        color:#e5e7ee ;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        text-align: center;
        
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        min-height: 100vh;
        min-height: -webkit-fill-available;
    }

    header {
        display: flex;
        align-items: center;
    }

    header h1 {
        font-size: 1.75rem;
        font-weight: 900;
        letter-spacing: 0.15rem;
        text-transform: uppercase;
        margin: 0;
    }

    header small {
        color: #817a7a;
	    font-size: 0.8rem;
	    font-weight: bold;
        text-transform: uppercase;
    }
    
    .keyboard {
        display: grid;
        grid-template-columns: repeat(26, 1fr);
        gap: 2px;
    }

    .keyboard .tile {
        font-size: 1rem;
        width: 1.75rem;
        height: 1.75rem;
        line-height: 1.75rem;
    }

    /* RESPONSIVE */
    @media only screen and (max-width: 940px) {
    	header h1 {
    		font-size: 1.5rem;
    		letter-spacing: 0.05rem;
    		margin-right: 0.5rem;
    	}
    
    	.keyboard {
    		grid-template-columns: repeat(13, 1fr);
    	}
    }
    
    @media only screen and (max-width: 480px) {
    	.keyboard .tile {
    		font-size: 0.85rem;
    		width: 1.25rem;
    		height: 1.25rem;
    		line-height: 1.25rem;
            

    	}
    }