
:root {
    display: block;
    box-sizing: content-box;
    position: absolute;
    overflow: clip;
    -bevy-scrollbar-width: 3.0;
    overflow-clip-margin: padding-box 5px;
    left: 10px;
    right: 20%;
    top: calc(20% * 2);
    bottom: 100vh;
    width: calc(calc(100vw / 2) - 20vw);
    height: 10vmin;
    min-width: 10vmax;
    min-height: auto;
    max-width: 100px;
    max-height: 1px;
    aspect-ratio: 20 / 2;
    align-items: flex-start;
    justify-items: baseline;
    align-self: flex-end;
    justify-self: stretch;
    align-content: space-evenly;
    justify-content: space-around;
    margin: 0 30vw;
    padding: calc(20% * 2) 0;
    border-width: thin;
    flex-direction: column-reverse;
    flex-wrap: wrap-reverse;
    flex: 2 1 10%;
    gap: calc(30px * 2);
    grid-auto-flow: column;
    grid-template: repeat(3, 100px) / repeat(8, 1fr) fit-content(20px);
    grid-auto-rows: auto;
    grid-auto-columns: 20px minmax(10px, max-content);
    grid-row: 1 / 2;
    grid-column: 1 / span 3;
    
    border-color: blue;
    background-color: black;
    border-radius: 10px;
    outline: 3px red;
    outline-offset: -1px;
    z-index: 2;
    box-shadow: -2px -3px 10px 20px green;
    transform: translate(10%, 20%) scale(0.75) rotate(45deg);

    -bevy-image-color: yellow;
    -bevy-image-mode: stretch;

    background-image: linear-gradient(90deg, red, blue);
    border-image: radial-gradient(at center, red, blue);
}

.with-important {
    display: block !important;
    box-sizing: content-box !important;
    position: absolute !important;
    overflow: clip !important;
    -bevy-scrollbar-width: 3.0 !important;
    overflow-clip-margin: padding-box 5px !important;
    left: 10px !important;
    right: 20% !important;
    top: calc(20% * 2) !important;
    bottom: 100vh !important;
    width: calc(calc(100vw / 2) - 20vw) !important;
    height: 10vmin !important;
    min-width: 10vmax !important;
    min-height: auto !important;
    max-width: 100px !important;
    max-height: 1px !important;
    aspect-ratio: 20 / 2 !important;
    align-items: flex-start !important;
    justify-items: baseline !important;
    align-self: flex-end !important;
    justify-self: stretch !important;
    align-content: space-evenly !important;
    justify-content: space-around !important;
    margin: 0 30vw !important;
    padding: calc(20% * 2) 0 !important;
    border-width: thin !important;
    flex-direction: column-reverse !important;
    flex-wrap: wrap-reverse !important;
    flex: 2 1 10% !important;
    gap: calc(30px * 2) !important;
    grid-auto-flow: column !important;
    grid-template: repeat(3, 100px) / repeat(8, 1fr) fit-content(20px) !important;
    grid-auto-rows: auto !important;
    grid-auto-columns: 20px minmax(10px, max-content) !important;
    grid-row: 1 / 2 !important;
    grid-column: 1 / span 3 !important;

    border-color: blue !important;
    background-color: black !important;
    border-radius: 10px !important;
    outline: 3px red !important;
    outline-offset: -1px !important;
    z-index: 2 !important;
    box-shadow: -2px -3px 10px 20px green !important;
    transform: translate(10%, 20%) scale(0.75) rotate(45deg) !important;

    -bevy-image-color: yellow !important;
    -bevy-image-mode: stretch !important;

    background-image: linear-gradient(90deg, red, blue) !important;
    border-image: radial-gradient(at center, red, blue) !important;
}

.with-inherited-values {
    display: inherit;
    box-sizing: inherit;
    position: inherit;
    overflow: inherit;
    -bevy-scrollbar-width: inherit;
    overflow-clip-margin: inherit;
    left: inherit;
    right: inherit;
    top: inherit;
    bottom: inherit;
    width: inherit;
    height: inherit;
    min-width: inherit;
    min-height: inherit;
    max-width: inherit;
    max-height: inherit;
    aspect-ratio: inherit;
    align-items: inherit;
    justify-items: inherit;
    align-self: inherit;
    justify-self: inherit;
    align-content: inherit;
    justify-content: inherit;
    margin: inherit;
    padding: inherit;
    border-width: inherit;
    flex-direction: inherit;
    flex-wrap: inherit;
    flex: inherit;
    gap: inherit;
    grid-auto-flow: inherit;
    grid-template: inherit;
    grid-auto-rows: inherit;
    grid-auto-columns: inherit;
    grid-row: inherit;
    grid-column: inherit;

    border-color: inherit;
    background-color: inherit;
    border-radius: inherit;
    outline: inherit;
    outline-offset: inherit;
    z-index: inherit;
    box-shadow: inherit;
    transform: inherit;
    -bevy-image-color: inherit;
    -bevy-image-mode: inherit;
    background-image: inherit;
    border-image: inherit;
}

.with-initial-values {
    display: initial;
    box-sizing: initial;
    position: initial;
    overflow: initial;
    -bevy-scrollbar-width: initial;
    overflow-clip-margin: initial;
    left: initial;
    right: initial;
    top: initial;
    bottom: initial;
    width: initial;
    height: initial;
    min-width: initial;
    min-height: initial;
    max-width: initial;
    max-height: initial;
    aspect-ratio: initial;
    align-items: initial;
    justify-items: initial;
    align-self: initial;
    justify-self: initial;
    align-content: initial;
    justify-content: initial;
    margin: initial;
    padding: initial;
    border-width: initial;
    flex-direction: initial;
    flex-wrap: initial;
    flex: initial;
    gap: initial;
    grid-auto-flow: initial;
    grid-template: initial;
    grid-auto-rows: initial;
    grid-auto-columns: initial;
    grid-row: initial;
    grid-column: initial;
    border-color: initial;
    background-color: initial;
    border-radius: initial;
    outline: initial;
    outline-offset: initial;
    z-index: initial;
    box-shadow: initial;
    transform: initial;
    -bevy-image-color: initial;
    -bevy-image-mode: initial;
    background-image: initial;
    border-image: initial;
}

text {
    color: blue;
    font-size: 3px;
    line-height: 120%;
    -bevy-font-smooth: none;
    text-align: center;
    -bevy-line-break: any-character;
    
    text-shadow: red 8px 9px;
}

text.with-important {
    color: blue !important;
    font-size: 3px !important;
    line-height: 120% !important;
    -bevy-font-smooth: none !important;
    text-align: center !important;
    -bevy-line-break: any-character !important;

    text-shadow: red 8px 9px !important;
}