a { color: hsla(210, 50%, 50%, 1); transition: 0.2s; } a:hover { opacity: .5; } a[animation="true"][ready="false"] { opacity: 0.0; } a:hover[animation="true"][ready="false"] { opacity: 0.0; } h6 { font-size: 1.125rem; font-weight: 700; } h5 { font-size: 1.25rem; font-weight: 700; } h4 { font-size: 1.4rem; font-weight: 700; } h3 { font-size: 1.5rem; font-weight: 700; } h2 { font-size: 2rem; font-weight: 700; } h1 { font-size: 2.5rem; font-weight: 700; } .button { padding-top: 1rem; padding-left: 1rem; padding-right: 1rem; padding-bottom: 1rem; cursor: pointer; } .button.border { border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-left-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: hsla(0, 0%, 50%, 1); border-left-color: hsla(0, 0%, 50%, 1); border-right-color: hsla(0, 0%, 50%, 1); border-bottom-color: hsla(0, 0%, 50%, 1); } .button.border:hover { background-color: hsla(0, 0%, 50%, 1); color: hsla(0, 0%, 100%, 1); transition: 250ms; } .button.border[animation="true"][ready="false"] { opacity: 0.0; } .input { padding-top: 1rem; padding-left: 1rem; padding-right: 1rem; padding-bottom: 1rem; background-color: hsla(0, 0%, 100%, 1); } .input.border { border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-left-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: hsla(0, 0%, 50%, 1); border-left-color: hsla(0, 0%, 50%, 1); border-right-color: hsla(0, 0%, 50%, 1); border-bottom-color: hsla(0, 0%, 50%, 1); } .hint { color: hsla(0, 0%, 50%, 1); } .p2-1 { padding-top: 2rem; padding-left: 1rem; padding-right: 1rem; padding-bottom: 2rem; } .p1 { padding-top: 1rem; padding-left: 1rem; padding-right: 1rem; padding-bottom: 1rem; }