html { font-family: 'Roboto', sans-serif; margin: 0; padding: 0; } h1 { } h2 { padding-left: 40pt; } .leaderboard { width: 35%; position: absolute; top: 0; left: 0; padding-top: 8pt; height: 100%; background-color: rgba(0,0,0,0.8); color: #d4d0cd; } .next-meal { width: 45%; height: 100%; position: absolute; top: 0; left: 35%; padding-top: 8pt; } .lb-entry { padding: 0; height: 60pt; position: relative; } .lb-entry img { height: 50pt; width: auto; position: absolute; top: 50%; left: 25pt; margin-top: -25pt; } .lb-entry span.score { position: absolute; font-size: 16pt; top: 50%; margin-top: -8pt; left: 70%; } .lb-entry span.name { position: absolute; font-size: 16pt; top: 50%; margin-top: -8pt; left: 30%; } .cook-entry { padding: 0; height: 60pt; position: relative; } .cook-entry img { height: 50pt; width: auto; position: absolute; top: 50%; left: 40pt; margin-top: -25pt; } .cook-entry span { position: absolute; font-size: 16pt; top: 50%; margin-top: -8pt; left: 120pt; } .eater-entry { padding: 0; height: 60pt; position: relative; } .eater-entry img { height: 50pt; width: auto; position: absolute; top: 50%; left: 40pt; margin-top: -25pt; } .eater-entry span { position: absolute; font-size: 16pt; top: 50%; margin-top: -8pt; left: 120pt; } .rect-button { width: 100pt; height: 25pt; background: #EE7500; position: relative; color: #F1EDEA; left: 220pt; margin-top: 3pt; cursor: pointer; } .rect-button span { font-size: 12pt; position: absolute; top: 50%; margin-top: -6pt; left: 0; width: 100%; text-align: center; color: #EAEAEA; } .add-button { height: 50pt; width: 50pt; position: absolute; top: 50%; left: 40pt; margin-top: -25pt; color: #F1EDEA; border-radius: 25pt; background: #EE7500; cursor: pointer; } .add-button span { font-size: 34pt; position: absolute; top: 50%; margin-top: -18pt; left: 0; width: 100%; text-align: center; } .user-info { width: 19%; height: 100%; position: absolute; left: 80%; } .user-card { height: 80pt; position: relative; 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-card img{ width: 50pt; height: auto; position: absolute; top: 50%; left: 8pt; margin-top: -25pt; } .user-card span { font-size: 16pt; position: absolute; top: 30%; left: 75pt; margin-top: -8pt; width: 90pt; text-align: center; } .logout-button { width: 90pt; height: 25pt; background: #EE7500; position: absolute; color: #F1EDEA; left: 75pt; top: 70%; margin-top: -13pt; cursor: pointer; } .logout-button span { font-size: 12pt; position: absolute; top: 50%; margin-top: -6pt; left: 0; width: 100%; text-align: center; color: #EAEAEA; }