body {
    background-color: rgb(26, 26, 29);
    color: white;
    font-family: Tahoma
}

button {
    background-color: black;
    color: rgb(19, 66, 142);
    font-size: 55px
}

#back {
    position: absolute;
    left: 0;
    top: 0
}

h1 {
    text-align: center
}

.output {
    background-color: white;
    color: black;
    font-size: 55px;
    width: 850px;
    height: 70px;
    position: absolute;
    left: 50%;
    top: 80px;
    transform: translateX(-50%);
    display: flex;
    align-items: center
}

.rectAdditSignsDown {
    width: 500px;
    height: 100px;
    position: absolute;
    bottom: 0;
    display: grid;
    grid-template: 1fr / repeat(5, 1fr)
}

.rectNumbers {
    width: 300px;
    height: 300px;
    position: absolute;
    bottom: 100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr)
}

.rectSigns {
    width: 200px;
    height: 300px;
    position: absolute;
    bottom: 100px;
    display: grid;
    grid-template: 1fr 1fr / 1fr 1fr
}

.rectAdditSignsUp {
    width: 500px;
    height: 100px;
    position: absolute;
    bottom: 400px;
    display: grid;
    grid-template: 1fr / repeat(5, 1fr)
}

#equal {
    grid-column: span 2
}

@media (min-width: 1200px) {
    #back {
        font-size: 40px
    }

    h1 {
        font-size: 40px;
        position: relative;
        bottom: 15px
    }

    .rectAdditSignsDown {
        left: calc(50% - 250px)
    }

    .rectNumbers {
        left: calc(50% - 250px)
    }

    .rectSigns {
        left: calc(50% + 50px)
    }

    .rectAdditSignsUp {
        left: calc(50% - 250px)
    }
}

@media (max-width: 1199px) {
    #back {
        font-size: 65px
    }

    h1 {
        font-size: 55px
    }
}