main.css

mark {
    background-color: #ff9;
    color: #000;
    font-style: normal;
    font-weight: bold;
}

.hidden {
    display: none;
}

.draggable {

  /*Button Positioning and Size*/
  width: 8%;
  height: 25%;
  margin: 1%;
  margin-top: 3%;
  border-radius: 2em;
  padding: 4%;
  font-size: 19px;
  text-align: center;
  position: absolute;  
/*  width: 6%;
  height: 18%;
  margin: 2%;
  margin-top: 3%;
  border-radius: 2em;
  padding: 1%;
  font-size: 15px;
  text-align: center;
  line-height: 100%;*/


  
  /*Button Coloring*/
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00bbd4), color-stop(1, #3f51b5));
  background-image: -webkit-linear-gradient(top, #00bbd4 0%, #3f51b5 100%);
  background-image: linear-gradient(to bottom, #00bbd4 0%, #3f51b5 100%);
  background-image: -webkit-linear-gradient(93deg, #3f51b5 0%, #00bbd4 100%);
  color: #fff;

  /*Text display options*/
  display:table-cell;
  vertical-align:middle;

  /*Stops Browser Action for Chrome and Safari*/ 
  touch-action: none;
  -webkit-user-select: none;
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
}

.activestyle:active:hover {
  -ms-transform: translate(0px, -40%); /* IE 9 */
  -webkit-transform: translate(0px, -40%); /* Safari */
  transform: translate(0px, -40%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00bbd4), color-stop(1, #3f51b5));
  background-image: -webkit-linear-gradient(top, #00bbd4 0%, #3f51b5 100%);
  background-image: linear-gradient(to bottom, #00bbd4 0%, #3f51b5 100%);
  background-image: -webkit-linear-gradient(273deg, #3f51b5 0%, #00bbd4 100%);
  color: #fff;
}

#drag-me::before {
  content: "#" attr(id);
  font-weight: bold;
}

.swiper-container{
   height: 50%;
   width: 100%;
   position: relative;
   overflow: hidden;
}

.swiper-container-inner{
   height: 100%;
   width: 100%;
   position: relative;
   overflow: hidden;
}

.swiper-wrapper{
   height: 85%;
   width: 500%;
   position: relative;
}

.static-bar{
  height: 15%
}

.static-key{
  float: left;
  position: relative;
  height: 100%;
  text-align: center;
  border: 1px solid #888;

  color: #fff;

  /*Stops Browser Action for Chrome and Safari*/ 
  touch-action: none;
  -webkit-user-select: none;
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
}

.static-key-selected{
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bb00d4), color-stop(1, #3f51b5));
  background-image: -webkit-linear-gradient(top, #bb00d4 0%, #3f51b5 100%);
  background-image: linear-gradient(to bottom, #bb00d4 0%, #3f51b5 100%);
  background-image: -webkit-linear-gradient(93deg, #3f51b5 0%, #bb00d4 100%);
}

.static-key-default{
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00bbd4), color-stop(1, #3f51b5));
  background-image: -webkit-linear-gradient(top, #00bbd4 0%, #3f51b5 100%);
  background-image: linear-gradient(to bottom, #00bbd4 0%, #3f51b5 100%);
  background-image: -webkit-linear-gradient(93deg, #3f51b5 0%, #00bbd4 100%);
}

.static-key:active:hover {
  -ms-transform: translate(0px, -40%); /* IE 9 */
  -webkit-transform: translate(0px, -40%); /* Safari */
  transform: translate(0px, -40%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00bbd4), color-stop(1, #3f51b5));
  background-image: -webkit-linear-gradient(top, #00bbd4 0%, #3f51b5 100%);
  background-image: linear-gradient(to bottom, #00bbd4 0%, #3f51b5 100%);
  background-image: -webkit-linear-gradient(273deg, #3f51b5 0%, #00bbd4 100%);
  color: #fff;
}

.shift-toggle{
  min-width: 10%
}

.ctrl-toggle{
  min-width: 10%
}

.go-toggle{
  min-width: 10%
}

.spacebar{
  min-width: 40%
}

.backspace{
  min-width: 30%
}

.swiper-slide{
  touch-action: none;
  -webkit-user-select: none;
}

.swiper-slide-outer{
    float: left;
    height: 100%;
    width: 25%;
    background-color: white;
    position: relative;
}

#customSelect{
  position: relative;
  width: 100%
}

.custom{
    float: bottom;
    height: 85%;
    width: 25%;
    background-color: white;
    position: relative;
}

#touchpad{
    resize: vertical;
    overflow: auto;
    height: 40%;
    width: 100%;
    background-color: rgb(200, 250, 250);
    position: relative;
}

.touchpad{
  text-align: center;
  touch-action: none;
  -webkit-user-select: none;
}
.touchpad span{
    /*line-height: 80px;*/
    font-size:2.5em;
    line-height: 150%;
}

#leftClick{
  width: 40%;
  height: 35%;
  background-color: rgb(150, 180, 200);
  float: left;
}

#scrollWheel{
  width: 20%;
  height: 35%;
  background-color: rgb(100, 150, 150);
  float: left;
}

#rightClick{
  width: 40%;
  height: 35%;
  background-color: rgb(150, 180, 200);
  float: left;
}

#mousepad{
  width: 100%;
  height: 60%;
  float: left;
}
#textfield{
    height: 100%;
    width: 100%;
    font-size: 30px;
}
.wrapper{
  height: 100%;
  width: 100%;
  position: absolute;
}

#navbar{
  height: 10%;
  background-color: turquoise;
}

.icon-selection{
  float: left;
  min-height: 100%;
  min-width: 14%;
  position: relative;
  transition: background-color 300ms linear;
}

#settings-select{
  min-width: 15%;
  background-color: grey
}

#swap{
  min-width: 15%;
  background-color: grey
}

.material-icons{
  position: absolute;
  top: 35%;
  left: 35%;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
    color: white;
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    height: 40%;
    position: relative;
    color: black;
}

.settings-button{
  padding: 20px;
  background-color: orange;
}

.settings-button:active:hover{
  background-color: red;
}

.inputText {
    color: black;
}

.save {
    display: inline-block;
    background-color: green;
}

#modal-close {
    display: inline-block;
    background-color: red;
}