/* index.html */

:root {
    --color-dark: rgb(0, 0, 0);
    --color-dark2: rgb(5, 5, 5);
    --color-white: #fff;
    --color-tan: tan;
    --color-yellow_green: yellowgreen;
    --color-yellow: rgba(255, 255, 0, 0.89);
    --color-chartreuse: chartreuse;
    --color-blue: rgb(27, 27, 173);
    --color-blue2: cadetblue;
    --color-red: rgb(146, 22, 17);
    --color-grey: rgb(119, 117, 117);
    --color-grey2: rgb(163, 159, 159);
}

body {
    font-family: 'Poetsen One';
    font-family: 'Poiret One';
    font-family: 'Lora';
    background-color: var(--color-dark);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 50px;
}

#resultado { cursor: grab; width: 85%; }
h1 {
    color: var(--color-tan);
    text-align: center;
    word-break: break-word;
    padding-top: 10px;
}
#spaceh1 {
    margin-bottom: -15px;
    cursor: default;
}
#calc5 {
    border: 1px solid var(--color-white);
}
#display, input[type=button] {
    cursor: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22black%22%20class%3D%22bi%20bi-pencil%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M12.146.146a.5.5%200%200%201%20.708%200l3%203a.5.5%200%200%201%200%20.708l-10%2010a.5.5%200%200%201-.168.11l-5%202a.5.5%200%200%201-.65-.65l2-5a.5.5%200%200%201%20.11-.168zM11.207%202.5%2013.5%204.793%2014.793%203.5%2012.5%201.207zm1.586%203L10.5%203.207%204%209.707V10h.5a.5.5%200%200%201%20.5.5v.5h.5a.5.5%200%200%201%20.5.5v.5h.293zm-9.761%205.175-.106.106-1.528%203.821%203.821-1.528.106-.106A.5.5%200%200%201%205%2012.5V12h-.5a.5.5%200%200%201-.5-.5V11h-.5a.5.5%200%200%201-.468-.325%22%2F%3E%3C%2Fsvg%3E'), auto !important;
}
input[type=button]:hover {
    background-color: var(--color-grey2);
    outline: auto;
}
#store {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#history {
    color: var(--color-yellow_green);
    padding-top: 10px;
    text-align: center;
    position: relative;
    word-break: break-word;
    cursor: default;
}
#history::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 5px;
    background: var(--color-yellow);
    left: 0;
    bottom: -15px;
}
.taghr {
    background-color: var(--color-yellow);
    height: 5px;
    width: 100%;
}
#tabela {
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
#tabela::-webkit-scrollbar {
    width: 20px;
}
#tabela::-webkit-scrollbar-thumb {
    background: var(--color-yellow_green);
}
#tabela::-webkit-scrollbar-track {
    background: var(--color-dark2);
    border: 1px solid var(--color-blue);
}
#storage tr {
    word-break: break-word;
    gap: 1rem;
    position: relative;
}
#storage tr::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 5px;
    background: var(--color-yellow_green);
    left: 0;
    bottom: -21px;
}
#storage td {
    color: var(--color-chartreuse);
    border-bottom: 1px solid var(--color-blue);
    border-top: 1px solid var(--color-blue);
    padding: 5px 10px;
    background-color: var(--color-dark2);
    vertical-align: middle;
}
#botao_trash {
    border-left: 1px solid var(--color-blue);
    width: 15%;
    vertical-align: middle;
    text-align: center;
}
#btn-trash {
    font-size: 1rem;
    color: var(--color-dark);
    background-color: var(--color-grey);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .4s;
    margin-left: 5px;
    margin-right: 3px;
    cursor: grabbing;
}
#btn-trash:hover, #btn-trash:focus {
    background-color: var(--color-red);
}

@media screen and (min-width: 940px) and (max-width: 991px) {
    #btn-trash
    { margin-left: 10px;
    }
}
@media screen and (min-width: 800px) and (max-width: 939px) {
    #btn-trash {
    margin-left: 5px; margin-right: 2px; }
}

#botao-dicas {
    text-decoration: none;
    color: var(--color-dark);
    background: var(--color-grey);
    text-align: center;
    padding: 5px 0px;
    border: var(--color-dark) 1px solid;
    cursor: default;
}
#botao-dicas:hover {
    background: var(--color-grey2);
    outline: auto;
}

/* dicas.html */

#span-topo {
    color: var(--color-dark);
    text-align: center;
    text-decoration: none;
    padding: 10px 0px;
    position: relative;
    background: var(--color-grey);
    height: 30px;
}
#span-topo::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 5px;
    background: var(--color-blue);
    left: 0;
    bottom: -15px;
}
#dicas-conteiner {
    max-height: 450px;
    overflow-x: scroll;
    scrollbar-width: none;
}
#espacoh1 {
    margin-bottom: -7.5px;
    cursor: default;
}
.box {
    margin-bottom: -5px;
}
img {
    display: block;
    margin: 0 auto;
}