@font-face {
    font-family: Digi;
    src: url('../fonts/DS-DIGI.TTF');
}

@font-face {
  font-family: Raleway;
  src: url('../fonts/Raleway-Regular.ttf')
}

html {
  height: 100%;
}

body {
  height:100%; overflow: hidden; /* prevents scrolling */
}

.row.header {
  border-bottom: 1px solid rgba(26,188,156,0.2);
  margin-bottom: 10pt;
}

.row.header i {
  font-size: 40pt;
  color: #1abc9c;
}

div.settings, div#history {
  visibility: hidden;
}

div.settings .button {
  width: 85%;
  padding: 0;
  font-weight: lighter;
  border-color: #1abc9c;
  color: #1abc9c;
  font-size: 70%;
  line-height: 24pt;
  height: 24pt;
}

div.settings .button:hover {
  background-color: #1abc9c;
  color: white;
}

div.settings .button i {
  font-size: 16pt;
  float: left;
  margin-left: 12pt;
}

div.scores {
  font-size: 10pt;
}

table tr:last-child td {
  border-bottom: none;
}

div#history {
  overflow-y: scroll;
}

div#history table {
  font-size: 10pt;
  margin-bottom: 0;
}

div#history table td{
  text-align: center;
}

div#history table tr:last-child {
  margin: 0;
  padding: 0;
}

div#history i {
  font-size: 12pt;
}

#newTimeText {
  max-width: 70pt;
  margin: 0;
}

div#timer {
  font-family: 'Digi', 'Avenir', 'Helvetica';
  line-height: 130pt;
  font-size: 130pt;
  text-align: center;
  padding: 0;
}

div#instructions {
  font-size: 10pt;
}

div#scramble {
  font-size: 17pt;
}

div#instructions, div#scramble {
  text-align: center;
  font-style: italic;
}

#session {
  height: 40pt;
  line-height: 40pt;
}

#session select {
  width: 150pt;
  margin-left: 10pt;
  margin-right: 10pt;
  margin-bottom: 0;
}

#session i {
  font-size:18pt;
  vertical-align: middle;
}

#pressEnterToSaveSession {
  font-style: italic;
}

.card {
  max-height: 150pt;
  max-width: 220pt;
  border-radius: 2pt;
  padding: 5pt;
  text-align: center;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.1), 1px 1px 4px rgba(0,0,0,0.12);
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}

#toucharea {
  display: inline-block;
}

/* AppLand responsive fixes */
body {
  overflow: auto !important;
}

@media (max-width: 900px) {
  div#timer {
    font-size: clamp(48px, 16vw, 90px);
    line-height: 1.05;
  }
  div#scramble {
    font-size: 14px;
    word-break: break-word;
    padding: 0 8px;
  }
  .card {
    max-width: 96vw;
  }
  #session select {
    width: min(70vw, 250px);
  }
}