.portal-system{
    background-image: url(https://www.simoneastore.com/themagicdoor/assets/wallpaper.svg);
    background-position: center;
    background-size: cover;
    width: 100%;
    margin: auto;
    position: relative;
  }

  .door-frame{
    aspect-ratio: 4/3;
    width: 60%;
    background-color: #8f8c8c;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.vertical-frame-left{
  height: 100%;
  width: 1.44%;
  background-color: #272121;
  background: linear-gradient(90deg, rgba(124, 107, 90, 1.00) 20%, #BDB9AE 50%, rgba(124, 107, 90, 1.00) 80%); 
  position: absolute;
  top: 0;
  left: 18.7%;
  z-index: 2;
}

.vertical-frame-right{
  height: 100%;
  width: 1.44%;
  background-color: #272121;
  background: linear-gradient(90deg, rgba(124, 107, 90, 1.00) 20%, #BDB9AE 50%, rgba(124, 107, 90, 1.00) 80%);  
  position: absolute;
  top: 0;
  right: 18.7%;
  z-index: 2;
  box-shadow: inset 0 0 -12px rgba(0, 0, 0, 0.5);
}

.vertical-frame-left-shadow-inside{
  height: 100%;
  width: 0.72%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(11, 11, 10, 0.00) 100%);
  position: absolute;
  top: 0;
  left: 20%;
  z-index: 1;
}

.vertical-frame-right-shadow-inside{
  height: 100%;
  width: 0.72%;
  background: linear-gradient(90deg, rgba(11, 11, 10, 0.00) 0%,rgba(0, 0, 0, 0.72)  100%);
  position: absolute;
  top: 0;
  right: 20%;
  z-index: 1;
}

.vertical-frame-left-shadow-outside{
  height: 100%;
  width: 0.72%;
  background: linear-gradient(90deg, rgba(11, 11, 10, 0.00) 0%,rgba(0, 0, 0, 0.72)  100%);
  position: absolute;
  top: 0;
  left: 18.3%;
  z-index: 1;
}

.vertical-frame-right-shadow-outside{
  height: 100%;
  width: 0.72%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(11, 11, 10, 0.00) 100%);
  position: absolute;
  top: 0;
  right: 18.3%;
  z-index: 1;
}

.switch-panel{
  background-color: #383534;
  width: 6.6667%;
  height: 27.6667%;
  position: absolute;
  top: 50%;
  left: 11.15%;
  transform: translate(-20%, -50%);
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}

.switch{
  width: 110%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
}

.switch-track{
  background-color: #312C2B;
  width: 14.49%;
  height: 41%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}

.switch-line{
  background-color: #181615;
  width: 3.99%;
  height: 34.3655%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 1px;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.6);
}

.switch-handle.off{
    background: linear-gradient(180deg, #7C6B5A 23.84%, #BDB9AE 49.55%, #7B6A59 79.55%);
    height: 8.8072%;
    width: 41.3655%;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 6px;
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.6);
    cursor: grab;  
    transition: 0.5s;
}

.switch-handle{
  background: linear-gradient(180deg, #7C6B5A 23.84%, #BDB9AE 49.55%, #7B6A59 79.55%);
  height: 8.8072%;
  width: 41.3655%;
  position: absolute;
  top: 61.1928%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 6px;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.6);
  cursor: grab;
  transition: 0.5s;
}

.switch-panel p{
  display: inline-block;
  color: #ffffff;
  font-family: 'Tilt Neon', cursive;
  font-size: 25%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50% , -50%);
}

p.on-switch{
  top: 85%;
  transform: translate(-50% , -50%);
  text-shadow:
  0 0 3px #6e6a6a,
  0 0 7px #9e9999,
  0 0 12px #756f6f,
  0 0 12px #414441,
  0 0 13px #767c74,
  0 0 15px #393b38,
  0 0 22px #747973,
  0 0 25px #2d2e2c;
}

p.off-switch{
  top: 15%;
  transform: translate(-50% , -50%);
  text-shadow:
  0 0 3px #6e6a6a,
  0 0 7px #9e9999,
  0 0 12px #756f6f,
  0 0 12px #414441,
  0 0 13px #767c74,
  0 0 15px #393b38,
  0 0 22px #747973,
  0 0 25px #2d2e2c;
}

p.on-switch.ready{
  top: 85%;
  transform: translate(-50% , -50%);
  text-shadow:
  0 0 3px #cfffd8,
  0 0 7px #cfffd8,
  0 0 12px #cfffd8,
  0 0 12px #72C95C,
  0 0 13px #72C95C,
  0 0 15px #72C95C,
  0 0 22px #72C95C,
  0 0 25px #72C95C;
  animation: flickerOn 3s infinite alternate;     
}

p.off-switch.ready{
  top: 15%;
  transform: translate(-50% , -50%);
  text-shadow:
  0 0 3px #ffdff8,
  0 0 7px #ffdff8,
  0 0 12px #ffdff8,
  0 0 12px #E0618F,
  0 0 13px #E0618F,
  0 0 15px #E0618F,
  0 0 22px #E0618F,
  0 0 25px #E0618F;
  animation: flickerOff 3s infinite alternate;     
}

.button-panel{
    background-color: #383534;
    width: 3.75%;
    height: 27.6667%;
    position: absolute;
    top: 50%;
    right: 12%;
    transform: translate(-20%, -50%);
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  }
  
  .button-one{
    background: radial-gradient(50.15% 49.85% at 50.15% 50.15%, #888484 24.58%, rgba(27, 24, 24, 0.70) 100%);
    width: 76%;
    height: 22.8916%;
    border-radius: 100%;
    position: absolute;
    top: 5.6225%;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
  }
  
  .button-two{
    background: radial-gradient(50.15% 49.85% at 50.15% 50.15%, #888484 24.58%, rgba(27, 24, 24, 0.70) 100%);
    width: 76%;
    height: 22.8916%;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
  }
  
  .button-three{
    background: radial-gradient(50.15% 49.85% at 50.15% 50.15%, #888484 24.58%, rgba(27, 24, 24, 0.70) 100%);
    width: 76%;
    height: 22.8916%;
    border-radius: 100%;
    position: absolute;
    bottom: 5.6225%;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
  }

  .decor-ring{
    background-color: #575D61;
    width: 66.6667%;
    height: 66.6667%;
    border-radius: 100%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .the-button{
    background: radial-gradient(50% 50.00% at 50% 50.00%, #4DF572 61.67%, #242222 100%);
    width: 89.4737%;
    height: 89.4737%;
    border-radius: 100%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .button-one .the-button{
    background: radial-gradient(50% 50.00% at 50% 50.00%, #4DF572 61.67%, #242222 100%);
  } 

  .button-two .the-button{
    background: radial-gradient(50% 50.00% at 50% 50.00%, #E8EB4D 61.67%, #242222 100%);
} 

  .button-three .the-button{
    background: radial-gradient(50% 50.00% at 50% 50.00%, #4D79EB 61.67%, #242222 100%);
  }

  .button-one .pressed{
    background: radial-gradient(50% 50.00% at 50% 50.00%, #3fc55c 30.77%, #242222 97.19%);
  } 

  .button-two .pressed{
    background: radial-gradient(50% 50.00% at 50% 50.00%, #cacc42 30.33%, #242222 97.19%);
} 

  .button-three .pressed{
    background: radial-gradient(50% 50.00% at 50% 50.00%, #4C79EA 28.44%, #242222 97.19%);
  }

  .button-one .inactive{
    background: radial-gradient(50% 50.00% at 50% 50.00%, #798877 52.71%, #272121 100%);
    cursor: no-drop;
  } 

  .button-two .inactive{
    background: radial-gradient(50% 50.00% at 50% 50.00%, rgb(141, 141, 124) 50.62%, #272121 100%); 
    cursor: no-drop;

  } 

  .button-three .inactive{
    background:  radial-gradient(50% 50.00% at 50% 50.00%, #777E88 43.85%, #272121 100%);
    cursor: no-drop;

  }