body
{
    font-size: 16pt;
    /*background-color: rgb(220, 255, 240);*/
    /*background: url(https://i.pinimg.com/736x/40/4f/7a/404f7af236d9c2c6fc8a1c15960f8d17.jpg);*/
    /*background: url(https://cdn.wallpapersafari.com/5/37/GZC1fM.jpg);*/
    /*background: url(https://c4.wallpaperflare.com/wallpaper/128/58/484/peaceful-gay-gradation-blur-wallpaper-preview.jpg);*/
    /* Find a better background*/
    /*background: url(https://image.shutterstock.com/image-illustration/beige-cream-abstract-background-smooth-260nw-314609192.jpg);*/
    /* background: url(https://static.vecteezy.com/system/resources/previews/003/666/966/original/abstract-grey-polygonal-background-with-copy-space-vector.jpg); */
    /*background-image: url(image.png);*/
    background-image: url(abstract-grey-polygonal-background-with-copy-space-vector.webp);
    background-repeat: no-repeat;
    background-size: 63cm;
    background-position: top center;
    background-color: gray;
}

body, input, button
{
    font-family:Georgia, 'Times New Roman', Times, serif
}

h1
{
    width: 100%;
    text-align: center;
}

#translation
{
    display: flex;
    flex-wrap: wrap;

    margin: auto;
    text-align: center;
    width: max-content;
    border: 3px solid darkblue;
    padding: 10px;
    border-radius: 10px;

    background-color: rgb(240, 249, 255);    
}

.main_piece
{
    margin: 10px;
}

#output
{
    font-size: 10.5pt; 
}

.box
{
    margin-top: 3px;
    width: 150px;
    height: 40px;
    border: 1px solid black;
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
}

.cc_box
{
    margin-top: 3px;
    margin-right: 20px;
    margin-left: 20px;
    width: 150px;
    height: 40px;
    border: 1px solid black;
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
}

#color_code_area
{
    display: flex;
    flex-wrap: wrap;

    margin: auto;
    margin-top: 30px;
    text-align: center;
    width: max-content;
    border: none;
    padding: 10px;
    border-radius: 10px;

    background-color: none;

    font-size: 14px;

    -webkit-text-fill-color: black; /*delete this line to get color coding back*/
}

#image
{
   margin-left: auto; 
}

#clear_button
{
    margin-top: 50px;
    text-align: center;
}

.tooltip
{
    border-bottom: 1px dotted black; 
    display: inline-block; 
}

.tooltip .tooltip_text 
{
    visibility: hidden; 
    width: 120px; 
    background-color: black; 
    color: #fff; 
    text-align: center; 
    border-radius: 6px; 
    padding: 5px 0; 

    /*position: relative; */
    /*z-index: 1; 
    width: 40px;
    top: 100%; 
    left: 100%;
    margin-left: 20px;
    margin-top: 50px;*/

    position: relative; 
    bottom: -50px; 
    

}

.word_with_tooltip
{
    cursor:help;
}

.word_with_tooltip:hover
{
    background-color: bisque;
}

.tooltip:hover
{
    border-bottom: 2px dotted blue; 
}

.tooltip:hover .tooltip_text
{
    visibility: visible; 
}

#action_button, #translate_button
{
    height: 50px;
}

#tooltip_area
{
    margin-top: 10px;
    border: 2px solid black; 
    word-wrap: break-word; 
    width: 200px;
    margin-left: 10px;
    padding: 5px;
}

#cc_outp
{
    text-decoration-line: underline;
}