body {
    margin-left: 10px;
}

.btnGen {
    margin: 3px;
    border: 1px solid black;
    font-size: 30px;
    padding: 15px 15px;
    width: 2em;
    color: black;
    background-color: #46b5ff;
    font-family: 'Recursive', sans-serif;
    border-radius: 8px;
}

#calc {
    font-size: 30px;
    font-family: 'Recursive', sans-serif;
    color: black;
    margin-bottom: 5px;
    margin-top: 10px;
    margin-left: -10px;
}

.calcInputBlue {
    padding: 0px;
    margin: 0px;
}

.calcBlue {
    background-color: #0086cb;
}

.calcRed {
    background-color: #9b0000;
}

.calcGreen {
    background-color: #009624;
}

.calcYellow {
    background-color: #c7a500;
}

.calcSilver {
    background-color: #707070;
}

.calcDark {
    background-color: #010101;
}

.calcInputBlue .btnGen {
    background-color: #46b5ff;
}

.calcInputBlue .btnGen:hover {
    background-color: #85e7ff;
}

.calcInputRed .btnGen {
    background-color: #d50000;
}

.calcInputRed .btnGen:hover {
    background-color: #ff5131;
}

.calcInputGreen .btnGen {
    background-color: #00c853;
}

.calcInputGreen .btnGen:hover {
    background-color: #5efc82;
}

.calcInputYellow .btnGen {
    background-color: #ffd600;
}

.calcInputYellow .btnGen:hover {
    background-color: #ffff52;
}

.calcInputSilver .btnGen {
    background-color: #9e9e9e;
}

.calcInputSilver .btnGen:hover {
    background-color: #cfcfcf;
}

.calcInputDark .btnGen {
    background-color: #212121;
    color: white;
}

.calcInputDark .btnGen:hover {
    background-color: #484848;
}

.colorSelect {
    padding-top: 10px;
    outline: none;
}

.btnColor {
    width: 5em;
    height: 5em;
    font-family: 'Recursive', sans-serif;
    border-radius: 50%;
    outline: none;
}

#red {
    height: 50px;
    width: 50px;
    background: #d50000;
    background: -moz-linear-gradient(180deg, #ff5131 50%, #d50000 51%);
    background: -webkit-linear-gradient(180deg, #ff5131 50%, #d50000 51%);
    background: linear-gradient(180deg, #ff5131 50%, #d50000 51%);
    outline: none;
}

#green {
    height: 50px;
    width: 50px;
    background: #00c853;
    background: -moz-linear-gradient(180deg, #5efc82 50%, #00c853 51%);
    background: -webkit-linear-gradient(180deg, #5efc82 50%, #00c853 51%);
    background: linear-gradient(180deg, #5efc82 50%, #00c853 51%);
    outline: none;
}

#blue {
    height: 50px;
    width: 50px;
    background: #46b5ff;
    background: -moz-linear-gradient(180deg, #85e7ff 50%, #46b5ff 51%);
    background: -webkit-linear-gradient(180deg, #85e7ff 50%, #46b5ff 51%);
    background: linear-gradient(180deg, #85e7ff 50%, #46b5ff 51%);
    outline: none;
}

#yellow {
    height: 50px;
    width: 50px;
    background: #ffd600;
    background: -moz-linear-gradient(180deg, #ffff52 50%, #ffd600 51%);
    background: -webkit-linear-gradient(180deg, #ffff52 50%, #ffd600 51%);
    background: linear-gradient(180deg, #ffff52 50%, #ffd600 51%);
    outline: none;
}

#silver {
    height: 50px;
    width: 50px;
    background: #9e9e9e;
    background: -moz-linear-gradient(180deg, #cfcfcf 50%, #9e9e9e 51%);
    background: -webkit-linear-gradient(180deg, #cfcfcf 50%, #9e9e9e 51%);
    background: linear-gradient(180deg, #cfcfcf 50%, #9e9e9e 51%);
    outline: none;
}

.darkTheme {
    margin-left: 10px;
    font-family: 'Recursive', sans-serif;
}

.dark-mode {
    background-color: black;
    color: white;
}

.margin-custom {
    margin-top: 15px;
    margin-left: 10px;
}

.margin-custom2 {
    margin-left: 10px;
}

.custom-control-input:checked~.custom-control-label.dark::before {
    background-color: #353535;
}

.custom-radio {
    font-family: 'Recursive', sans-serif;
}

.custom-control-input~.custom-control-label::before {
    border: solid #2e2e2e7c 2px;
}