@font-face {
    font-family: face;
    src: url("../sources/genshin.ttf");
  }

@font-face {
  font-family: 'deshret';
  src: url('../sources/DeshretNeue-Regular-1.001.otf');
}
  
* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'face';
      font-family: 'face';
}

body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    background: rgb(2,0,36);
    background: linear-gradient(135deg, rgba(2,0,36,1) 0%, rgb(240, 225, 20) 100%);
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
  }
  
  li {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  /* Change the link color to #111 (black) on hover */
  li a:hover {
    background-color: #111;
  }

a {
    text-decoration: none;
}

.keyboard {
    display: flex;
    flex-direction: column;
    align-items: center;
}

button {
    background-color: lightgrey;
    border: none;
    display: inline-block;
    padding: .5rem 1rem;
    margin: .3rem;
    font-size: 1.3rem;
    color: #000;
    width: 90px;
    height: 80px;
    border: 2px solid #000;
    border-radius: .5rem;
}

button#letters {
  font-size: 42px;
  font-family: 'deshret';
}

.delete, .space, .clean{
  font-size: 1.5rem;
  text-transform: capitalize;
}
.delete { width: 500px; }
.clean { width: 100px; }
.space { width: 500px; }
.back { width: 100px; }

.textarea {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

textarea {
    width: 100%;
    height: 150px;
    resize: none;
    padding: .5rem;
    font-size: 2rem;
    outline: none;
    border: 2px solid #000;
    border-radius: .5rem;
}