/* A simple guide to responsive design. Made by Adam Kaplan.
   (http://www.adamkaplan.me/grid/)
   ========================================================================== */


/* Layout
   ========================================================================== */

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 20px;
  line-height: 1.5;
}

body {
  background-color: #fff;
  color: #222;
}

.container {
  background-color: #fff;
  margin: 0 auto;
  max-width: 22rem;
  overflow: hidden;
  width: 99.9%;
}


/* Mobile First Grid (use .column)
   ========================================================================== */

.column {
  float: left;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  width: 14.2857%;
}

.column.half { width: 50%; }
.column.six { width: 85.7143%; }
.column.two { width: 28.5714%; }


/* Clearfix by Nicolas Gallagher
   (http://nicolasgallagher.com/micro-clearfix-hack/)
   ========================================================================== */

.clearfix:before, .row:before,
.clearfix:after, .row:after {
  content: " ";
  display: table;
}

.clearfix:after, .row:after { clear: both; }


/* Links
   ========================================================================== */

a {
  color: #00f;
  text-decoration: none;
}

a:hover {
  color: #00f;
  text-decoration: underline;
}

p.action {
  color: gray !important;
  cursor: pointer;
  font-size: .8rem;
  text-align: center;
  margin: 0;
}


/* Titles
   ========================================================================== */

h1 {
  background-color: #666;
  color: #fff;
  font-size: 1.7rem;
  margin: 0 0 .75rem 0;
  text-align: center;
}

h2 {
  background-color: #0b0;
  color: #fff;
  font-size: 1.2rem;
  font-weight: normal;
  margin: 0;
  padding: .25rem;
  text-align: center;
}


/* Navigation
   ========================================================================== */

nav {
  display: block;
  font-size: 1rem;
  margin: .25rem 0;
  padding: 0;
}

nav span {
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 33.3333%;
}

nav button {
  background-color: hotpink;
  border: 0;
  color: #fff;
  cursor: pointer;
  margin: 0;
  padding: .25rem .75rem .5rem .75rem;
  outline: none;
}


/* Page structure
   ========================================================================== */

.bloc {
  background-color: #fff;
  padding: 1px 5px;
  margin: 0;
  min-height: calc(100vh - 3.3rem - 2.3rem - 2.3rem - 2px);
}

/*
  https://stackoverflow.com/questions/25792296/how-to-make-div-10-of-device-screen-height-css
  h1 => 3.3rem = 66px
   - font-size : 1.7rem x 1.5 = 2.55 (1.5 = line-height) => 51px
   - margin-top : 0
   - margin-bottom : 0.75rem => 15px
  nav => 2.4em = 48px => 0 car masqué !!!
   - font-size: 1rem x 1.15 = 1.15 => 23px
   - button.padding: .25rem + .5rem => .75 => 15px
   - nav.margin: .25rem + .25rem => 0.5 => 10px
  h2 => 2.3rem => 46px
   - font-size : 1.2rem x 1.5 = 1.8 => 36px
   - padding : .25rem + .25rem = .5 => 10px
  button.sticky => 2.3rem => 46px
   - height : 2.3rem => 46px
  .bloc:padding => 1 + 1 = 2px
*/

li {
  padding: 5px 0;
}

/* https://css-tricks.com/couple-takes-sticky-footer/ */
button.sticky {
  background-color: #05f;
  border: 0;
  color: white;
  cursor: pointer;
  height: 2.3rem;
  outline: none;
  padding: .5rem;
  text-align: left;
  text-transform: lowercase;
  width: 100%;
}

button.sticky span {
  background-color: #00f;
  display: inline-block;
  height: 2.3rem;
  margin-top: -.5rem;
  margin-left: -.5rem;
  padding: .5rem;
  text-align: center;
  text-transform: none;
  width: 3rem;
}


/* Players page
   ========================================================================== */

#joueurs input { width: 95%; }


/* Points page
   ========================================================================== */

#points { display: none; }

li span {
  display: inline-block;
  width: 50%;
}

#points input { width: 35%; }


/* Scores page
   ========================================================================== */

#scores { display: none; }

#scores .bloc {
  padding: 1px 0;
}

h3 {
  background-color: #e4e4e4;
  color: #333;
  font-size: 1rem;
  font-weight: normal;
  margin: .25rem 0 0 0;
  padding: 0;
  text-align: center;
}

pre {
  margin: 0;
  padding: 0;
  text-align: center;
}


/* Tablet & Desktop
   ========================================================================== */

@media (min-width: 28rem) {
  body { background-color: #f4f4f4; }
}


/* Old smartphones
   ========================================================================== */

@media (max-width: 22rem) {
  html { font-size: 16px; }
}