Mobile

1. Smallest: 12 px
2. Details: 13 - 14 px
3. Body Text: 16 - 18 px
4. Subtitle: 18 - 20 px
5. Title: 24 - 28 px
6. Header: 32 - 38 px

Desktop

1. Smallest: 16 px
2. Details: 16 - 18 px
3. Body Text: 20 - 21 px
4. Subtitle: 21 - 24 px
5. Title: 34 - 38 px
6. Header: 40 - 48 px

::-ms-reveal {
  display: none;
}

*{
  border: 2px solid red;
}

Container

color: black !important;
background: white !important;
filter: invert(1);

Element in container

filter: invert(1) hue-rotate(180deg);

High Emphasis

87% Opacity

Medium Emphasis

60% Opacity

Low Emphasis

38% Opacity

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}

width: 100%;
height: 100%;
object-fit: cover;

font-size: 4em;
-webkit-text-stroke: 3px darkgrey;
-webkit-text-fill-color: white;

display: grid;
place-items: center;

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

-webkit-line-clamp specific the maximum number of line you want to display.

Absolute

• Absolute length units are fixed and length will appear as exactly that size.
• Absolute length units are not recommended for use on screen, because screen sizes vary so much.

Absolute Units

1. cm - centimeters
2. mm - millimeters
3. in - inches (1 in = 96 px = 2.54 cm)
4. px - pixels (1 px = 1/96th of 1 in)
5. pt - points (1 pt = 1/72 of 1 in)
6. pc - picas (1 pc = 12 pt)

Relative

• Relative length units specify a length relative to another length property.
• Relative length units scales better between different rendering mediums.

Relative Units

1. em - Relative to the font-size of the element.
2. ex - Relative to the x-height of the current font.
3. ch - Relative to width of the '0' (zero).
4. rem - Relative to font-size of the root element.
5. vw - Relative to 1% of the width of the viewport.
6. vh - Relative to 1% of the height of the viewport.
7. vmin - Relative to 1% of viewport's smaller dimension.
8. vmax - Relative to 1% of viewport's larger dimension.
9. % - Relative to the parent element.

.validation-summary-errors {
    position: relative;
    padding: 1rem;
    color: #C2001B;
    background-color: #FFBCC6;
    border: #FFBCC6;
    border-radius: 0.375rem;
}

.validation-summary-errors span{
    font-weight: bold;
}

.validation-summary-errors ul {
    margin: 0;
}

.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

.form-control.input-validation-error {
    border: 1px solid #b94a48;
    border-color: #B94A48 !important;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-valid {
    display: none;
}