p { color: #333; } #sim section { padding: 2em; } #sim > h1 { color: #333350; margin-top: 3%; text-align: center; font-size: 350%; font-weight: 800; } #conversation { margin: 1em auto; font-size: 110%; line-height: normal; display: flex; justify-content: space-around; align-items: flex-start; min-height: 10em; max-width: 90%; } #questions-answers { min-width: 60%; transition: width 1s; } .dependency-of { } .dependency-of ul { display: inline; } .dependency-of li { font-size: 80%; background: #333350; color: white; display: inline-block; padding: .1em .6em; margin: 0 .6em; border-radius: 3px; } #sim #results { padding: .1em; background: #333350; box-shadow: 1px -7px 20px 2px #ccc; position: fixed; bottom: 0; left: 0; width: 100%; font-size: 80%; color: white; height: 12em; text-align: center; } #results #results-titles { color: white; width: 18%; display: inline-block; float: left; line-height: 1.2em; margin: 0; margin-left: .5em; padding: .5em; font-weight: 400; font-size: 120%; } #results #results-titles h2 { font-size: 210%; } #results #results-titles div { font-style: italic; } #results ul { display: inline-flex; justify-content: space-around; height: 100%; width: 80%; list-style: none; padding-left: 0; } #results li { margin: .8em 1em; text-align: center; } #results li a { text-decoration: none; } #results .rule-box { padding: .2em 1em; color: #333350; background: white; border-radius: 3px; border: 1px solid white; white-space: nowrap; color: #333350; } #results li.unsatisfied .rule-box { border: 2px dashed #333350; } #results .rule-type { background: #333350; color: white; border: 1px solid; font-size: 75%; line-height: 2em; font-weight: 800; } #results .rule-name { font-size: 150%; text-transform: capitalize; } #results li p { margin: 0; padding: 1em 0; font-size: 120%; color: inherit; } #results li.unsatisfied p{ font-style: italic; } #results li p .figure { font-size: 200%; } #results .understand:hover i { opacity: 1 }