/* Resistor */


.body {
    position: relative;
    top:7rem;
    width: 260px;
    height: 99px;
    background: tan;
    border-radius: 20px;
    transform: scale(2,2);
    margin: 0 auto;
    overflow: hidden;
  }
  .body:before {
    position: absolute;
    top:7rem;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    box-shadow: inset 0px 0px 20px #000;
    border-radius: 20px;
    
  }
  [class*="band"] {
    position: absolute;
    width: 30px;
    height: 100%;
    background: #000;
    overflow: hidden;
    box-shadow: inset 0px 10px 20px -10px #000, 
                inset 0px -10px 20px -10px #000;
  }
  .band:nth-child(1) { left: 35px; }
  .band:nth-child(2) { left: 85px; }
  .band:nth-child(3) { left: 135px; }
  .band:nth-child(4) { left: 200px; background: saddlebrown }
  .band:nth-child(3) .no-multiplier,
  .band:nth-child(4) .no-tolerance { display:none }
  .band:nth-child(3) .color { height: calc(100% / 12)!important}
  .band:nth-child(4) .color { height: calc(100% / 8) !important}
  
  .band:nth-child(1) .no-value,
  .band:nth-child(2) .no-value {
    display: none
  }
  
  #colors {
    position: absolute;
    width: 90px;
    background: transparent;
    font-size: 0;
    z-index: 9999;
    height: 100px;
    display: none;
  }
  .color {
    width: 60px;
    height: 10%
  }
  
  .out {
    top:7rem;
    position: relative;
    text-align: center;
    font-size: 36px;
    font-weight: 100;
    color: white;
    z-index: 20;
    transform: translateY(75px)
  }
  
  #black { background: black }
  #brown { background: saddlebrown }
  #red { background: red }
  #orange { background: darkorange }
  #yellow { background: yellow}
  #green { background: green }
  #blue { background: blue }
  #violet { background: purple }
  #gray { background: gray }
  #white { background: white }
  #gold { background: linear-gradient(45deg, #eab131 0%,#fa7800 17%,#fcf5ba 48%,#f78a00 84%,#eab131 100%) }
  #silver { background: linear-gradient(45deg, #dbdce2 8%,#f5f6f6 20%,#dbdce2 33%,#b8bac6 49%,#dddfe3 68%,#f5f6f6 87%,#dbdce2 95%) }
  @media screen and (max-width: 768px) {
    
    .body {
      position: relative;
      top:7rem;
      width: 160px;
      height: 66px;
      background: tan;
      border-radius: 20px;
      transform: scale(2,2);
      margin: 0 auto;
      overflow: hidden;
    }
    body:before {
      /* Adjustments for smaller screens */
      box-shadow: inset 0px 0px 10px #000; /* Adjust shadow size */
      border-radius: 10px; /* Adjust border radius */
    }
    [class*="band"] {
      position: absolute;
      width: 18px;
      height: 100%;
      background: #000;
      overflow: hidden;
      box-shadow: inset 0px 10px 20px -10px #000, 
                  inset 0px -10px 20px -10px #000;
    }
    .band:nth-child(1) { left: 20px; }
    .band:nth-child(2) { left: 50px; }
    .band:nth-child(3) { left: 80px; }
    .band:nth-child(4) { left: 120px; background: saddlebrown }
    .band:nth-child(3) .no-multiplier,
    .band:nth-child(4) .no-tolerance { display:none }
    .band:nth-child(3) .color { height: calc(100% / 12)!important}
    .band:nth-child(4) .color { height: calc(100% / 8) !important}
    
    .band:nth-child(1) .no-value,
    .band:nth-child(2) .no-value {
      display: none
    }
    
  }