*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
button{
    border-radius: 5pt;
}
button:hover{
    box-shadow: inset 0 -100px 0 0 rgba(85, 85, 85, 0.5);
    transition-duration: 0.75s;
    transition-timing-function: ease-in;
}

body{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(33, 33, 33);
    padding: 5%;
}

.header{
    height: auto;
    width: 60%;
}

.title{
    font-size: 200%;
    text-align: center;
    font-weight: bold;
    color: rgb(240, 240, 240);
    font-family: century gothic;

    margin: auto;
    width: 100%;
    position: relative;
}
/* .content{

} */

.menu{
    display: flex;
    flex-direction: column;
    align-content: center;
    width: 100%;
    margin: auto;
    background-color: rgb(28, 28, 28);
    padding: 5%;
    border-radius: 5pt;
}

.menu_text{
    font-size: 150%;
    text-align: center;
    font-weight: bold;
    color: rgb(240, 240, 240);
    font-family: century gothic;

    margin: auto;
    width: 50%;
    position: relative;
}
#operations{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin: auto;
}

.operation_button{
    background-color: #d4d4d4;
    font-size: 100%;
    font-weight: bold;
    width: 20%;
    height: 40pt;
    color: #303030;
    margin-left: 2.5%;
    margin-left: 2.5%;
    margin-top:1.5%;
    margin-bottom: 1.5%;
    border: none;
}
.operation_button:hover{
    width: 22%;
    height: 44pt;
    transition-timing-function: ease-in-out;
    transition-duration: 0.5s;
}
.menu_button{
    background-color: #e5e5e5;
    color: #303030;
    font-size: 100%;
    font-weight: bold;
    width: 100%;
    height: 50pt;
    margin-top:1.5%;
    margin-bottom: 1.5%;
    border: none;
}
.input_cbxTxt{
    background-color: rgba(60, 60, 60, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    margin-top: 10pt;
    padding: 5pt;
}
.cbx_signed{
    display: flex;
    flex-direction: row;
    height: 25pt;
    width:90pt;
    margin-left: 5pt;
}
.cbx_input{
    width: 20pt;
    height: 20pt;
    margin-top:5%;
    accent-color: rgb(99, 99, 99);
}
.input_text{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 5%;
    margin-bottom: 5%;
}
.input_text_vertical{
    display: flex;
    flex-direction: column;
    align-content: center;
}
#operation_symbol{
    width: 5%;
}
.text_input{
    font-size: 150%;
    font-weight: bold;
    width: 100%;
    height: 50pt;
    margin-top:5%;
    margin-bottom: 5%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    text-align: center;
}

.text_input_converter{
    width: 95%;
    margin-top: 2pt;
}
.output{
    background-color: rgb(232, 232, 232);
    font-family: century gothic;
    font-size: 150%;
    font-weight: bold;
    width: 100%;
    height: 50pt;
    margin-bottom: 5%;
    margin-left: 10%;
    margin-right: 2.5%;
    text-align: center;
}

.footer_text{
    font-size: 12px;
    text-align: center;
    font-weight: bold;
    color: rgb(141, 141, 141);
    font-family: century gothic;

    margin: auto;
    width: 100%;
    height: auto;
    position: relative;
}