@charset "UTF-8";
body {
  padding: 24px;
  display: block;
  background: #eee;
}
@media (min-width: 780px) {
  body {
    padding: 48px;
  }
}

#alpha-render,
#alpha-keyboard {
  display: block;
  min-height: 132px;
}
#alpha-render + *,
#alpha-keyboard + * {
  margin-top: 48px;
}

#alpha-render {
  background: #fff;
  padding: 12px;
  font-family: Helvetica, sans-serif;
  font-size: 36px;
  font-weight: bold;
  color: #222;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  /* 10 colonnes */
  gap: 10px;
}

#alpha-keyboard {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  /* 10 colonnes */
  gap: 2px;
}
@media (min-width: 580px) {
  #alpha-keyboard {
    gap: 5px;
  }
}
@media (min-width: 960px) {
  #alpha-keyboard {
    gap: 10px;
  }
}
#alpha-keyboard .key {
  border: 1px solid #ddd;
  gap: 2px;
  border-radius: 5px;
  background: #fff;
}
@media (min-width: 580px) {
  #alpha-keyboard .key {
    border-width: 2px;
  }
}
#alpha-keyboard .key:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}
#alpha-keyboard .key:active {
  border-color: #aaa;
}

.key {
  --letter-size: calc(6.19vw);
  --key-dimension: auto;
  display: block;
  height: var(--key-dimension);
  width: var(--key-dimension);
  padding-top: 100%;
  position: relative;
  transition: all 0.1s ease;
  overflow: hidden;
}
@media (min-width: 1550px) {
  .key {
    --letter-size: 96px;
  }
}
.key::before {
  height: calc(var(--letter-size) * 1.3);
  width: var(--letter-size);
  content: attr(id);
  color: #222;
  position: absolute;
  display: block;
  left: calc(50% - var(--letter-size) / 2);
  top: calc(50% - calc(var(--letter-size) * 1.3) / 2);
  font-family: Helvetica, sans-serif;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  content: "";
  background: url("https://jordansutter.fr/img_alphas.PNG") 0 0 no-repeat;
  background-size: calc(100vw * 0.5) auto;
}
@media (min-width: 1550px) {
  .key::before {
    background-size: 765px auto;
  }
}

#a::before {
  background-position: 1.97% 2.4%;
}

#b::before {
  background-position: 18% 2.4%;
}

#c::before {
  background-position: 34% 2.4%;
}

#d::before {
  background-position: 50% 2.4%;
}

#e::before {
  background-position: 65.5% 2.4%;
}

#f::before {
  background-position: 82% 2.4%;
}

#g::before {
  background-position: 98% 2.4%;
}

#h::before {
  background-position: 1.97% 33%;
}

#i::before {
  background-position: 18% 33%;
}

#j::before {
  background-position: 34% 33%;
}

#k::before {
  background-position: 50% 33%;
}

#l::before {
  background-position: 65.5% 33%;
}

#m::before {
  background-position: 82% 33%;
}

#n::before {
  background-position: 98% 33%;
}

#o::before {
  background-position: 1.97% 65%;
}

#p::before {
  background-position: 18% 65%;
}

#q::before {
  background-position: 34% 65%;
}

#r::before {
  background-position: 50% 65%;
}

#s::before {
  background-position: 65.5% 65%;
}

#t::before {
  background-position: 82% 65%;
}

#u::before {
  background-position: 98% 65%;
}

#v::before {
  background-position: 1.97% 95%;
}

#w::before {
  background-position: 18% 95%;
}

#x::before {
  background-position: 34% 95%;
}

#y::before {
  background-position: 50% 95%;
}

#z::before {
  background-position: 65.5% 95%;
}

#ch::before {
  background-position: 92% 95%;
  width: calc(var(--letter-size) * 1.3);
  left: calc(50% - calc(var(--letter-size) * 1.3) / 2);
}

#é::before {
  content: attr(id);
  background: none;
}

#è::before {
  content: attr(id);
  background: none;
}

#alpha-keyboard .key--reset {
  background-color: rgba(255, 0, 0, 0.2);
  border-color: rgba(255, 0, 0, 0.3);
}
#alpha-keyboard .key--reset::before {
  content: attr(id) !important;
  background: none;
}
#alpha-keyboard .key--reset:hover {
  background: rgba(255, 0, 0, 0.4);
  border-color: rgba(255, 0, 0, 0.45);
}
#alpha-keyboard .key--reset:active {
  background: rgba(255, 0, 0, 0.5);
  border-color: rgba(255, 0, 0, 0.55);
}

#alpha-keyboard .key--complex {
  border-color: rgba(200, 0, 255, 0.5);
}