/*

    Style sheet for blog entry https://www.charlespetzold.com/blog/2024/09/Rudimentary-3D-on-the-2D-HTML-Canvas.html

*/

article
{
    font-family: 'Times New Roman', Times, serif;
    font-size: 120%;
    line-height: 120%
}

div.canvas-container
{
    width: max-content;
}

div.animate
{
    display: grid; 
    place-items: center; 
    scale: 1.25; 
    padding: 10px 0;
}

.border
{
    border: 1px solid black; 
}

.slider
{
    width: 100%;
    margin-top: 10px;
}

.ui-text
{
    text-align: center;
    font-size: 110%; 
    font-weight: bold;
}

p.slider-text
{
    margin-top: 0;
    margin-bottom: 0;
}

p.slider-text-X::before
{
    content: "X Rotation = ";
}

p.slider-text-Y::before
{
    content: "Y Rotation = ";
}

p.slider-text-Z::before
{
    content: "Z Rotation = ";
}

p.slider-text-degrees::after
{
    content: "°";
}

p.slider-text-value::before
{
    content: "Die Value = ";
}

math
{
    math-style: normal;
    margin-left: 4em;
    font-family: math;
    font-size: inherit;
}

mtd
{
    text-align: left;
}