body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    margin: 0;

    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;
}
:root {
  --primary-color: #005BFF;
  --bg-color: white;
  --secondary-color: #EFF3F6;
}

.app{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.mainContainer {

    width:320px;
    height:568px;

    padding:20px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:60px;

    box-sizing:border-box;
}

@media (orientation: landscape){

    .mainContainer{

        width:568px;
        height:320px;

        flex-direction:row;
        justify-content:center;
        align-items:center;

        gap:60px;

    }

}

.menu {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.controlContainer {
    display: flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
}

input[type="checkbox"]{
    accent-color:var(--primary-color);
}

.switch input{
  appearance:none;
  width:40px;
  height:22px;
  border-radius:22px;
  background:var(--secondary-color);
  position:relative;
}

.switch input:checked{
  background:var(--primary-color);
}

.switch input::before{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--bg-color);
  top:2px;
  left:2px;
  transition:0.3s;
}

.switch input:checked::before{
  transform:translateX(18px);
}

input[type="number"]{
    width:48px;
    height:28px;
    border-radius:14px;
    border:1px solid black;
    text-align:center;
    font-size:16px;

}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
    -webkit-appearance:none;
    margin:0;
}