$min-desktop-width: 1280px; $max-phone-width: 700px; $narrow-layout-width: 960px; $medium-layout-width: $min-desktop-width; $font-family-base: verdana, arial, helvetica, sans-serif; $font-family-monospace: "Droid Sans Mono", monospace; :root { --padding-tiny: 0.3rem; --padding-small: 0.4rem; --padding-normal: 0.75rem; --padding-large: 1.5rem; --default-line-height: 1.15; --readable-line-height: 1.35rem; --block-header-height: 2rem; --navbar-size: 4rem; --navbar-secondary-size: 2.5rem; --navbar-avatar-size: 2.5rem; --navbar-input-size: 2rem; --navbar-input-width: 18vw; --navbar-input-max-width: 22rem; --button-group-height: 2rem; --button-group-tall-height: 2.5rem; --button-group-small-height: 1.5rem; --column-left-width: 360px; --border-radius-outer: 0.35rem; --border-radius-inner: 0.25rem; --media-container-width: 225px; --media-tiny-container-width: 50px; --media-small-container-width: 125px; --media-medium-container-width: 250px; --media-large-container-width: 500px; --media-full-container-width: 100%; --media-featured-width: 358px; --media-header-height: 2rem; --number-badge-size: 0.6rem; --number-badge-padding: 0.1rem; --number-badge-border: 2px; --number-badge-lower-offset: 0.7rem; --number-badge-upper-offset: 0.7rem; --font-family: #{$font-family-base}; --font-family-monospace: #{$font-family-monospace}; --font-size: 14px; --font-tiny-size: 12px; --font-header-size: 16px; --font-h1-size: 1.75rem; --font-h2-size: 1.5rem; --font-h3-size: 1.35rem; --font-h4-size: 1.2rem; --font-h5-size: 1.1rem; --font-h6-size: 1rem; --input-text-height: 9rem; --min-desktop-width: #{$min-desktop-width}; --max-phone-width: #{$max-phone-width}; --medium-layout-width: #{$medium-layout-width}; --narrow-layout-width: #{$narrow-layout-width}; --transition-animation-duration: 0.15s; }