html{
    scroll-behavior     :   smooth;
    overflow-x          :   hidden;
}

html, body{
    position            :   relative;

    width               :   min(480px, 100%);
    margin-left         :   auto;
    margin-right        :   auto;

    --height            :   100%;
    height              :   100vh;
    height              :   100dvh;

    display             :   flex;
    flex-direction      :   column;

    background-color    :   var(--bg-color);
    -background-color    :   green;
}

html{

    -background-color    :   mediumaquamarine;
}

body{

    -background-color    :   lightblue;
}

main{
    width               :   100%;

    flex-grow           :   1;
    flex-shrink         :   1;
    flex-basis          :   0;

    display             :   flex;
    flex-direction      :   column;

    /* 
        if not, we see html background
        when scrolling vertically
    */
    overflow-x          :   auto;

    -background-color    :   rgb(252, 227, 207);
}

.hidden{
    display             :   none!important;
}

.muted{
    color               :   #71717A;
    font-size           :   14px;
}

strong{
    font-weight         :   500;
}

ul{
    list-style-position :   inside;
}