html{
    font-size: 10px;
  }
  body {
      font-family: Inter,sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      color: var(--main-color);
      font-size: 16px;
      line-height: 20px;
      margin: 0px;
      background: #9E9E9E;
  }
  a, a:hover {
    text-decoration: none;
    transition: all ease-in .25s;
  }
  
  iframe {
    position: fixed;
    top: 70px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
  }
  
  #theme-switcher {
      position: sticky;
      top: 0;
      display: flex;
      z-index: 4;
      box-shadow: rgba(0, 133, 177, .2) 0 5px 60px;
      justify-content: center;
      align-items: center;
      gap: 3.5rem;
      padding: 1.5rem 0;
      background: #F0FBFF;
      font-size: 14px;
  }
  
  #theme-switcher label {
      margin-right: .8rem;
      font-weight: 500;
  }
  
  #theme-switcher select {
      appearance: none;
      --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
      background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
      background-repeat: no-repeat;
      background-position: right 1rem center;
      background-size: 19px 13px;
      height: 4rem;
      width: 20rem;
      border: 2px solid #00bfff;
      background-color: #fff;
      border-radius: 5px;
      text-indent: 5px;
      font-size: 13.5px;
  }

  .btn-wrap {
    position: absolute;
    right: 12px;
    top: 24px;
  }
  .btn {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    padding: 15px 20px;
    background: #00BFFF;
    border-radius: 16px;
    box-shadow: rgba(0, 191, 255, .4) 0 5px 30px;
  }
  .btn:hover,
  .btn:focus {
    box-shadow: none;
  }

  button{
    background-color: transparent;
    cursor: pointer;
    border: none;
  }

  .device {
    width: 30px;
    height: 28px;
    background-color: #A9B0B2;
    transition: background-color 0.2s;
  }

  #desktop {
    --svg-1: url('data:image/svg+xml,<svg width="30" height="28" viewBox="0 0 30 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 4C0 1.79086 1.79086 0 4 0H26C28.2092 0 30 1.79086 30 4V17C30 19.2092 28.2092 21 26 21H20.7232L22.1583 23.5116C23.3012 25.5116 21.8571 28 19.5536 28H10.4464C8.1429 28 6.6988 25.5116 7.84165 23.5116L9.2768 21H4C1.79086 21 0 19.2092 0 17V4ZM11.5803 21H18.4197L20.4219 24.5039C20.8028 25.1705 20.3214 26 19.5536 26H10.4464C9.67855 26 9.19715 25.1705 9.5781 24.5039L11.5803 21ZM4 2C2.89543 2 2 2.89543 2 4V14H28V4C28 2.89543 27.1046 2 26 2H4ZM28 16V17C28 18.1046 27.1046 19 26 19H4C2.89543 19 2 18.1046 2 17V16H28Z" fill="%23A9B0B2"/></svg>');
    -webkit-mask: var(--svg-1);
    mask: var(--svg-1);
  }

  #mobile {
    width: 19px;
    --svg-2: url('data:image/svg+xml,<svg width="19" height="28" viewBox="0 0 19 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 5.6C19 2.5072 16.5695 0 13.5714 0H5.42857C2.43046 0 0 2.5072 0 5.6V22.4C0 25.4928 2.43046 28 5.42857 28H13.5714C16.5695 28 19 25.4928 19 22.4V5.6ZM14.0237 1.89553C15.809 2.12512 17.1905 3.69613 17.1905 5.6V22.4C17.1905 24.4619 15.5702 26.1333 13.5714 26.1333H5.42857C3.42982 26.1333 1.80952 24.4619 1.80952 22.4V5.6C1.80952 3.69613 3.19105 2.12511 4.97633 1.89553C4.99135 3.42863 6.20074 4.66667 7.69048 4.66667H11.3095C12.7993 4.66667 14.0087 3.42863 14.0237 1.89553ZM12.2143 1.86667H6.78571C6.78571 2.38213 7.19078 2.8 7.69048 2.8H11.3095C11.8092 2.8 12.2143 2.38213 12.2143 1.86667Z" fill="%23A9B0B2"/></svg>');
    -webkit-mask: var(--svg-2);
    mask: var(--svg-2);
  }

  .device:hover,
  .device:active,
  .device.selected {
    background-color: #0074D9;
  }

  @media (max-width: 992px) {
    .btn-wrap {
      position: unset;
    }
    #theme-switcher select {
       width: 15rem;
    }
  }
  @media (max-width: 768px) {
      iframe {
        top: 80px;
      }
      #theme-switcher {
          padding: 10px 20px;
          gap: 1rem;
      }
      #theme-switcher div {
          width: 50%;
      }
      #theme-switcher select {
          width: 100%;
      }
      .btn {
        padding: 10px 20px;
        border-radius: 10px;
        display: inline-block;
        margin: 20px 0 0;
      }
      #theme-switcher label {
        font-size: 12px;
      }
  }
  @media (max-width: 576px) {
  }