.keyboard-base {
  max-width: 1000px;
  padding: 20px;
  background-color: rgb(128, 128, 128);
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(30, 27px);
  grid-template-rows: repeat(5, 50px);
  grid-gap: 5px;
}

.modal .key-text-container{
  /* background-color: rgb(39, 39, 39); */
  padding:10px;
  font-size: 30px;
  width: fit-content;
  margin: 10px auto;
  border-bottom: 1px solid white;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  /* margin-top: 30px; */
}

.modal .key-purpose{
  margin-left: 15px;
}

.key {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: black;
  background-color: rgb(197, 197, 197);
  box-shadow: rgba(0, 0, 0, 0.05) 1.95px 1.95px 2.6px;
  border: 1px solid rgba(82, 82, 82, 0.466);
  border-radius: 5px;
  grid-column: span 2;
  font-size: 15px;
  text-align: center;
  padding-top: 17px;
  cursor: pointer;
  transition: all 0.1s ease;
}

.key svg{
  width: 20px;
  height: 20px;
}

.modal .used{
  background-color: rgb(255, 102, 102);
}

.modal .used-active{
  background-color: rgb(255, 65, 65);
}

.modal .active {
  background-color: rgb(139, 139, 139);
}

.modal .page-text{
  margin: 10px 0px;
  font-size: 20px;
}

.delete {
  grid-column: span 4;
}

.tab {
  grid-column: span 3;
}

.backslash {
  grid-column: span 3;
}

.capslock {
  grid-column: span 4;
}

.return {
  grid-column: span 4;
}

.leftshift {
  grid-column: span 5;
}

.left-arrow{
  grid-column: span 3;
}
.uparrow {
  grid-column: span 2;
}

.leftctrl {
  grid-column: span 3;
}

.command {
  grid-column: span 3;
  font-size: 14px;
}

.space {
  grid-column: span 13;
}

.ctrl {
  grid-column: span 2;
}

/* Modal */
.modal{
  display: none;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 100;
}
.modal .black{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-color: rgb(14, 14, 14, 0.8);
}
.modal .center{
  position: relative;
  z-index: 90;
} 

.modal .content{
  padding: 50px;
  height: 100%;
  min-height: 600px;
  width: 100%;
}
.modal .content-container{
  padding: 20px;
}

.modal .container{
  position: relative;;
  width: 1200px;
  
  border: 0.5px solid rgba(255, 255, 255, 0.274);
  background-size: cover;
  border-radius: 20px;

  background-color: rgb(17, 17, 17);
}

.modal ul{
  list-style-type : none;
}

.modal .header{
  font-weight: 1000;
}

.modal ul li{
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 25px;
  margin-bottom: 20px;
}
.modal ul li::before{
  content: "#";
  margin-right: 20px;
}

.modal .header-container{
  margin-bottom: 50px;
}
.modal .header-container svg{
 
  margin-left: 30px;
  width: 50px;
  height:50px;

}

.modal .close{
  position: absolute;
  top: 3%;
  right: 3%;
  z-index: 103;
}
.modal .close svg{
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.modal .right{
  width: 50px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: -75px;
  transform: translate(-50%, -50%);
}
.modal .left{
  width: 50px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translate(-50%, -50%);
}


@media only screen and (max-width: 1100px) {
  .modal .container{
    width: 800px;
  }

  .modal .key-text-container{
    font-size: 20px;

  }


  .keyboard-base {
    max-width: 800px;
    grid-gap: 10px;
    grid-template-columns: repeat(30, 10px);
    grid-template-rows: repeat(5, 50px);
  }

  
}

@media only screen and (max-width: 800px) {
  .modal .container{

    width: 600px;
  }


  .modal .key{
    font-size: 10px;
  }


  .keyboard-base {
    max-width: 600px;
    grid-gap: 3px;
    grid-template-columns: repeat(30, 10px);
    grid-template-rows: repeat(5, 40px);
  }

}