@font-face {
      font-family: "Marvin";
      src: url("../fonts/Marvin-webfont.eot");
      src: url("../fonts/Marvin-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Marvin-webfont.woff2") format("woff2"), url("../fonts/Marvin-webfont.woff") format("woff"), url("../fonts/Marvin-webfont.ttf") format("truetype"), url("../fonts/Marvin-webfont.svg#marvinregular") format("svg");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      font-family: "Marvin", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.5em;
      border: none;
      box-sizing: border-box;
      background: #08f radial-gradient(#f1f9ff, #08f);
      color: #fff;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    body {
      min-height: 100vh;
    }

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    form {
      position: relative;
      display: block;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    h1 {
      font-size: 34px;
      line-height: 1.2em;
    }

    h2 {
      font-size: 28px;
      line-height: 1.2em;
    }

    h3 {
      font-size: 24px;
      line-height: 1.2em;
    }

    h4 {
      font-size: 22px;
      line-height: 1.2em;
    }

    h5 {
      font-size: 20px;
      line-height: 1.2em;
    }

    h6 {
      font-size: 18px;
      line-height: 1.2em;
    }

    a {
      color: #fff;
      position: relative;
      display: inline-block;
      text-decoration: none;
      transition: color .35s ease;
    }

    a:hover {
      color: #fff;
      transition-duration: .06s;
    }

    input:focus,
    select:focus {
      outline: 0;
      -webkit-tap-highlight-color: none;
    }

    div {
      position: relative;
    }

    span {
      display: inline;
      box-sizing: border-box;
    }

    code {
      font-family: Consolas;
      background: #f3f3f3;
      padding: 1px 10px;
      border-radius: 0.2em;
      -webkit-border-radius: 0.2em;
      -moz-border-radius: 0.2em;
    }

    .separator-xs {
      display: block;
      height: 10px;
      width: 100%;
    }

    .separator-sm {
      display: block;
      height: 20px;
      width: 100%;
    }

    .separator-md {
      display: block;
      height: 30px;
      width: 100%;
    }

    .separator-lg {
      display: block;
      height: 50px;
      width: 100%;
    }

    .card {
      box-sizing: border-box;
      vertical-align: top;
      margin-left: auto;
      margin-right: auto;
    }

    .centered {
      margin-left: auto;
      margin-right: auto;
    }

    .padded {
      padding: 35px 50px;
    }

    .rounded {
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
    }

    .more-rounded {
      border-radius: 20px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border: 5px solid rgba(255, 255, 255, 0.5);
      box-shadow: 2px 2px 5px 1px rgba(0, 98, 183, 0.33);
    }

    .filled {
      background: rgba(0, 136, 255, 0.7);
    }

    .full {
      width: calc(100% - 10px);
      max-width: 800px;
    }

    .two-thirds {
      width: 450px;
    }

    .half {
      width: calc(50% - 10px);
      max-width: 760px;
    }

    .third {
      width: 33.33%;
      max-width: 300px;
    }

    .quarter {
      width: 25%;
      max-width: 250px;
    }

    .block {
      display: block;
    }

    .inline-block {
      display: inline-block;
    }

    .clear {
      display: block;
      clear: both;
    }

    .hide {
      display: none;
    }

    .inner {
      width: 100%;
      max-width: 1070px;
      margin: 0 auto;
      text-align: left;
    }

    .light {
      position: absolute;
      background-image: url("https://www.online-dice.com/images/light.png");
      background-size: 100% 100%;
      background-repeat: repeat-x;
      background-position: 0 0;
      width: 100%;
      height: 100%;
    }

    #content {
      padding-bottom: 20px;
      background-repeat: repeat;
      background-image: url("https://www.online-dice.com/images/bg-lg.png");
      background-size: 500px;
    }

    #content .inner {
      padding: 110px 0 0 0;
    }

    #title {
      text-align: center;
      font-size: 64px;
    }

    #logo {
      filter: saturate(1.05) brightness(1.03);
    }

    #sub-title {
      text-shadow: -1px -1px 0 #08f, 1px -1px 0 #08f, -1px 1px 0 #08f, 3px 3px 0 #08f;
      letter-spacing: .06em;
      padding: 0 0 20px 0;
      text-align: center;
    }

    #dice-roll-box {
      text-align: center;
      background: rgba(0, 136, 255, 0.45);
      padding: 30px 15px;
    }

    #sub-title2 {
      text-shadow: -1px -1px 0 #08f, 1px -1px 0 #08f, -1px 1px 0 #08f, 3px 3px 0 #08f;
      letter-spacing: .02em;
      padding: 0;
      margin-bottom: 20px;
    }

    #num-select,
    #type-select,
    select {
      display: inline-block;
      width: calc(50% - 10px);
      padding: 8px 10px;
      margin: 15px 5px 10px 5px;
      border-radius: 0.25em;
      border: 3px solid #08f;
      font-size: 18px;
      background: #fff !important;
      font-family: "Marvin", Arial, sans-serif !important;
      color: #08f !important;
    }

    #roll-button {
      width: calc(100% - 10px);
      box-sizing: border-box;
      font-size: 22px;
      padding: 13px 0;
      margin-bottom: 10px;
      text-shadow: -1px -1px 0 #ca8a00, 1px -1px 0 #ca8a00, -1px 1px 0 #ca8a00, 2px 2px 0 #ca8a00;
      letter-spacing: 0.02em;
      background: rgb(255, 215, 0);
      background-image: linear-gradient(to bottom, rgb(255, 235, 0) 0%, rgb(255, 215, 0) 51%, rgb(255, 244, 188) 100%);
      background-size: auto 200%;
      border-top: 3px solid #fff;
      border-right: 3px solid rgba(255, 255, 255, 0.8);
      border-bottom: 3px solid rgba(255, 255, 255, 0.8);
      border-left: 3px solid rgba(255, 255, 255, 0.8);
      transition: 0.1s;
    }

    #roll-button:hover {
      background-size: auto 200%;
      background-position: bottom center;
    }

    .tabletop {
      padding: 10px 0;
    }

    .rounded-dice {
      background: #08f;
      border-radius: 20px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0);
    }

    .result {
      background: rgba(255, 255, 255, 1);
      width: calc(100% - 10px);
      max-width: 300px;
      margin: 0 auto 10px auto;
      padding: 10px 0;
      color: #08f;
      border: 3px solid #08f;
    }

    .section-title {
      margin-bottom: 20px;
      text-shadow: -1px -1px 0 #08f, 1px -1px 0 #08f, -1px 1px 0 #08f, 3px 3px 0 #08f;
      letter-spacing: 0.02em;
    }

    .section-text p,
    .blog-excerpt p {
      font-family: Arial, sans-serif;
      margin: 20px 0;
      line-height: 1.4em;
    }

    .blog-post {
      padding: 20px 25px;
      background: rgba(77, 172, 255, 0.9);
      box-shadow: 2px 2px 5px 1px rgba(0, 98, 183, 0.33);
    }

    .blog-title {
      font-size: 18px;
      margin-bottom: 20px;
    }

    .blog-title a {
      color: rgb(255, 235, 0);
    }

    .blog-title a:hover {
      color: rgb(255, 245, 0);
    }

    .blog-more-link a,
    a.button {
      font-family: "Marvin", Arial, sans-serif;
      text-align: center;
      color: #fff;
      background: rgb(255, 215, 0);
      background-image: linear-gradient(to bottom, rgb(255, 235, 0) 0%, rgb(255, 215, 0) 51%, rgb(255, 244, 188) 100%);
      background-size: auto 200%;
      width: 160px;
      padding: 7px 4px;
      text-shadow: -1px -1px 0 #ca8a00, 1px -1px 0 #ca8a00, -1px 1px 0 #ca8a00, 2px 2px 0 #ca8a00;
      letter-spacing: 0.02em;
      border-top: 1px solid #fff;
      border-right: 1px solid rgba(255, 255, 255, 0.5);
      border-bottom: 1px solid rgba(255, 255, 255, 0.5);
      border-left: 1px solid rgba(255, 255, 255, 0.5);
    }

    .blog-more-link a:hover,
    a.button:hover {
      background-position: bottom center;
    }

    #footer {
      letter-spacing: 0.02em;
      background: #002f59;
      padding: 35px 0 120px 0;
    }

    #footer .inner {
      text-align: center;
    }

    #footer a {
      margin: 0 7px;
      padding: 5px 3px;
    }

    .footer-menu-1,
    .footer-menu-2,
    .copyright {
      padding: 15px 0;
    }

    .copyright {
      font-size: 13px;
    }

    .loader {
      position: fixed;
      top: 0;
      z-index: 100;
      min-height: 480px;
      width: 100%;
      height: 100%;
      background: #08f radial-gradient(#d2ebfe, #08f);
      opacity: 1;
      -webkit-opacity: 1;
      display: block;
      z-index: 100000;
    }

    .loader-wrapper {
      display: block;
      width: 100%;
      height: 100%;
      background-repeat: repeat;
      background-image: url("https://www.online-dice.com/images/bg-lg.png");
      background-size: 500px;
    }

    .loader-title {
      text-shadow: -1px -1px 0 #08f, 1px -1px 0 #08f, -1px 1px 0 #08f, 3px 3px 0 #08f;
      letter-spacing: 0.02em;
      margin-bottom: 20px;
      visibility: hidden;
    }

    .loader.hide {
      visibility: hidden;
      opacity: 0;
      transition: visibility 0s 0.2s, opacity 0.2s linear;
    }

    .loader-loader {
      position: absolute;
      top: 40%;
      left: 50%;
      -webkit-transform: translate(-50%, -40%);
      transform: translate(-50%, -40%);
      text-align: center;
      cursor: default;
      pointer-events: none;
      width: calc(100% - 20px);
    }

    .white-dice {}

    #ad-box-top {
      text-align: center;
      margin-bottom: 10px;
      width: 100%;
      min-height: 250px;
    }

    #ad-box-left {
      position: relative;
      text-align: center;
      width: 300px;
      height: 600px;
      margin-right: 10px;
    }

    #ad-box-right {
      position: relative;
      text-align: center;
      width: 300px;
      height: 600px;
      margin-left: 10px;
    }

    #ad-box-bottom {
      text-align: center;
      margin-top: 20px;
      min-height: 250px;
    }

    .fixed-ad-top {
      z-index: 1000;
      position: fixed;
      top: 0;
      left: 0;
      height: 90px;
      text-align: center;
      width: 100%;
      background: rgba(255, 255, 255, 0);
      -webkit-overflow-scrolling: touch;
    }

    .fixed-ad-bottom {
      z-index: 1000;
      position: fixed;
      bottom: 0;
      left: 0;
      height: 90px;
      text-align: center;
      width: 100%;
      background: rgba(255, 255, 255, 0);
      -webkit-overflow-scrolling: touch;
    }

    .fixed-ad-bottom .fuse-slot,
    .fixed-ad-top .fuse-slot {
      transform: translate3d(0, 0, 0);
    }

    .fixed-ad-bottom,
    .fixed-ad-top,
    .fixed-ad-top .adsbygoogle,
    .fixed-ad-bottom .adsbygoogle {
      height: 90px;
      max-height: 90px;
    }

    #ad-box-footer {
      margin-bottom: 10px;
    }

    .close-top,
    .close-bottom {
      display: none;
    }

    @media only screen and (max-width:650px) {
      .pc-only {
        display: none !important;
      }

      .mob-only {
        display: block !important;
      }

      .light {
        display: none;
      }

      #dice-roll-box {
        padding: 0 15px 0 15px !important;
        background: none !important;
        border: none !important;
        border: unset !important;
        box-shadow: unset !important;
      }

      #num-select,
      #type-select,
      select {
        font-size: 18px !important;
        padding: 3px 8px !important;
        margin: 5px 5px 5px 5px;
        border: 2px solid #08f !important;
      }

      #roll-button {
        font-size: 20px !important;
        padding: 6px 0 !important;
        margin-bottom: 10px !important;
        border-top: 2px solid #fff;
        border-right: 2px solid rgba(255, 255, 255, 0.8);
        border-bottom: 2px solid rgba(255, 255, 255, 0.8);
        border-left: 2px solid rgba(255, 255, 255, 0.8);
      }

      .mt-20 {
        margin-top: 20px;
      }

      #content .inner {
        padding: 50px 0 0 0;
      }

      #title {
        line-height: 1em !important;
        font-size: 56px !important;
      }

      #logo {
        height: 40px;
      }

      #sub-title {
        font-size: 22px;
        padding-bottom: 40px;
      }

      #sub-title2 {
        font-size: 26px;
        padding: 10px 0;
        display: none;
      }

      .loader-title {
        font-size: 28px;
      }

      .result {
        font-size: 18px;
        padding: 8px 0;
      }

      .tabletop {
        padding: 0 0 5px 0;
      }

      .separator-sm {
        height: 10px;
      }

      .section-title {
        font-size: 24px;
      }

      #footer {
        padding: 20px 0 60px 0;
      }

      .padded {
        padding: 20px 15px;
      }

      .more-rounded {
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
      }

      .size-100 {
        font-size: 70px !important;
        width: 70px !important;
        height: 70px !important;
      }

      .size-100 i {
        width: 70px !important;
        height: 70px !important;
      }

      .rounded-dice {
        border-radius: 10px !important;
        -webkit-border-radius: 10px !important;
        -moz-border-radius: 10px !important;
      }

      #ad-box-top {
        display: block;
        min-height: 250px;
        max-height: 340px;
        overflow: hidden;
        width: 100%;
        margin: 0 auto 6px auto;
        text-align: center;
      }

      #ad-box-footer,
      #ad-box-bottom {
        min-height: 250px;
        width: 100%;
        margin: 0 auto 0 auto;
        text-align: center;
      }
    }

    @media only screen and (max-width:976px) {

      .fixed-ad-bottom .adsbygoogle,
      .fixed-ad-top .adsbygoogle {
        max-height: 50px !important;
        height: 50px !important;
      }

      .fixed-ad-bottom {
        display: block;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 -1px 2px rgba(0, 54, 100, 0);
        -webkit-box-shadow: 0 -1px 2px rgba(0, 54, 100, 0);
        -moz-box-shadow: 0 -1px 2px rgba(0, 54, 100, 0);
        min-height: 50px !important;
        max-height: 50px !important;
        height: auto !important;
        padding: 0 !important;
      }

      .fixed-ad-top {
        display: block;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 1px 2px rgba(0, 54, 100, 0);
        -webkit-box-shadow: 0 1px 2px rgba(0, 54, 100, 0);
        -moz-box-shadow: 0 1px 2px rgba(0, 54, 100, 0);
        min-height: 50px !important;
        max-height: 50px !important;
        height: auto !important;
        padding: 0 !important;
      }

      .close-top {
        display: block;
        position: absolute;
        bottom: -18px;
        right: 0;
        color: darkred;
        font-family: Arial, sans-serif;
        width: 28px;
        height: 16px;
        background: #fff;
        border-radius: 0 0 0 4px;
        line-height: 1em;
        padding: 2px 0;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
      }

      .close-bottom {
        display: block;
        position: absolute;
        top: -18px;
        right: 0;
        color: darkred;
        font-family: Arial, sans-serif;
        width: 28px;
        height: 16px;
        background: #fff;
        border-radius: 4px 0 0 0;
        line-height: 1em;
        padding: 2px 0;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
      }

      .close-bottom:hover,
      .close-top:hover {
        color: darkred !important;
      }
    }

    @media only screen and (max-width:650px) and (max-height:740px) {
      #sub-title {
        display: none !important;
      }
    }

    @media only screen and (max-width:650px) and (max-height:700px) {

      #num-select,
      #type-select,
      select {
        font-size: 18px !important;
        padding: 3px 8px !important;
      }

      #roll-button {
        font-size: 20px !important;
        padding: 6px 0 !important;
        margin-bottom: 10px !important;
      }

      #title {
        font-size: 56px !important;
        line-height: 1em !important;
      }

      .result {
        font-size: 18px !important;
        padding: 8px 0 !important;
      }
    }

    @media only screen and (max-height:634px) {
      #logo {
        height: 35px !important;
      }

      #num-select,
      #type-select,
      select {
        font-size: 16px !important;
        margin-bottom: 5px !important;
        padding: 2px 8px !important;
      }

      #roll-button {
        font-size: 18px !important;
        padding: 4px 0 !important;
        margin-bottom: 10px !important;
      }
    }

    @media only screen and (max-width:930px) {
      .pc-only {
        display: block;
      }

      .mob-only {
        display: none;
      }

      .full,
      .two-thirds,
      .half,
      .third,
      .quarter {
        display: block;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
      }

      #ad-box-bottom {
        width: 100%;
      }

      .fixed-ad-bottom {
        width: 100% !important;
        left: 0 !important;
      }
    }

    @media only screen and (max-width:1110px) {
      .pc-only {
        display: block;
      }

      .mob-only {
        display: none;
      }

      .full,
      .two-thirds,
      .half,
      .third,
      .quarter {
        display: block;
        margin-left: auto;
        margin-right: auto;
      }

      #ad-box-right {
        display: none
      }

      #ad-box-left {
        display: none
      }
    }

    @media only screen and (min-width:650px) and (max-width:1110px) {
      #dice-roll-box {
        padding: 30px 15px 30px 15px !important;
      }
    }

    @media only screen and (min-width:910px) {
      .pc-only {
        display: block;
      }

      .mob-only {
        display: none;
      }
    }

    @media only screen and (min-width:1390px) {
      .inner {
        text-align: center;
        width: 1380px;
        max-width: 1380px;
      }

      .two-thirds {
        margin-left: auto;
        margin-right: auto;
      }
    }

    @media only screen and (min-width:1420px) {
      .two-thirds {
        width: 650px;
      }
    }

    @media only screen and (min-height:900px) and (min-width:650px) {
      #sub-title2 {
        font-size: 28px;
      }
    }

    @media only screen and (max-height:900px) and (min-width:650px) {
      #content .inner {
        padding: 100px 0 0 0 !important;
      }

      #logo {
        height: 50px !important;
        font-size: 45px !important;
      }

      #title {
        font-size: 45px !important;
        margin-bottom: 5px !important;
      }

      h1 {
        line-height: 1em !important;
      }

      #sub-title {
        display: none !important;
      }

      #dice-roll-box {
        padding: 20px 15px !important;
      }

      #num-select,
      #type-select,
      select {
        padding: 5px 7px !important;
        margin: 5px 5px 0 5px !important;
      }

      #roll-button {
        padding: 7px 0 !important;
        font-size: 20px !important;
      }

      .size-100 {
        width: 80px !important;
        height: 80px !important;
        font-size: 80px !important;
      }

      .size-100 i {
        width: 80px !important;
        height: 80px !important;
      }

      .rounded-dice {
        border-radius: 12px !important;
        -webkit-border-radius: 12px !important;
        -moz-border-radius: 12px !important;
      }

      #ad-box-bottom {
        margin-top: 10px !important;
      }
    }

    @media only screen and (max-height:680px) and (max-width:650px) {

      .fixed-ad-bottom,
      .fixed-ad-bottom .adsbygoogle {
        display: none !important;
      }
    }

    @media only screen and (max-height:960px) and (min-width:1110px) {

      .fixed-ad-bottom,
      .fixed-ad-bottom .adsbygoogle {
        display: none !important;
      }
    }

    @keyframes shake {
      0% {
        transform: translate(1px, 1px) rotate(0deg);
      }

      10% {
        transform: translate(-1px, -2px) rotate(-1deg);
      }

      20% {
        transform: translate(-3px, 0px) rotate(1deg);
      }

      30% {
        transform: translate(3px, 2px) rotate(0deg);
      }

      40% {
        transform: translate(1px, -1px) rotate(1deg);
      }

      50% {
        transform: translate(-1px, 2px) rotate(-1deg);
      }

      60% {
        transform: translate(-3px, 1px) rotate(0deg);
      }

      70% {
        transform: translate(3px, 1px) rotate(-1deg);
      }

      80% {
        transform: translate(-1px, -1px) rotate(1deg);
      }

      90% {
        transform: translate(1px, 2px) rotate(0deg);
      }

      100% {
        transform: translate(1px, -2px) rotate(-1deg);
      }
    }

    .zoom-result {
      display: inline-block;
      transform-origin: center;
      animation: shake 0.1s;
      animation-iteration-count: 1;
    }

    .size-100 {
      font-size: 100px;
      width: 100px;
      height: 100px;
    }

    .size-100 i {
      width: 100px;
      height: 100px;
      display: block;
    }
    .loader .dice-wrapper i {
      animation: shake 0.5s infinite;
    }

    #tabletop .dice-wrapper i {
      animation: none !important;
    }

    .dice-wrapper {
      display: inline-block;
      line-height: 1;
      position: relative;
      margin: 0px;
      margin: 5px;
    }

    @font-face {
      font-family: "dicefont";
      src: url("../fonts/dicefont.eot");
      src: url("../fonts/dicefont.eot?#iefix") format("embedded-opentype"), url("../fonts/dicefont.woff") format("woff"), url("../fonts/dicefont.ttf") format("truetype"), url("../fonts/dicefont.svg#dicefont") format("svg");
      font-weight: normal;
      font-style: normal;
    }

    @media screen and (-webkit-min-device-pixel-ratio:0) {
      @font-face {
        font-family: "dicefont";
        src: url("../fonts/dicefont.svg#dicefont") format("svg");
      }
    }

    [data-icon]:before {
      content: attr(data-icon);
    }

    [data-icon]:before,
    .df-d10-0:before,
    .df-d10-1:before,
    .df-d10-10:before,
    .df-d10-2:before,
    .df-d10-3:before,
    .df-d10-4:before,
    .df-d10-5:before,
    .df-d10-6:before,
    .df-d10-7:before,
    .df-d10-8:before,
    .df-d10-9:before,
    .df-d12-1:before,
    .df-d12-10:before,
    .df-d12-11:before,
    .df-d12-12:before,
    .df-d12-2:before,
    .df-d12-3:before,
    .df-d12-4:before,
    .df-d12-5:before,
    .df-d12-6:before,
    .df-d12-7:before,
    .df-d12-8:before,
    .df-d12-9:before,
    .df-d2-1:before,
    .df-d2-2:before,
    .df-d20-1:before,
    .df-d20-10:before,
    .df-d20-11:before,
    .df-d20-12:before,
    .df-d20-13:before,
    .df-d20-14:before,
    .df-d20-15:before,
    .df-d20-16:before,
    .df-d20-17:before,
    .df-d20-18:before,
    .df-d20-19:before,
    .df-d20-2:before,
    .df-d20-20:before,
    .df-d20-3:before,
    .df-d20-4:before,
    .df-d20-5:before,
    .df-d20-6:before,
    .df-d20-7:before,
    .df-d20-8:before,
    .df-d20-9:before,
    .df-d4-1:before,
    .df-d4-2:before,
    .df-d4-3:before,
    .df-d4-4:before,
    .df-d6-1:before,
    .df-d6-2:before,
    .df-d6-3:before,
    .df-d6-4:before,
    .df-d6-5:before,
    .df-d6-6:before,
    .df-d8-1:before,
    .df-d8-2:before,
    .df-d8-3:before,
    .df-d8-4:before,
    .df-d8-5:before,
    .df-d8-6:before,
    .df-d8-7:before,
    .df-d8-8:before,
    .df-dot-d6-1:before,
    .df-dot-d6-2:before,
    .df-dot-d6-3:before,
    .df-dot-d6-4:before,
    .df-dot-d6-5:before,
    .df-dot-d6-6:before,
    .df-small-dot-d6-1:before,
    .df-small-dot-d6-2:before,
    .df-small-dot-d6-3:before,
    .df-small-dot-d6-4:before,
    .df-small-dot-d6-5:before,
    .df-small-dot-d6-6:before,
    .df-solid-small-dot-d6-1:before,
    .df-solid-small-dot-d6-2:before,
    .df-solid-small-dot-d6-3:before,
    .df-solid-small-dot-d6-4:before,
    .df-solid-small-dot-d6-5:before,
    .df-solid-small-dot-d6-6:before {
      display: inline-block;
      font-family: "dicefont";
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      line-height: 1;
      text-decoration: inherit;
      text-rendering: optimizeLegibility;
      text-transform: none;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      font-smoothing: antialiased;
    }

    .df-d10-0:before {
      content: "\f100";
    }

    .df-d10-1:before {
      content: "\f101";
    }

    .df-d10-10:before {
      content: "\f102";
    }

    .df-d10-2:before {
      content: "\f103";
    }

    .df-d10-3:before {
      content: "\f104";
    }

    .df-d10-4:before {
      content: "\f105";
    }

    .df-d10-5:before {
      content: "\f106";
    }

    .df-d10-6:before {
      content: "\f107";
    }

    .df-d10-7:before {
      content: "\f108";
    }

    .df-d10-8:before {
      content: "\f109";
    }

    .df-d10-9:before {
      content: "\f10a";
    }

    .df-d12-1:before {
      content: "\f10b";
    }

    .df-d12-10:before {
      content: "\f10c";
    }

    .df-d12-11:before {
      content: "\f10d";
    }

    .df-d12-12:before {
      content: "\f10e";
    }

    .df-d12-2:before {
      content: "\f10f";
    }

    .df-d12-3:before {
      content: "\f110";
    }

    .df-d12-4:before {
      content: "\f111";
    }

    .df-d12-5:before {
      content: "\f112";
    }

    .df-d12-6:before {
      content: "\f113";
    }

    .df-d12-7:before {
      content: "\f114";
    }

    .df-d12-8:before {
      content: "\f115";
    }

    .df-d12-9:before {
      content: "\f116";
    }

    .df-d2-1:before {
      content: "\f117";
    }

    .df-d2-2:before {
      content: "\f118";
    }

    .df-d20-1:before {
      content: "\f119";
    }

    .df-d20-10:before {
      content: "\f11a";
    }

    .df-d20-11:before {
      content: "\f11b";
    }

    .df-d20-12:before {
      content: "\f11c";
    }

    .df-d20-13:before {
      content: "\f11d";
    }

    .df-d20-14:before {
      content: "\f11e";
    }

    .df-d20-15:before {
      content: "\f11f";
    }

    .df-d20-16:before {
      content: "\f120";
    }

    .df-d20-17:before {
      content: "\f121";
    }

    .df-d20-18:before {
      content: "\f122";
    }

    .df-d20-19:before {
      content: "\f123";
    }

    .df-d20-2:before {
      content: "\f124";
    }

    .df-d20-20:before {
      content: "\f125";
    }

    .df-d20-3:before {
      content: "\f126";
    }

    .df-d20-4:before {
      content: "\f127";
    }

    .df-d20-5:before {
      content: "\f128";
    }

    .df-d20-6:before {
      content: "\f129";
    }

    .df-d20-7:before {
      content: "\f12a";
    }

    .df-d20-8:before {
      content: "\f12b";
    }

    .df-d20-9:before {
      content: "\f12c";
    }

    .df-d4-1:before {
      content: "\f12d";
    }

    .df-d4-2:before {
      content: "\f12e";
    }

    .df-d4-3:before {
      content: "\f12f";
    }

    .df-d4-4:before {
      content: "\f130";
    }

    .df-d6-1:before {
      content: "\f131";
    }

    .df-d6-2:before {
      content: "\f132";
    }

    .df-d6-3:before {
      content: "\f133";
    }

    .df-d6-4:before {
      content: "\f134";
    }

    .df-d6-5:before {
      content: "\f135";
    }

    .df-d6-6:before {
      content: "\f136";
    }

    .df-d8-1:before {
      content: "\f137";
    }

    .df-d8-2:before {
      content: "\f138";
    }

    .df-d8-3:before {
      content: "\f139";
    }

    .df-d8-4:before {
      content: "\f13a";
    }

    .df-d8-5:before {
      content: "\f13b";
    }

    .df-d8-6:before {
      content: "\f13c";
    }

    .df-d8-7:before {
      content: "\f13d";
    }

    .df-d8-8:before {
      content: "\f13e";
    }

    .df-dot-d6-1:before {
      content: "\f13f";
    }

    .df-dot-d6-2:before {
      content: "\f140";
    }

    .df-dot-d6-3:before {
      content: "\f141";
    }

    .df-dot-d6-4:before {
      content: "\f142";
    }

    .df-dot-d6-5:before {
      content: "\f143";
    }

    .df-dot-d6-6:before {
      content: "\f18f";
    }

    .df-small-dot-d6-1:before {
      content: "\f183";
    }

    .df-small-dot-d6-2:before {
      content: "\f184";
    }

    .df-small-dot-d6-3:before {
      content: "\f185";
    }

    .df-small-dot-d6-4:before {
      content: "\f186";
    }

    .df-small-dot-d6-5:before {
      content: "\f187";
    }

    .df-small-dot-d6-6:before {
      content: "\f188";
    }

    .df-solid-small-dot-d6-1:before {
      content: "\f189";
    }

    .df-solid-small-dot-d6-2:before {
      content: "\f18a";
    }

    .df-solid-small-dot-d6-3:before {
      content: "\f18b";
    }

    .df-solid-small-dot-d6-4:before {
      content: "\f18c";
    }

    .df-solid-small-dot-d6-5:before {
      content: "\f18d";
    }

    .df-solid-small-dot-d6-6:before {
      content: "\f18e";
    }