GDBrowser/assets/css/iconkit.css

@import url('https://fonts.googleapis.com/css?family=Roboto');
@font-face {font-family: Oxygene2; src: url('https://gdcolon.com/assets/Oxygene2.ttf')}

.gdButton {
  cursor: pointer;
  z-index: 1;
  user-select: none;
}

.gdButton:active {
  transition-duration: 0.07s;
  transition-timing-function: ease-in-out;
  transform: scale(1.08);
}

body {
  background-color: 555555;
}

p {
  font-family: "Roboto";
  font-size: 18px;
}

h2 {
  font-family: "Roboto";
  font-weight: normal;
  font-size: 20px;
}

h3 {
  font-family: "Roboto";
  font-weight: bold;
  font-size: 20px;
}

.hidden {
  display: none;
}

.small {
  font-size: 16px
}

.smaller {
  font-size: 14px;
}

.bigger {
  font-size: 25px;
}

.noMargin {
  margin-bottom: 0px;
}

.blankButton {
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  background: none;
  cursor: pointer;
  border: none;
}

input[type=checkbox] {
  margin-left: 7px;
  transform: scale(1.2) translateY(1px);
  cursor: pointer;
}

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

 input:not([type='checkbox']), select {
  padding: 7 7 7 7;
  font-size: 14px;
  width: 15%;
  border-style: 1px inset black;
 }

 textarea {
  border-radius: 5px;
  padding: 7 7 7 7;
  width: 600px;
  height: 10%;
  max-width: 80%;
  min-width: 30%;
  min-height: 5%;
  max-height: 30%;
  text-align: left;
  font-size: 18px;
  font-family: "Roboto";
}

#textbox {
  text-transform: uppercase;
  font-size: 22px;
}

.oxygene {
  font-family: Oxygene2;
}

.buttonLink {
  border: none;
  outline: none;
  background: none;
  font-family: "Roboto";
  cursor: pointer;
  color: rgb(85, 26, 139);
}

.center {
  text-align: center;
}

.iconimage {
  height: 60px;
}

.generate {
  width: 75vw;
  display: block;
  padding: 5px 0 30px 0;
  margin: 10px auto 30px auto;
  background-color: rgb(235, 235, 235);
  border-radius: 8px;
}

.configbox {
  width: 250px;
  display: inline-block;
}

.configbox input {
  width: 95%;
}

.configbox select {
  width: 95%;
  text-transform: capitalize;
}

#url {
  width: 500px;
  max-width: 90%;
}

#resize {
  width: 250px;
  max-width: 90%;
}

#symbols, .subdiv {
  background-color: rgb(219, 219, 219);
  margin: 10px auto 10px auto;
  width: 65%;
  padding: 10 10 10 10;
  overflow: auto;
  white-space: nowrap;
  border-radius: 8px; 
}

#symbols p {
  font-size: 230%;
  font-family: Oxygene2;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

#accountInfo {
  width: 50%;
}

#accountInfo p {
  text-align: left;
  line-height: 23px;
  margin-left: 10px;
  font-size: 18px;
}

.char {
  border: 1px solid black;
  background-color: white;
  border-radius: 2px;
  color: black;
  width: 55;
  height: 55;
  margin: 3px 10px 3px 10px;
  cursor: pointer;
}

.char:hover {
  background-color: rgb(223, 223, 223);
  transition: background-color 0.15s;
}

.char:active {
  background-color: rgb(200, 200, 200);
}

#generate {
  font-family: "Roboto";
  border: transparent;
  background-color: #88FF33;
  box-shadow: 2px 2px 3px #66AA22;
  border-radius: 10px;
  color: black;
  padding: 10px 15px 10px 15px;
  cursor: pointer;
  font-size: 18px;
}

#generate:hover {
  background-color: rgb(133, 230, 65);
  transition: background-color 0.15s;
}

#generate:active {
  background-color: rgb(117, 211, 50);
}

.miniButton {
  font-family: "Roboto";
  border: transparent;
  background-color: #88FF33;
  box-shadow: 1.5px 1.5px 2px #66AA22;
  border-radius: 10px;
  color: black;
  padding: 7px 9px 7px 9px;
  cursor: pointer;
  font-size: 14px;
}

.miniButton:hover {
  background-color: rgb(133, 230, 65);
  transition: background-color 0.15s;
}

.miniButton:active {
  background-color: rgb(117, 211, 50);
}

.iconKit {
  width: 800px;
  overflow-x: hidden;
  display: block;
  padding-bottom: 20px;
  margin: 0 auto 0 auto;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.iconKit button {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  border: 5px solid transparent;
}

.iconSelected {
  border-image: url('https://gdcolon.com/assets/gj_select.png') 10 stretch !important;
}

.iconTabButton, .glowToggle {
  margin: 0 5 0 5;
  transition: transform .1s ease-in-out;
}

.iconTabButton:active, .glowToggle:active {
  transform:scale(1.05)
}

#colors {
  width: 1000px;
  overflow-x: auto;
  padding: 10 10 10 10;
  background-color: rgba(0, 0, 0, 0.7);
}

#colors::-webkit-scrollbar, #iconKitParent::-webkit-scrollbar {
  width: 9px;
  height: 9px;
  background: rgba(0, 0, 0, 0.5); 
}

#colors::-webkit-scrollbar-thumb, #iconKitParent::-webkit-scrollbar-thumb {
  background: rgb(185, 185, 185); 
}

#iconKitParent {
  max-height: 210px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}

#iconKitParent div {
  margin-top: -5;
}

#col1, #col2 {
  display: flex;
}

#gdfloor {
  margin-bottom: 15px;
  margin-top: 0px;
  border: 0;
  height: 3px;
  width: 80%;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.menuButton {
  margin: 0 5 0 5;
  transition: transform .15s ease-in-out;
}

.menuButton:hover {
  transform:scale(1.1)
}

#iconprogressbar {
  background: rgba(0, 0, 0, 0.5); 
  height: 12px;
}

#iconloading {
  background: rgba(255, 255, 255, 0.5); 
  height: 12px;
  width: 0%;
}

.iconScroll::-webkit-scrollbar  {
  width: 0;
  background: transparent;
}

.blue {
  color: blue;
 }

 .white {
  color: white;
 }

.inline {
  display: inline;
}

.spin {
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
   animation: spin 2s linear infinite;
   mix-blend-mode: luminosity;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }