/* * Flex Layout Specifics */ img { width: 150px; height: 30px; } .dot { height: 30px; width: 30px; color: white; background-color: skyblue; border-radius: 50%; display: flex; justify-content: center; align-items: center; } a { text-align: center; line-height: 2; color: white; text-decoration: none; } .loginn { background-color: skyblue; border-radius: 31px; border: 1px solid skyblue; cursor: pointer; color: #ffffff; font-family: Arial; text-decoration: none; height: 30px; } header { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; background-color: #0f64f2; margin: auto; padding-top: 10px; padding-bottom: 10px; padding-right: 30px; padding-left: 10px; } header>p { text-align: center; line-height: 0; } .myButton { background-color: #4C8BF5; border-radius: 28px; border: 1px solid #4C8BF5; display: inline-block; cursor: pointer; color: #ffffff; font-family: Arial; font-size: 9px; padding: 8px 13px; text-decoration: none; } .container { display: flex; flex-direction: column; align-items: center; } .round { display: flex; flex-direction: column; justify-content: center; width: 200px; list-style: none; padding: 0; } .round .spacer { flex-grow: 1; } .round .spacer:first-child, .round .spacer:last-child { flex-grow: .5; } .round .game-spacer { flex-grow: 1; } /* * Flex Layout Specifics */ main { display: flex; flex-direction: row; } .round { display: flex; flex-direction: column; justify-content: center; width: 200px; list-style: none; padding: 0; } .round .spacer { flex-grow: 1; } .round .spacer:first-child, .round .spacer:last-child { flex-grow: .5; } .round .game-spacer { flex-grow: 1; } /* * General Styles */ body { font-family: sans-serif; font-size: small; padding: 10px; line-height: 1.4em; } li.game { padding-left: 20px; } li.game.winner { font-weight: bold; } li.game span { float: right; margin-right: 5px; } li.game-top { border-bottom: 1px solid #aaa; } li.game-spacer { border-right: 1px solid #aaa; min-height: 40px; } li.game-bottom { border-top: 1px solid #aaa; }