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-card .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; } .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; }