html { font-family: 'Roboto', sans-serif; } body { margin: 0; padding: 0; } h1 { margin-left: 3%; } h2 { margin-left: 3%; } .right-pane { width: 70%; height: 100%; position: absolute; top: 0; left: 30%; } .leaderboard { position: fixed; width: 30%; top: 0; left: 0; height: 100%; background-color: rgba(0,0,0,0.8); color: #d4d0cd; overflow: auto; } .lb-entry { display: flex; justify-content: space-around; } .lb-entry img { height: 80px; width: 80px; margin: 10px 0; } .lb-entry span { margin: auto 0; font-size: 20px; text-transform: capitalize; } .flex-card { margin: 8px auto; display: flex; width: fit-content; min-width: 240px; background-color: #F1EDEA; margin-left: 3%; -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); } .flex-card img { height: 80px; width: 80px; margin: 16px 20px; } .flex-small-thumb { height: 32px; width: 32px; display: inline-block; margin: -6px 0 0 0; } .flex-card span { margin: auto 20px; font-size: 20px; } .flex-card .rect-button { margin: auto 20px; } .flex-card .people { margin: auto 20px; } .flex-card p { font-size: 14px; text-align: center; line-height: 280%; } .rect-button span { font-size: 12pt; position: absolute; top: 50%; margin-top: -6pt; left: 0; width: 100%; text-align: center; color: white; } .round-button { display: flex; align-items: center; justify-content: center; color: white; background-color: #EE7500; cursor: pointer; width: 80px; height: 80px; border-radius: 40px; font-size: 42px; margin: 16px 20px; } .small-round-button { display: flex; align-items: center; justify-content: center; color: white; background-color: #FF0000; cursor: pointer; width: 30px; height: 30px; border-radius: 15px; font-size: 20px; margin: auto 30px; } .floating-round-button { display: flex; align-items: center; justify-content: center; color: white; background-color: #EE7500; cursor: pointer; width: 80px; height: 80px; border-radius: 40px; font-size: 42px; position: fixed; -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); } .user-card { display: flex; position: absolute; top: 10px; right: 10px; background-color: #F1EDEA; -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); } .user-info { display: flex; flex-direction: column; justify-content: space-evenly; padding: 10px; } .user-card img { width: 80px; height: 80px; margin: 10px; } .user-card span { font-size: 16pt; text-align: center; text-transform: capitalize; } .logout-button { width: 90pt; height: 25pt; background-color: #EE7500; position: absolute; color: white; left: 75pt; top: 70%; margin-top: -13pt; cursor: pointer; } .username { text-transform: capitalize; } .rect-button { width: 90px; height: 25px; line-height: 25px; text-align: center; vertical-align: middle; color: white; cursor: pointer; padding: 4px; margin: 10px; } .logout-button span { font-size: 12pt; position: absolute; top: 50%; margin-top: -6pt; left: 0; width: 100%; text-align: center; color: white; } .flex-card-vert { width: 30%; display: inline-flex; flex-direction: column; background-color: #F1EDEA; -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); margin: 0.5%; padding: 1em; } .add-people-container { display: flex; justify-content: space-between; margin: 5px 0; } .when { display: flex; } .when * { margin: auto 3px; } #search-user, #flavor-text, #datepicker { min-width: 0; padding: 0.5em; } #search-user { margin: auto 0; } .ui-spinner { flex: 4; } .user-result-container { display: flex; flex-direction: column; background-color: #F1EDEA; -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); position: fixed; } .user-result { display: flex; align-items: center; border: solid 1px #A8A4A1; cursor: pointer; } .user-result:hover { background-color: #A8A4A1; } .user-result span { margin: auto 20px; } .user-result-thumb { width: 50px; margin: 10px 20px; }