/*
Theme Name:     Lacta   
Description:    Lacta Project
Author:         toolbox

*/

:root {
  --main-color: #c32e2f;
}

@font-face {
	font-family: 'PFReminder';
        src: url('fonts/PFReminder-Regular.otf') 
            format('truetype');                
}


@font-face {
	font-family: 'PFReminderM';
        src: url('fonts/PFReminder-Medium.otf') 
            format('truetype');  
}

 * {
      touch-action: manipulation;
  }

body{
    background-color: var(--main-color);
    text-align: center;
    font-family: 'Roboto', sans-serif;
}

h1{
    color: white; 
    font-size: 2.5rem; 
    padding-top: 5%; 
    padding-bottom: 4%;}

div img{
    width: 100%;
    height: auto;
}

div.hearts{
    width: 15%;
    padding-bottom: 1%;
    margin: 0 auto;
}

div#label-area{
    display: table;
    width: 600px;    
    height: 400px;    
    margin: 0 auto;        
    border-radius: 4%;        
    background-color: white;
}

p#label{
    background-color: transparent;
    width: 90%;
    height: 90%;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-family: 'PFReminderM';
    font-size: 4em;
    margin: 5%;
}

div.lacta-logo{
    width: 15%;
    padding-top: 4%;
    margin: 0 auto;    
}

button:hover{
    cursor: pointer;
}

.next{
    font-size: 1.2em;
    padding: 1% 2%;
    border: 0px;
    color: var(--main-color);
    background-color: white; 
    font-weight: bold;
    margin-bottom: 5%;
}

#keyboard-area{width: 748px; margin: 5% auto; background-color: black; padding: 10px;}

#keyboard-el{display: none;}

/*
* Keyboard
*/

.keyboard {
margin: 0;
padding: 0;
list-style: none;
}

.letter.lowercase{
    text-transform: lowercase;
}

    .keyboard li {
    float: left;
    margin: 0 5px 5px 0;
    width: 45px;
    height: 45px;
    line-height: 40px;
    text-align: center;
    background: #fff;
    border: 1px solid #f9f9f9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }
        .lan, .tab, .left-shift {
        clear: left;
        }
            .keyboard .tab, .keyboard .delete {
                width: 65px;
                
            }
            .keyboard .lan {
                width: 77px;
                
            }
            .keyboard .return {
                width: 85px;
                
            }
            .keyboard .left-shift {
                width: 92px;
                
            }
            .keyboard .right-shift {
                width: 122px;
                
            }
            
        .lastitem {
            margin-right: 0;
            
        }
        .uppercase {
            text-transform: uppercase;
            
        }
        .keyboard .space {
            clear: left;
            width: 740px;
            
        }
        .on {
        display: none;
        }
        .keyboard li:hover {
        position: relative;
        top: 1px;
        left: 1px;
        border-color: #e5e5e5;
        cursor: pointer;
        }