/* import bootstrap */ @import url('https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css'); body { text-align: center; background-color: #fff; color: #000; justify-content: center; margin: 2rem 1rem 1rem; font-family: Verdana, Geneva, Tahoma, sans-serif; padding-left: 3%; padding-right: 3%; } /* Replaces outer and inner table with div */ .outlineDiv { border: 1px solid #d9d9d9; max-width: 400px; width:fit-content; margin: auto; padding: 4px 12px; } h1 { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 40px; } h2 { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 20px; font-style: bold; } h3 { font-family: Verdana, Geneva, Tahoma, sans-serif; color: #666; margin-top: 5px; font-size: 15px; } .description { text-align: justify; max-width: 720px; margin: auto; } td { vertical-align: top; } /* ----------------- Utility ------------------- */ .flex-container { display: flex; justify-content: center; } /* Moving to flex and grid over bootstrap, more control */ .flex-container a { margin: 0px 15px; width: 256px; } /* Doesn't play well with html width attribute */ .flex-container a img { width: 100% } .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; justify-content: center; align-items: top; text-align: center; margin: auto; gap: 5px; width: fit-content; } .image-container { flex-grow: 1; display: flex; align-items: center; justify-content: center; width: 140px; height: 140px; margin: auto; } .image-container img { width: 100%; height: 100%; object-fit: contain; } .no-border { border: none; } .big-text { font-size: 1.25rem; } .mid-text { font-size: 0.9em; line-height: 140%; padding: 4px 30px; } .small-text { font-size: 0.8em; } .tiny-text { font-size: 0.6em; } .bold { font-weight: bold; } .green { color: green; } .light-em { color: orange; font-style: italic; } .center { margin: auto; } .leftText { text-align: left; } /* unsure on link styling a { text-decoration: underline; } */