body { font-family: "Roboto", sans-serif; margin: 2%; background-color: #282c37; color: white; } * { box-sizing: border-box; } .container { background-color: #444a5c; padding:10px; } .light { background-color: #4d5366; } .column { flex-grow: 1; flex-basis: 0; padding: 10px; } .large { font-size: 1.2em; } .small { font-size: 0.8em; } .centred { text-align: center; } .thin { font-weight: 300; } .subtle { color: #dddddd; } .row { display: flex; } .full-width { width: 100%; } .bot-icon { width: 100px; height: 100px; background: center/contain url("https://cloud.lynnesbian.space/s/JZCPTs3DzMLAspC/preview"); } .bot-icon, .bot-text, .bot-actions { display: inline-block; align-self: center; } .bot-text { flex-grow: 1; margin: 0 0 10px 10px; } .bot-name { font-size: 1.8em; margin: 10px 0; } .bot-actions { margin-right: 10px; } .button { color: white; line-height:1.2em; padding:10px; text-decoration: none; display: inline-block; margin: 5px 0; transition: 0.2s linear; border:none; } .button:visited { color:white; } input.button, button.button { font-size: 1em; cursor: pointer; } .btn-primary { background-color: #9370db; border-color: #9370db; } .btn-primary:hover { background-color: #7859b6; border-color: #7859b6; } .btn-secondary { background-color: #999; } .btn-secondary:hover { background-color: #777; } .btn-large { font-size: 1.6em; } .btn-dangerous { background-color: #e22; } .btn-dangerous:hover { background-color: #c22; } a { color: mediumpurple; text-decoration: none; } a:visited { color: white; } h1 { font-size: 4em; margin-top: 10px !important; } h1, h2, h3, h4, h5, h6 { font-weight: 400; margin: 0; } form { text-align: justify; display:inline-block; } label.important { font-size: 1.4em; margin: 10px 0; font-weight: 300; display:block; } input, select { font-size: 1.2em; line-height:1.4em; border: 3px grey solid; border-radius: none; padding: 3px; } input:focus, select:focus { border: 3px mediumpurple solid; } label, input { flex-basis: 0; } label { flex-grow: 1; } form .row { margin: 10px 0; }