.selector-1 { background-color: #f00; width: 300px; font-size: calc(16px + 2vmin); min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-1 { font-size: 32px; } } .selector-2 { font-size: calc(16px + 2vmin); min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-2 { font-size: 32px; } } .selector-3 { font-size: calc(16px + 2vmin) !important; min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-3 { font-size: 32px !important; } } .selector-4 { font-size: calc(16px + 2vmin); min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-4 { font-size: 32px; } } .selector-5 { font-size: 2em; } .selector-6 { font-size: inherit; } @supports (display: flex) { .selector-7 { font-size: calc(15.2px + 1.6vmin); min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-7 { font-size: 28px; } } } .selector-8 { flex: 0 999 calc(112px + 50vmin); min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-8 { flex: 0 999 512px; } } .selector-9 { padding: calc(16px + 2vmin); min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-9 { padding: 32px; } } .selector-10 { padding: calc(16px + 2vmin); min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-10 { padding: 32px; } } .selector-11 { padding-top: calc(16px + 2vmin); min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-11 { padding-top: 32px; } } .selector-12 { padding-right: calc(16px + 2vmin); min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-12 { padding-right: 32px; } } .selector-13 { padding-bottom: calc(16px + 2vmin); min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-13 { padding-bottom: 32px; } } .selector-14 { padding-left: calc(16px + 2vmin); min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-14 { padding-left: 32px; } } .selector-15 { margin: calc(16px + 2vmin); min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-15 { margin: 32px; } } .selector-16 { margin-top: calc(16px + 2vmin); min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-16 { margin-top: 32px; } } .selector-17 { margin-right: calc(16px + 2vmin); min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-17 { margin-right: 32px; } } .selector-18 { margin-bottom: calc(16px + 2vmin); min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-18 { margin-bottom: 32px; } } .selector-19 { margin-left: calc(16px + 2vmin); min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-19 { margin-left: 32px; } } .selector-20 { margin: calc(16px + 2vmin) calc(19.2px + 3.6vmin); min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-20 { margin: 32px 48px; } } .selector-21 { margin: calc(16px + 2vmin) calc(19.2px + 3.6vmin) !important; min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-21 { margin: 32px 48px !important; } } .selector-22 { font-size: 0; } .selector-23 { margin: 0 calc(19.2px + 3.6vmin); min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-23 { margin: 0 48px; } } .selector-24 { box-shadow: 0 0 calc(16px + 2vmin) #f00, 0 0 calc(19.2px + 3.6vmin) #0f0; min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-24 { box-shadow: 0 0 32px #f00, 0 0 48px #0f0; } } .selector-25 { --value: calc(19.2px + 3.6vmin); min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-25 { --value: 48px; } } .selector-26 { font-size: 10px; } .selector-27 { margin: calc(-19.2px - 3.6vmin); min-width: 0vw; } @media (min-width: 50rem) and (min-height: 50rem) { .selector-27 { margin: -48px; } } .selector-28 { margin: -8px; }