#sim p { color: #333; } #sim section { padding: 2em; } #sim #introduction { margin-left: 1.2em; font-size: 110%; padding-top: 0; width: 60%; } #conversation { margin: 1em auto; font-size: 120%; 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: #4A89DC; color: white; display: inline-block; padding: .1em .6em; margin: 0 .6em; border-radius: 3px; } #sim #results { padding: .1em; background: #4A89DC; box-shadow: 1px -7px 20px 2px #eee; position: fixed; bottom: 0; left: 0; width: 100%; font-size: 80%; color: white; height: 10em; text-align: center; } #results h2 { color: white; width: 5em; display: inline-block; float: left; line-height: 1.2em; margin: 0; margin-left: 1.5em; padding: .5em; font-weight: 400; font-size: 300%; } #results ul { display: inline-flex; justify-content: space-around; height: 100%; width: 70%; list-style: none; margin-top: 0.4em; } #results li { color: #333; background: white; display: inline-block; margin: 0 2em; border-radius: 8px; padding: .6em 2em; text-align: center; border: 1px solid #333350; } #results li.unsatisfied { border: 2px dashed #4A89DC; } #results li h3 { font-size: 130%; /*width: 80%;*/ border-bottom: 1px solid #aaa; margin: .1em; margin-bottom: 1em; padding-bottom: .2em; } #results li p { margin-top: 0; font-size: 150%; } #results li.unsatisfied p{ font-style: italic; } #results li.number p { font-size: 300%; } #results li:hover .understand { display: inline; } #results li .understand { display: none; } #results .understand button { background: #4A89DC; color: white; font-weight: 600; border: none; padding: .3em .8em; } #results .understand i { display: inline-block; font-size: 190%; line-height: .2em; opacity: .8 } #results .understand:hover i { opacity: 1 }