html {
    height: 100%;
}

body {
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(9, 48, 87);
}

.main {
    position: absolute;
    width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(9, 48, 87);
}

.title {
    margin-bottom: 20px;
    margin-top: 50px;
    font-size: 40px;
    text-align: center;
    color: white;
    text-shadow: 10px 10px 10px black;
}

.container {
    width: 400px;
    height: 600px;
    border: none;
    border-radius: 20px;
    background-color: rgb(13, 62, 112);
    box-shadow: 10px 10px 20px black;
}

.section1 {
    display: flex;
}

.input {
    width: 320px;
    height: 50px;
    font-size: 40px;
    text-align: right;
    margin-top: 50px;
    margin-left: 5px;
    padding-right: 10px;
    padding-left: 10px;
    border: none;
    outline: none;
    background-color: rgb(13, 62, 112);
    color: white;
}

input::placeholder {
    color: rgb(185, 183, 183);
}

/* designing styles for the sidebar */

.sidebarBTN {
    margin-top: 50px;
    margin-left: 10px;
    color: white;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 20px;
    align-self: center;
    padding: 0;
    transition: all 0.15s ease-in-out;
    width: 34px;
    height: 34px;
    z-index: 500;
}

.sidebarBTN:hover {
    background-color: rgb(71, 95, 134);
}

.sideSection {
    transition: all .4s ease-out;
}

.sideSectionSTD1 {
    transform: translate3d(-302px, 12px, 0);
    opacity: 0;
}

.sideSectionSTD2 {
    transform: translate3d(-90px, 12px, 0);
    opacity: 1;
}

.SCIsideSectionSTD1 {
    transform: translate3d(-402px, 12px, 0);
    opacity: 0;
}

.SCIsideSectionSTD2 {
    transform: translate3d(-240px, 12px, 0);
    opacity: 1;
}

.sideSectionShow {
    z-index: 400;
}

.sidebar {
    border: 2px solid transparent;
    border-radius: 10px;
    background-color: rgb(8, 94, 151);
    width: 200px;
    height: 400px;
}

.Standard {
    display: block;
    width: 204px;
    background-color: transparent;
    margin: 50px 0 20px 0;
    height: 40px;
    font-size: 15px;
    color: white;
    background-color: rgb(47, 126, 190);
    border: none;
    cursor: pointer;
    transform: translateX(-2px);
}

.Standard:hover {
    background-color: rgb(61, 134, 194);
}

.Scientific {
    display: block;
    width: 204px;
    background-color: transparent;
    height: 40px;
    font-size: 15px;
    color: white;
    background-color: rgb(47, 126, 190);
    border: none;
    cursor: pointer;
    transform: translateX(-2px);
}

.Scientific:hover {
    background-color: rgb(61, 134, 194);
}

.keypad {
    border: none;
    height: 450px;
    margin: 40px 10px 0 20px;
    display: grid;
    grid-template-areas: "cell1 cell2 cell3 cell4"
        "cell5 cell6 cell7 cell8"
        "cell9 cell10 cell11 cell12"
        "cell13 cell14 cell15 cell16"
        "cell17 cell18 cell19 cell20"
        "cell21 cell22 cell23 cell24";
}

.keypad2 {
    border: none;
    height: 450px;
    margin: 40px 10px 0 20px;
    display: grid;
    grid-template-areas: "cell1 cell2 cell3 cell4 cell5 cell6 cell7 cell8"
        "cell9 cell10 cell11 cell12 cell13 cell14 cell15 cell16"
        "cell17 cell18 cell19 cell20 cell21 cell22 cell23 cell24"
        "cell25 cell26 cell27 cell28 cell29 cell30 cell31 cell32"
        "cell33 cell34 cell35 cell36 cell37 cell38 cell39 cell40"
        "cell41 cell42 cell43 cell44 cell45 cell46 cell47 cell48"
        "cell49 cell50 cell51 cell52 cell53 cell54 cell55 cell56";
}

.key {
    background-color: rgb(72, 109, 146);
    border-radius: 35px;
    border: none;
    width: 70px;
    height: 70px;
    margin: 2px;
    font-weight: bolder;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}

.key:hover {
    background-color: darkgray;
    width: 72px;
    height: 72px;
    border-radius: 36px;
    margin: 0;
}

/* for scientific section all new css design for content */

.sciContainer {
    width: 700px;
    height: 600px;
}

.sciInput {
    width: 600px;
}