@font-face {
  font-family: 'Calculator';
  src: url('../fonts/Calculator.eot');
  src: local('☺'), url('../fonts/Calculator.woff') format('woff'), url('../fonts/Calculator.ttf') format('truetype'), url('../fonts/Calculator.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Galaktika';
  src: local('☺'), url('../fonts/Galaktika.woff') format('woff'), url('../fonts/Galaktika.ttf') format('truetype'), url('../fonts/Galaktika.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 1px 1px 25px 5px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  /* Важно: чтобы можно было кликать по инпутам */
  z-index: 9999;
  /* Чтобы тень была поверх всего контента */
}

body {
  font-family: 'Galaktika';
  font-weight: bold;
  user-select: none;
  color: #DFDDD9;
  transition: background-color 1s ease;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

output,
input::placeholder {
  font-family: 'Galaktika';
  font-size: 5vh;
  text-shadow: none;
  color: #EBF2EA;
}

.inputs {
  background: transparent;
  padding: 0 2vh;
  cursor: pointer;
  width: 90vw;
  font-family: 'Calculator';
  font-size: 5vh;
  letter-spacing: 0.5vw;
  border-radius: 5px;
  color: #DFDDD9;
}

/* Убираем стандартное оформление */
.custom-slider {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  /* Фон родителя */
  margin: 10px 0;
}

/* Трек (линия) */
.custom-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 12px;
  background: #1a1a1a;
  /* Темный фон для глубины */
  border-radius: 6px;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5), inset -1px -1px 2px rgba(255, 255, 255, 0.1);
}

/* Бегунок (ползунок) */
.custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #DFDDD9;
  /* Твой основной цвет текста */
  cursor: pointer;
  margin-top: -6px;
  /* Центрируем относительно трека */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 0 5px rgba(255, 255, 255, 0.3);
  border: 2px solid #555;
  transition: transform 0.1s ease;
}

/* Эффект при наведении и нажатии */
.custom-slider:hover::-webkit-slider-thumb {
  transform: scale(1.1);
  background: #ffffff;
}

.custom-slider:active::-webkit-slider-thumb {
  transform: scale(0.95);
  background: #CC8193;
  /* Твой акцентный цвет при нажатии */
}

/* Дублируем для Firefox, чтобы не сломалось */
.custom-slider::-moz-range-track {
  height: 12px;
  background: #1a1a1a;
  border-radius: 6px;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.custom-slider::-moz-range-thumb {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #DFDDD9;
  cursor: pointer;
  border: 2px solid #555;
}

button {
  margin: 1vh;
}

select {
  margin: 1vh;
  padding: 2vh;
  font-size: 3vh;
  font-family: 'verdana';
  cursor: pointer;
  background: transparent;
  width: 90vw;
  color: #DFDDD9;
  border-radius: 3px;
  box-shadow: inset 0px 0px 15px 2px rgba(0, 0, 0, 0.1);
}

label {
  font-size: 5vh;
  padding-left: 10px;
  padding-top: 10px;
  color: #0000008E;
}

option {
  font-size: 3vh;
  background: #224E66;
  font-family: 'verdana';
}


.labeOfGen {
  padding-left: 0px;
}

.body_calc {
  background: #224E66;
}

.body_ohms {
  background: #3F5232;
}

.body_trans {
  background: #524700;
}

.body_kdp {
  background: #52273E;
}

.body_spk {
  background: #523527;
}

.body_sine {
  background: #395153;
}

.user_fill {
  color: #aca;
}

.result_fill {
  color: #cac;
}

.error_fill {
  color: #e33;
}

#mode {
  margin: 5vh;
  width: 80px;
  scale: 2.2;
  translate: 0 -6px;
}

#disp3D {
  display: block;
  margin: 0 auto;
  cursor: move;
  /* Появится иконка руки, сразу поймешь, что клик работает */
  position: relative;
  z-index: 999;
}

#op1,
#op2 {
  font-family: 'Calculator';
  font-size: 6vh;
}

#otvet {
  font-size: 6vh;
}

.sbros,
#sbros,
#calculate_ohm,
#calculate_kdp,
#calculate_trans {
  padding: 2vh 3vh;
  margin: 3vh;
  font-family: 'Galaktika';
  width: 25vh;
  box-shadow: inset 0px 0px 15px 2px rgba(0, 0, 0, 0.05);
  border-radius: 9px;
  font-size: 5vh;
  letter-spacing: 2px;
}

.sbros:active,
#sbros:active,
#calculate_ohm:active,
#calculate_kdp:active,
#calculate_trans:active {
  text-shadow: 1px 1px 2px #CC8193, -1px -1px 2px #CC8193;
  box-shadow: inset 0px 0px 15px 2px rgba(0, 0, 0, 0.09);
  transition: all 0.1s ease-out;
}

.sine {
  color: #a78f7e;
}

#massage {
  color: #EBF2EA;
  padding: 1vh;
  margin: 1vh;
  text-align: center;
  letter-spacing: 3px;
}

.explanation,
p {
  color: #ebf2ea5a;
  padding: 2vh;
  /* margin: 2vh 4vh 0vh 4vh; */
  text-align: center;
  letter-spacing: 3px;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  line-height: 1.5;
  text-align: justify;
  max-width: 500px;
}

#nav {
  font-family: 'Galaktika';
  letter-spacing: 1vw;
  text-align: center;
  padding: 1vh;
  font-size: 6vh;
  text-shadow: 1px 1px 5px #CC8193A3, -1px -1px 5px #CC8193A3;
  box-shadow: none;
  transform: translateY(-1px);
}

#nav_0,
#nav_1,
#nav_2,
#nav_3,
#nav_4 {
  font-family: 'verdana';
  text-shadow: none;
  text-align: center;
}

@media screen and (orientation: landscape) and (min-aspect-ratio: 1/1) {

  #explanation,
  select {
    width: 60vw;
    max-width: 500px;
  }

  .inputs {
    width: 40vw;
    max-width: 500px;
    font-weight: normal;
  }

  .TVZ::placeholder,
  .ohm::placeholder,
  .KDP::placeholder,
  .spk::placeholder {
    letter-spacing: 1px;
    font-size: 4vh;
  }

  label {
    margin-left: 15vw;
    font-size: 6vh;
  }

  .labeOfGen {
    margin-left: 5vw;
  }

  canvas {
    width: 100%;
    /* Занимает всю ширину родителя */
    max-width: 300px;
    /* Чтобы на огромных мониторах не стал гигантским */
    aspect-ratio: 1 / 1;
    /* Магия CSS: всегда держит квадрат */
    display: block;
    /* margin: 0px auto; */
  }

  #op1,
  #op2,
  #otvet,
  #sbros,
  .sbros,
  #calculate_ohm,
  #calculate_kdp,
  #calculate_trans {
    font-size: 6vh;
  }

  #freq,
  #amplitude {
    width: 80vh !important;
    /* !important поможет, если стили конфликтуют */
    margin-top: 6vh;

  }

  .KDP,
  #sbros,
  .sbros,
  #calculate_ohm,
  #calculate_kdp,
  #calculate_trans {
    width: 35vh;
  }
}

@media screen and (orientation: portrait) {

  .TVZ,
  .ohm {
    width: 50vw;
  }

  .KDP {
    width: 40vw;
  }


  .spk {
    width: 40vw;
  }

  .TVZ::placeholder,
  .ohm::placeholder,
  .KDP::placeholder {
    letter-spacing: 1px;
    font-size: 5vw;
  }

  .spk::placeholder {
    font-size: 4vw;
  }

  .labeOfGen {
    margin-left: 0px;
  }

  .sbros,
  #sbros,
  #calculate_ohm,
  #calculate_kdp,
  #calculate_trans {
    padding: 2vh 3vw;
    width: 35vw;
    font-size: 7vw;
    letter-spacing: 2px;
  }

  #nav {
    width: 80vw;
    font-size: 11vw;
  }
}

#freq,
#amplitude {
  width: 70vw;
  margin-top: 6vh;
}

/*
#224F66 BLUE
#3F5232 GREEN
#DFDDD9 WHITE
#524700 HAKI 
#CC8193 saddleBROWN

*/