@import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,regular,italic,500,500italic,700,700italic,900,900italic);

body {
  position: relative;
  font-family: 'Roboto', sans-serif;
  box-sizing: content-box;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background-color: rgb(78, 78, 78);
  background: url('assets/background1.jpg') 0 0 / cover no-repeat;
}

body::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #27272798;
  z-index: -1000;
}

._container {
  max-width: 1200px;
  margin: 0 auto;
}

.keyboard {
  width: 855px;
}

@media (max-width: 880px) {
  .keyboard {
    width: 534px;
  }
}

@media (max-width: 550px) {
  .keyboard {
    width: 420px;
  }
}

@media (max-width: 425px) {
  .keyboard {
    width: 320px;
  }
}


.keyboard .keyboard__textarea {
  width: 100%;
  min-height: 400px;
  max-height: 600px;
  height: 200px;
  resize: vertical;
  background-color: rgba(223, 223, 223, 0.077);
  color: aliceblue;
  border-radius: 10px;
  padding: 20px;
}

.keyboard .keyboard__wrapper {
  max-width: 100%;
  padding: 10px;
  background-color: rgba(54 54 54);
  ;
  border-radius: 10px;
  border-top: none;
  border-bottom: 5px solid #404040;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: 20px;
}

@media (max-width: 425px) {
  .keyboard .keyboard__wrapper {
    max-width: 100%;
    padding: 3px;
    background-color: rgba(54 54 54);
    ;
    border-radius: 5px;
    border-top: none;
    border-bottom: 5px solid #404040;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 20px;
  }
}


textarea:focus,
input:focus {
  outline: none;
}

textarea::-webkit-scrollbar {
  width: 10px;
}

textarea::-webkit-scrollbar-track {
  background-color: #3d3d3d00;
  border-radius: 10px;
}

textarea::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #333333b5;
}

.keyboard .keyboard__button {
  position: relative;

  min-width: 50px;
  min-height: 50px;

  border: 1px solid #272727;
  border-bottom: 5px solid #9e9e9e;
  border-radius: 10px;
  background-color: rgb(223, 223, 223);

  letter-spacing: 2px;
  font-size: 18px;
  text-align: center;

  transition: border 0.3s linear, transform 0.3s linear;
}

@media (max-width: 880px) {
  .keyboard .keyboard__button {

    min-width: 25px;
    min-height: 25px;

    border-bottom: 3px solid #9e9e9e;
    border-radius: 5px;

    font-size: 10px;
  }
}

@media (max-width: 550px) {
  .keyboard .keyboard__button {

    min-width: 15px;
    min-height: 15px;

    border-bottom: 3px solid #9e9e9e;
    border-radius: 5px;

    letter-spacing: 1px;

    font-size: 9px;
  }
}

@media (max-width: 425px) {
  .keyboard .keyboard__button {

    min-width: 15px;
    min-height: 20px;

    border-bottom: 3px solid #9e9e9e;
    border-radius: 5px;

    letter-spacing: 0;

    font-size: 7px;
  }
}

.keyboard .keyboard__button.keyboard__button_tab,
.keyboard .keyboard__button.keyboard__button_backquote,
.keyboard .keyboard__button.keyboard__button_capslock,
.keyboard .keyboard__button.keyboard__button_lshift,
.keyboard .keyboard__button.keyboard__button_rshift,
.keyboard .keyboard__button.keyboard__button_lctrl,
.keyboard .keyboard__button.keyboard__button_lalt,
.keyboard .keyboard__button.keyboard__button_rctrl,
.keyboard .keyboard__button.keyboard__button_ralt,
.keyboard .keyboard__button.keyboard__button_enter,
.keyboard .keyboard__button.keyboard__button_del,
.keyboard .keyboard__button.keyboard__button_back,
.keyboard .keyboard__button.keyboard__button_win,
.keyboard .keyboard__button.keyboard__button_arrowup,
.keyboard .keyboard__button.keyboard__button_arrowright,
.keyboard .keyboard__button.keyboard__button_arrowleft,
.keyboard .keyboard__button.keyboard__button_arrowdown {
  background-color: #999999;
  border-bottom: 5px solid #666666;
}

@media (max-width: 880px) {

  .keyboard .keyboard__button.keyboard__button_tab,
  .keyboard .keyboard__button.keyboard__button_backquote,
  .keyboard .keyboard__button.keyboard__button_capslock,
  .keyboard .keyboard__button.keyboard__button_lshift,
  .keyboard .keyboard__button.keyboard__button_rshift,
  .keyboard .keyboard__button.keyboard__button_lctrl,
  .keyboard .keyboard__button.keyboard__button_lalt,
  .keyboard .keyboard__button.keyboard__button_rctrl,
  .keyboard .keyboard__button.keyboard__button_ralt,
  .keyboard .keyboard__button.keyboard__button_enter,
  .keyboard .keyboard__button.keyboard__button_del,
  .keyboard .keyboard__button.keyboard__button_back,
  .keyboard .keyboard__button.keyboard__button_win,
  .keyboard .keyboard__button.keyboard__button_arrowup,
  .keyboard .keyboard__button.keyboard__button_arrowright,
  .keyboard .keyboard__button.keyboard__button_arrowleft,
  .keyboard .keyboard__button.keyboard__button_arrowdown {
    background-color: #999999;
    border-bottom: 3px solid #666666;
  }
}


.keyboard .keyboard__button span {
  position: absolute;
  font-size: 15px;
  top: 2px;
  left: 5px;
}

@media (max-width: 880px) {
  .keyboard .keyboard__button span {
    position: absolute;
    font-size: 5px;
    top: 2px;
    left: 2px;
  }
}

.keyboard .keyboard__button.keyboard__button_active {
  transform: translateY(3px);
  border: 1px solid #282828;
  border-top: none;
  border-bottom: 3px solid #282828;
  background-color: #585757;
  color: aliceblue;
}

.keyboard .keyboard__button.keyboard__button_space {
  width: 41%;
}

@media (max-width: 880px) {
  .keyboard .keyboard__button.keyboard__button_space {
    width: 30%;
  }
}

@media (max-width: 425px) {
  .keyboard .keyboard__button.keyboard__button_space {
    width: 34%;
  }
}


.keyboard .keyboard__button.keyboard__button_tab {
  width: 7%;
}

.keyboard .keyboard__button.keyboard__button_lshift {
  width: 13%;
  text-align: left;
}

.keyboard .keyboard__button.keyboard__button_lctrl {
  width: 9%;
}

.keyboard__button_arrowup,
.keyboard__button_arrowright,
.keyboard__button_arrowleft,
.keyboard__button_arrowdown {
  position: relative;
}

.keyboard__button_arrowup::before,
.keyboard__button_arrowright::before,
.keyboard__button_arrowleft::before,
.keyboard__button_arrowdown::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: url('assets/icons/up.svg') 0 0 / cover no-repeat;
}

@media (max-width: 880px) {

  .keyboard__button_arrowup::before,
  .keyboard__button_arrowright::before,
  .keyboard__button_arrowleft::before,
  .keyboard__button_arrowdown::before {
    width: 8px;
    height: 8px;
  }
}

@media (max-width: 550px) {

  .keyboard__button_arrowup::before,
  .keyboard__button_arrowright::before,
  .keyboard__button_arrowleft::before,
  .keyboard__button_arrowdown::before {
    width: 5px;
    height: 5px;
  }
}

.keyboard__button_arrowright {
  margin-right: 9px;
}

@media (max-width: 880px) {
  .keyboard__button_arrowright {
    margin-right: 17px;
  }
}

@media (max-width: 550px) {
  .keyboard__button_arrowright {
    margin-right: 21px;
  }
}

@media (max-width: 425px) {
  .keyboard__button_arrowright {
    margin-right: 13px;
  }
}

.keyboard__button_arrowright::before {
  transform: rotate(90deg) translateX(-50%) translateY(50%);
}

.keyboard__button_arrowleft::before {
  transform: rotate(-90deg) translateX(50%) translateY(-50%);
}

.keyboard__button_arrowdown::before {
  transform: rotate(180deg) translateX(50%) translateY(50%);
}