/* Oh Hello! These are some base styles so that our tutorial looks good. Let's go through the important bits real quick */ :root { --yellow: #f0a815; --black: #272727; --light_blue: #687aa2; --dark_blue: #434345; } html { /* border-box box model allows us to add padding and border to our elements without increasing their size */ box-sizing: border-box; /* A system font stack so things load nice and quick! */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 900; font-size: 12px; color: var(--dark_blue); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07); } /* WAT IS THIS?! We inherit box-sizing: border-box; from our selector Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector */ *, *:before, *:after { box-sizing: inherit; } body { } h1, h2, h3, h4, h5, h6 { margin: 0 0 5px 0; } /* Each item in our grid will contain numbers */ .flash { animation: pulse 1s step-start infinite; } @keyframes pulse { 50% { opacity: 0.5; } } .form-group { margin-bottom: 0rem; }