@font-face {
  font-family: 'mk999-icons';
  src:  url('fonts/mk999-icons.eot?xg3q05');
  src:  url('fonts/mk999-icons.eot?xg3q05#iefix') format('embedded-opentype'),
    url('fonts/mk999-icons.ttf?xg3q05') format('truetype'),
    url('fonts/mk999-icons.woff?xg3q05') format('woff'),
    url('fonts/mk999-icons.svg?xg3q05#mk999-icons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'mk999-icons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  float: none; /* plugin wp-statistics breaks all icons */

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-play-pause:before {
  content: "\e900";
}
.icon-pause:before {
  content: "\e901";
}
.icon-play:before { 
  content: "\e902";
}
.icon-volume-mute:before {
  content: "\e903";
}
.icon-volume-high:before {
  content: "\e904";
}
.icon-stop:before {
  content: "\e905";
}
.icon-fullscreen:before {
  content: "\e906";
}
.icon-fullscreen2:before {
  content: "\e907";
}


/**
 *  3D runes
 * 
 */
.lil-gui {
    --background-color: #303030;
    --text-color: #E5E5E5;
    --widget-color: #1D1D1D;
    --focus-color: #0D0D0D;
    --hover-color: #1D1D1D;
    --number-color: #C28831;
    --string-color: #C28831;
    --slider-knob-width: 3px;
    --width: 100%;
  }
  .lil-gui .controller.color input[type=text] {
    color: var(--string-color);
  }
  .lil-gui .controller {
    width: -webkit-fill-available;
  }
  .lil-gui .controller.function {
    width: 50%
  }
  .lil-gui.root > .children {
    display: flex;  
    flex-wrap: wrap;
  }
  .lil-gui button {
    background: var(--string-color);
  }
  .lil-gui.root > .title {
    display: none;
  }
  .mk999-rune-container {
    position: relative;
    justify-content: center;
    background-image: url("./img/human.svg");
    background-repeat: no-repeat;
    background-position: center 5px;
    background-size: 1300px 370px;
    display: flex;
    height: 360px;
    background-color: #e8dece;
  }
  .mk999-rune-fullscreen-button {
    cursor: pointer;
    background: #303030;
    position: absolute;
    color: #E5E5E5;
    width: 35px;
    height: 35px;
    bottom: 10px;
    right: 10px;
    border-radius: 50%;
    border: 0px;
    padding: 0px;
  }

/* modal dialog */
/* #runes3dModal { display: none; } */

#runes3dModal {
  position: absolute;
  display: none;
  /*
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  */
  width: 300px;
}

#runes3dModal.trio {
  width: 880px;
}

#runes3dModal.trio .runes3d-wrapper {
  display: flex;
  column-gap: 20px;
}

#runes3dModal.trio .runes3d-wrapper .runes3d-container {
  flex: 1;
}

.mk999-runes3d {
    background: #303030;
    border-radius: 10px;
    box-shadow: 2px 2px 6px #121212;
    padding: 20px;
    color: #e5e5e5;
    z-index: 100;
}

.mk999-runes3d h5 {
    color: white;
    margin-bottom: 0;
}

.mk999-runes3d-description {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 18px;
    margin-top: 10px;
    color: #e5e5e5;
}

.mk999-runes3d .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.runes3d-container {
    width: 260px;
}

.runes3d-container .mk999-rune-container {
    /*
    width: 100% !important;
    height: 360px !important;
    */
    /*background-color: #E8DECE;*/
    border-radius: 6px;
    margin: 6px 0px;
}

/* runes full list */
.runesList {
  display: flex;
  column-gap: 20px;
  row-gap: 20px;
  justify-content: space-evenly;
  margin-bottom: 2em;
}

@media (max-width: 700px) {
  .runesList {
    flex-wrap: wrap;
    
  }
  .runesList .runes-list-single {
    width:28%;
  }
  .runesList .runes-list-header {
    width:100%;
  }
}

.runes-list-header {
  font-weight: bold;
  margin: auto 0;
}

/* button in IRK */
#mk999-runes3d-button-show {
  background-image: url('bg-3d.svg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: unset;
  padding: 2em 4em;
}