/*
 * disclaimer: this sucks
 */

body{
    background-color: rgb(27, 27, 27);
    outline: transparent;
    -webkit-tap-highlight-color: transparent;
}
h1{
    text-align: center;
    color: rgb(233, 232, 231);
    font-family: "Roboto Black", sans-serif;
    font-size: 4rem;
    margin: 2rem;
    user-select: none;
    transition: all 0.5s ease;
    position: relative;
}

h1:hover{
    filter: drop-shadow(1px 3px 8px rgb(109, 109, 109));
}

#splash-text{
    text-align: center;
    color: rgb(181, 159, 59);
    font-family: "Roboto ", sans-serif;
    font-size: 1rem;
    text-shadow:-1px 1px 0 #000,
                1px 1px 0 #000,
                1px -1px 0 #000,
                -1px -1px 0 #000;
    user-select: none;
    animation: splashText 0.9s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
    position: absolute;
    top: 39%;
    left:60%;
    transform: rotate(-25deg);
    z-index: 2;
}
#splash-text:hover{
    animation: splashText 0.3s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes splashText{
    50%{transform: scale(115%) rotate(-22deg);}
}


.infotab{
    border-radius: 0.5em;
    padding: 0.3em 2em 1.5em;
    background-color: rgb(46, 44, 44);
    color: rgb(194, 194, 194);
    box-shadow: 0.1em 0.1em 0.3em black;
    min-width: 5rem;
    max-width: 16rem;
    min-height: 10rem;
    text-align: center;
    margin: auto;
    font-family: "Roboto Medium", sans-serif;
}
.infotab p {
    margin: 0.5em 0;
}

.infotab h2 {
    margin: 0.2em 0;
    font-size: 2rem;
    color: white;
}

.infotab table {
    margin:0 auto 1em;
}
.infotab td, th {
    padding: 0.1em 0.4em;
    text-align: left;
}
.infotab input[type=text] {
    background-color: rgb(26, 25, 25);
    color: whitesmoke;
    font-family: "Roboto Black", sans-serif;
    font-size: 1rem;
    text-align: center;
    border: solid rgb(26, 25, 25);
    border-radius: 4px;
    box-shadow: 0.1em 0.1em 0.3em black;
}
/* disables little arrows this is for chrome,opera,safari*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.infotab textarea {
    background-color: rgb(26, 25, 25);
    color: whitesmoke;
    font-family: "Roboto Black", sans-serif;
    font-size: 1rem;
    text-align: left;
    border: solid rgb(26, 25, 25);
    border-radius: 4px;
    box-shadow: 0.1em 0.1em 0.3em black;
    resize: vertical;
}

.infotab input[type=number] {
    background-color: rgb(26, 25, 25);
    color: whitesmoke;
    font-family: "Roboto Black", sans-serif;
    font-size: 1rem;
    text-align: center;
    border: solid rgb(26, 25, 25);
    border-radius: 4px;
    box-shadow: 0.1em 0.1em 0.3em black;
    width: 2.3rem;
    margin: 10px;
}
.infotab input[type=range] {
    text-align: center;
    box-shadow: 0.1em 0.1em 0.3em black;
    margin: 10px;
}
.infotab input[type=file] {
    background-color: rgb(31, 29, 29);
    border: 0px ; /* Green border */
    box-shadow: 0.1em 0.1em 0.3em black;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8rem;
    text-align: center;
    color: white;
    padding: 10px 0px; 
    margin: 12px 0px;
    cursor: pointer; 
    width: 100%; 
    display: block;
    transition: all 0.15s ease;
}
.settings-group{
    user-select: none;
    font-size: 1rem;
    padding: 0.5rem;
}

.settings-group h3{
    user-select: none;
    font-size: 2rem;
    padding: 0px;
    margin: 7px 0px;
    color: rgb(238, 238, 238);
}

.settings-group hr{
    border: 2px solid rgb(136, 136, 136);
    border-radius: 3px;
    margin: 20px 0px;
}
.settings-group a{
    color: white;
    border-radius: 3px;
}
.settings-group label{
    font-size: 1.3rem;
    color: #c2c2c2;
    border-radius: 3px;
}

.settings-group button {
    background-color: rgb(31, 29, 29);
    border: 0px ; /* Green border */
    box-shadow: 0.1em 0.1em 0.3em black;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1.2rem;
    color: white;
    padding: 10px 15px; 
    margin: 12px 0px;
    cursor: pointer; 
    width: 100%; 
    display: block;
    transition: all 0.15s ease;
}
/* Add a background color on hover */
.settings-group button:hover {
    filter: brightness(1.1);
    border-radius: 8px;
    box-shadow: 0.2em 0.2em 0.3em black;
    transform: scale(1.02);
}

.settings-group input[type=color]{
    background-color: rgb(45, 45, 46);
    box-shadow: 0.1em 0.1em 0.3em black;
    border: 1px solid rgb(45, 45, 46);
    border-radius: 6.5px;
    margin: 3px;
    padding: 5px;
    font-size: 2.5rem;
    font-weight: 700;
    height: 3.3rem;
    width: 3.3rem;
    transition: all 0.15s ease-out;
}
.settings-group input[type=color]:hover{
    box-shadow: 0.2em 0.2em 0.3em black;
}

 /* The switch - the box around the slider */
 .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #888888;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #424141;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #538d4e;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #538d4e;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  } 

#board{
    display: flex;
    align-items: center;
    flex-direction: column;
}

.box{
    user-select: none;
    border: 5px solid rgb(45, 45, 46);
    border-radius: 7px;
    margin: 2px;
    font-size: 2.5rem;
    font-weight: 700;
    height: 3.4rem;
    width: 3.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-family: "Droid Sans Mono",monospace;
    font-weight: 1000;
    color: whitesmoke;
    transition: all 0.15s ease-out;
}
.box:hover{
    border-radius: 8px;
    transform: scale(1.05);
}
@keyframes spin3d{
    50%{
        transform: rotate3d(0.8,0.6,0.1,360deg);
    }
}
.filled-box{
    height: 3.6rem;
    width: 3.6rem;
}
.filled-box:active {
    transform: scale(1.7);
    filter:  brightness(1.2) drop-shadow(0px 0px 5px rgb(109, 109, 109));
}

.row{
    display: flex;
}


.second-row {
    margin: 0.5rem 0;
}

.copy-button{
    user-select: none;
    color:rgb(238, 240, 241);
    font-size: 1rem;
    font-weight: 700;
    padding: 0.5rem;
    margin: 10px 2px;
    cursor: pointer;
    text-transform: uppercase;
    min-width: 2rem;
    min-height: 2.7rem;
    background-color: transparent;
    text-align: center;
    border: 2px rgb(209, 209, 209);
    border-radius: 3px;
    transition: all 0.15s ease;
}


.copy-button:hover{
    border-radius: 4px;
    background-color: rgb(78, 69, 69);
}
#keyboard-cont {
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
  
#keyboard-cont div {
    display: flex;
}


.keyboard-button {
    user-select: none;
    color:rgb(238, 240, 241);

    font-family: 'Droid Sans Mono', Courier, monospace;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 0.6rem;
    margin: 0 2px;
    cursor: pointer;
    text-transform: uppercase;
    min-width: 1rem;
    min-height: 1.9rem;
    background-color: rgb(143, 142, 142);
    text-align: center;
    border: 3px rgb(209, 209, 209);
    border-radius: 5px;
    transition: all 0.2s ease-out;
}

@keyframes keyboard-button-animation-hover {
    from {background-color: rgb(136, 136, 136);}
    to {background-color: rgb(165, 165, 165)}
}
.keyboard-button:hover{
    background-color: rgb(165, 165, 165);
    border-radius: 6px;
    transform: scale(1.05);
}
.keyboard-button:active{
    background-color: rgb(165, 165, 165);
    transform: scale(0.95);
}