* {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: #ffffff;
    cursor: pointer;
}

body {
    min-height: 100vh;
    background-color: #000000;
    background-image: url("./img/red_moon.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

h1 {
    text-align: center;
    padding: 10px;
    color: #800e0e;
}

main {
    text-align: center;
    padding: 5px;
}

main p {
    padding: 10px;
    font-size: 22px;
}

main input{
    color: #000000;
    font-weight: bold;
}

main p input[type=text]{
    color: #000000;
    font-weight: bold;
    width: 50px;
    cursor: initial;
}

#lbl_error_msg{
    color: #800e0e;
    font-size: 18px;
}

#canvas_figure {margin: 15px; background-color: #000000;}

#div_principal {
    display: inline-flex;
    justify-content: center;
    margin: 5px;
}

#div_principal ul {
    margin: auto 10px;
    vertical-align: middle;
}

#div_principal ul li{padding: 5px;}

#div_principal canvas{
    padding: 5px;
    border: 1px solid #000000;
    border-radius: 5px;
    box-shadow: 5px 5px 10px 5px rgba(141, 4, 4, 0.5);
}

.ul_figures {
    display: inline-flex;
    justify-content: center;
    margin: 2px;
}
.ul_figures input{
    color: #ffffff;
    padding: 10px;
    width: 100px;
    margin: 1px;
    border: 0px;
    border-radius: 5px;
    background: linear-gradient(180deg, #000000, #800e0e);
}

.ul_figures input:hover{
    background: linear-gradient(180deg, #3d3b3b, #800e0e88);
    border-radius: 5px;
}

.btn_style {
    padding: 7px 14px;
    width: 80px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    box-shadow: 2px 2px 5px 1px rgba(196, 196, 196, 0.5);
}

.c_white {background-color: #ffffff;}
.c_white:hover {background: #dad6d1be;}

.c_orange {background-color: #fc5f04; color: #000000;}
.c_orange:hover {background: #e68a0073;}

.c_red {background-color: #ff0000; color: #ffffff;}
.c_red:hover {background: #d118187c;}

.c_yellow {background-color: #ffd900; color: #000000;}
.c_yellow:hover {background: #ffee0059;}

.c_all {background: linear-gradient(45deg, #000000, #ff0000, #fff000, #fc5f04, #ffffff); color: #000000;}
.c_all:hover {background: linear-gradient(45deg, #1a191973, #d1181865, #ffee00a2, #e68a0062, #dad6d149);}