@font-face {
    font-family: 'Calculator';
    src: url('font/Digital-7_niew.ttf')  format('truetype');
}

@font-face {
    font-family: 'GOST_A';
    src: url('font/GOST2.304-81typeA.ttf') format('truetype');
}

.screen{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row; 
}

.corpus{
    display: grid;
    justify-content: center;
    align-items: center;
    margin: 50px, auto;
    width: 550px;
    height: 900px;
    border-radius: 20px;
    background: #cfcfd1;
    color:  #000;
    font-family: 'GOST_A';
    padding: 18px;
    box-shadow: 5px 5px 5px #4f4f4f;
}

.name{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row; 
}

.calc{
    display: grid;
    justify-content: center;
    margin: 50px, auto;
    width: 500px;
    height: 850px;
    border-radius: 20px;
    background: #FAFAFA;
    color:  #2c2d41;
    font-family: 'GOST_A';
    padding: 28px;
    
}




.calc-screen{
    height: 200px;
    width: 470px;
    padding: 10px;
    position: absolute; /* Позиционируем относительно окна браузера */
    top: 55px;          /* Отступ сверху */
    left: 585px;          /* Отступ слева */
    background: #2a2c2e;
    border-radius: 5%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;

}



.output-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    width: 100%;
}


.space-1 {
    display: flex;
    flex-direction: row; /* Расположение в строку */
    justify-content: space-between; /* Пробел между элементами */
    width: 80%;/* Высота для отступа между первым и вторым элементами */
}

.sign-output{
    display: flex;
    position: absolute; /* Позиционируем относительно окна браузера */
    top: 50px;          /* Отступ сверху */
    left: 5px;          /* Отступ слева */
    color: #2b91a3;
    font-size: 6rem; /* Размер шрифта для основного вывода */
    font-family: Calculator;
    justify-content: end;
    margin: 0;
}

.main-output{
    position: absolute; /* Позиционируем относительно окна браузера */
    top: 50px;          /* Отступ сверху */
    left: 40px;          /* Отступ слева */
    color: #2b91a3;
    font-size: 6rem; /* Размер шрифта для основного вывода */
    font-family: Calculator;
    margin: 0;
    justify-content: center;
    text-align: center;
}

.buttons{
    position: absolute; /* Позиционируем относительно окна браузера */
    top: 440px;          /* Отступ сверху */
    left: 615px;          /* Отступ слева */
    display: grid;
    grid-template-columns: repeat(5, auto);
    grid-template-rows: repeat(6, auto); 
    gap: 20px; 
    justify-items: center;
}
.btn.grad{
    width: 200%;
    border-radius: 5%;
}
.btn{
    height: 70px;
    width: 70px;
    background: #d3d3d5;
    color: #FFFFFF;
    border-radius: 15%;
    text-align: center;
    line-height: 70px;
    font-size: 2rem;
    cursor: pointer;
    user-select: none;
}

.btn blue{
    height: 70px;
    width: 70px;
    background: #ADD8E6;
    border-radius: 15%;
    text-align: center;
    line-height: 70px;
    font-size: 2rem;
    cursor: pointer;
    user-select: none;
}

.btn.divide{
    font-family: Arial, Helvetica, sans-serif;
}
.btn.ndiv{
    font-family: Arial, Helvetica, sans-serif;
}
.btn.nmul{
    font-family: Arial, Helvetica, sans-serif;
}

.btn.nmin{
    font-family: Arial, Helvetica, sans-serif;
}

.btn.nplus{
    font-family: Arial, Helvetica, sans-serif;
}


.batn.bg-brown{
    position: absolute; /* Позиционируем относительно окна браузера */
    top: 40px;          /* Отступ сверху */
    left: 595px;          /* Отступ слева */
    height: 90px;
    width: 450px;
    /*background: #5b4b42;*/
    color: #443732;
    border-radius: 15%;
    text-align: center;
    line-height: 70px;
    font-size: 6rem;
    
    user-select: none;
    
}

.batn.grey{
    position: absolute; /* Позиционируем относительно окна браузера */
    top: 310px;          /* Отступ сверху */
    left: 600px;          /* Отступ слева */
    display: inline-block;    
    height: 55px;
    width: 450px;
    background: #000000;
    color: #FFFFFF;
    text-align:center;
    font-size: 3rem;
    
    user-select: none;
}

.btn:hover{
    filter: brightness(120%);
}

.btn:active{
    filter: brightness(90%);
}

.btn.bg-white{
    background: #f7f7f7;
}

.btn.bg-black{
    background: #000000;
}

.btn.bg-blue{
    background: #ADD8E6;
}

.btn.bg-red{
    background: #cd6759;
}

.btn.instr{
    height: 70px;
    width: 210px;
    background: #666668;
    border-radius: 15%;
    text-align: center;
    line-height: 70px;
    font-size: 2rem;
    cursor: pointer;
    user-select: none;
    font-family: 'Calculator';
}

.switch {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 35px;
}

/* Прячем чекбокс */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Слайдер */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #403a37;
    transition: .4s;
    border-radius: 10%;
    display: flex; /* Используем flex для центровки текста */
    align-items: center; /* Центровка по вертикали */
    justify-content: space-between; /* Разделяем текст */
    padding: 0 5px; /* Отступы */
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 13px;
    display: flex;
    align-items: end;
    background-color: #2a2928;
    transition: .4s;
    border-radius: 15%;
}

/* Передвигаем кружок при включении */
input:checked + .slider:before {
    transform: translateX(45px);
}