/* Reset */ * { box-sizing: border-box; } html, h1, h2, h3, h4, h5, h6, p, a, em, img, strong, b, u, i, ol, ul, li, fieldset, form, label, article, aside, details, figure, figcaption, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { margin: 0; padding: 0; line-height: 1.4; font-size: 16px; color: #433c43; min-height: 100vh; font-family: 'Quicksand', sans-serif; } ol, ul { list-style: none; } a, a:hover, a:visited { text-decoration: none; } table { width: 100%; border-collapse: collapse; border-spacing: 0; border: 1px solid #433c43; margin: 50px auto; } caption { background: #433c43; padding: 10px; font-size: 22px; color: #f3f3f3; padding: 20px; font-size: 28px; } tbody, tfoot, td { border: 1px solid #433c43; padding: 10px; } button { border: none; outline: none; background-image: none; background-color: #fff; color: #433c43; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } input { border: 1px solid #433c43; background-image:none; background-color:transparent; color: #433c43; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } input::-webkit-input-placeholder, input::-moz-placeholder, input:-moz-placeholder, input:-ms-input-placeholder, input::placeholder { color: #433c43; opacity: 1; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } /* Global */ .wrapper { width: 100%; max-width: 1240px; padding: 0 20px; margin: 0 auto; } /* Header */ .header-wrapper { padding: 20px; } .header-name { font-size: 30px; display: inline-block; } .header-sub { display: inline-block; font-size: 24px; font-weight: 300; } /** Main **/ #main-wrapper { text-align: center; } /* New player */ .new-player { display: flex; justify-content: center; padding: 20px; } #add-player { width: 100%; max-width: 300px; font-size: 18px; padding: 20px 15px; font-weight: 400; height: 60px; } .btn#add { font-size: 18px; padding: 20px 15px; height: 60px; background: #433c43; color: #f3f3f3; cursor: pointer; transition: all 0.4s ease; } .btn#add:hover { background: #7d787d; transition: all 0.4s ease; } /* Players list */ #players-list { } .player { padding: 10px; font-size: 24px; font-weight: 700; font-style: italic; text-transform: capitalize; } .player span { font-weight: 300; font-style: normal; } /* Modes */ #modes { margin: 20px 0; font-weight: 700; } #select-mode { position: relative; display: inline-block; width: 200px; padding: 10px; border: 1px solid #433c43; cursor: pointer; vertical-align: text-top; } #select-mode::after { content: url('https://api.iconify.design/fa-caret-down.svg?color=%23433c43&height=14&inline=true'); position: absolute; right: 20px; top: 12px; } #modes-list { border-left: 1px solid #433c43; border-right: 1px solid #433c43; width: 150px; margin: 0 auto; } #modes-list li { border-bottom: 1px solid #433c43; padding: 10px; cursor: pointer; } /* Start btn */ .btn#start { font-size: 22px; padding: 20px 15px; height: 80px; width: 200px; background: #433c43; color: #f3f3f3; cursor: pointer; transition: all 0.4s ease; } .btn#start:hover { background: #7d787d; transition: all 0.4s ease; } /* Scores table */ .player-score { width: 80px; padding: 5px; border: none; border-bottom: 1px solid #433c43; font-size: 20px; text-align: center; } input[disabled].player-score { border: none; color: #7d787d; } .next-round { padding: 8px 15px; background: #433c43; color: #f3f3f3; text-align: center; font-size: 16px; font-weight: 300; cursor: pointer; transition: all 0.4s ease; } .next-round:not(input[disabled]):hover { background: #7d787d; transition: all 0.4s ease; } button[disabled].next-round { background: #7d787d; } .btn.new-game { font-size: 22px; padding: 15px; height: 60px; width: 250px; background: #433c43; color: #f3f3f3; cursor: pointer; transition: all 0.4s ease; } .btn.new-game:hover { background: #7d787d; transition: all 0.4s ease; } /* Additional table design */ tbody tr { height: 56px; } #active-players td:not(#round-number) { font-size: 20px; font-weight: 700; text-transform: capitalize; } #active-players td:not(#round-number) span { display: none; } tfoot { font-weight: 700; font-size: 25px; }