@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
@font-face {
    font-family: 'jawadwipa';
    src: url('../fonts/jawadwipa-adisastra-font/JawadwipaAdisastra-R7oE.ttf') format('truetype');
    font-style: normal;
}

* { box-sizing: border-box; }

body {
    background-color: #58aac65a;
    font-family: 'Muli', sans-serif;
    display: grid;
    place-items: center;
    height: 100vh;
    overflow: scroll;
    margin: 0;
}

.title { 
    font-family: 'jawadwipa', serif; 
    font-size: 5rem;
}

.subheading {
    font-family: 'Cambria', 'Cochin', Georgia, Times, 'Times New Roman', serif;
}

#editor {
    width: 54.5rem;
    height: 12rem;
}

.container {
    border: 2px solid black;
    border-radius: 16px;
    padding: 1.5em 2rem;
    margin: auto;
    background-color: rgb(211, 211, 211);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.row {
    display: flex;
    justify-content: start;
    align-items: center;
}

.row-1 > .esc, .row-2 > .key {
    width: 44px;
}

.row-4, .row-6, .row-7 {
    position: relative;
}

.key {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 50px;
    height: 40px;
    background-color: rgb(56, 56, 56);
    color: #fff;
    margin: .2em;
    border-radius: 8px;
    user-select: none;
}

.hover { filter: brightness(125%); }
.key:hover { filter: brightness(125%); }

.esc { 
    width: 2.75rem !important; 
    height: 25px;
}

.utility { 
    width: 90px; 
    height: 25px;
}

.tab { width: 72px; }

.backspace {
    width: 9.4rem !important;
    font-size: 0.8em;
}

.capslock { width: 90px; }
.enter { width: calc(88px); }
.shift { width: 7.3rem; }

.ctrl { 
    margin-left: 3.25rem;
    width: 56px; 
}

.meta { width: 4rem; }
.space { 
    margin-left: 15rem;
    width: calc(250px + 1.6em); 
}