/*==============================================================*/
/*     R E S E T     */
/*==============================================================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

html, body {
  height: 100%;
}

abbr[title] {
  border-bottom: 1px dotted #888 !important;
  cursor: help;
}

*:focus {
  outline: 0;
}

ul {
  list-style-type: none;
}

/* Apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*==============================================================*/
/*     G R I D     */
/*==============================================================*/
/*==============================================================*/
/*     F O N T S     */
/*==============================================================*/
@font-face {
  font-family: "Komet";
  src: url(../fonts/KometPro-Light.woff2) format("woff2");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Komet";
  src: url(../fonts/KometPro-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Komet";
  src: url(../fonts/KometPro-Medium.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Komet";
  src: url(../fonts/KometPro-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "RubixVAR";
  src: url(../fonts/Rubix16VAR.woff2?v=0.16) format("woff2 supports variations"), url(../fonts/Rubix16VAR.woff2?v=0.16) format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
}
/*==============================================================*/
/*     E X A M P L E     */
/*==============================================================*/
.ribbon {
  background: #666;
}

.row {
  background: #ddd;
}

.col {
  background: #b2b2b2;
  border: 1px solid white;
}

.jf-img {
  position: relative;
}

.jf-descr {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #b2b2b2;
}

.teaser {
  text-align: left;
}
.teaser img {
  max-width: 100%;
}

#breakpoints:after {
  position: fixed;
  font-size: 10px;
  line-height: 12px;
  bottom: 0;
  left: 0;
  z-index: 10000;
  content: "0";
  color: red;
  font-weight: 700;
}
@media only screen and (min-width: 360px) {
  #breakpoints:after {
    content: "1";
  }
}
@media only screen and (min-width: 400px) {
  #breakpoints:after {
    content: "2";
  }
}
@media only screen and (min-width: 480px) {
  #breakpoints:after {
    content: "3";
  }
}
@media only screen and (min-width: 700px) {
  #breakpoints:after {
    content: "4";
  }
}
@media only screen and (min-width: 900px) {
  #breakpoints:after {
    content: "5";
  }
}
@media only screen and (min-width: 1400px) {
  #breakpoints:after {
    content: "6";
  }
}
@media only screen and (min-width: 1800px) {
  #breakpoints:after {
    content: "7";
  }
}

/*==============================================================*/
/*     T Y P E     */
/*==============================================================*/
html {
  font-size: 16px;
}
@media only screen and (min-width: 480px) {
  html {
    font-size: 18px;
  }
}
@media only screen and (min-width: 900px) {
  html {
    font-size: 20px;
  }
}

body {
  font-family: RubixVar, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  line-height: 1.2rem;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  color: hsl(231, 100%, 20%);
  font-feature-settings: "tnum" 1;
}

header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: hsl(231, 100%, 30%);
  color: hsl(0, 0%, 100%);
  padding: 1rem 0 1rem 1rem;
}
header .header-user {
  position: absolute;
  right: 0;
  top: 0;
  padding: 1rem;
  text-align: right;
}
header .header-user .header-user--name {
  font-size: 1.2rem;
}
header .header-user .header-user--name:hover {
  cursor: pointer;
  color: hsl(231, 100%, 85%);
}
header .header-user .header-user--rank {
  display: inline-block;
  color: hsl(0, 0%, 100%);
  background: hsl(293, 100%, 75%);
  border-radius: 50%;
  width: 1.25rem;
  height: 1.25rem;
  text-align: center;
  font-weight: 900;
  margin-left: 0.3rem;
}
header .header-user .header-user--menu {
  display: none;
  margin-top: 1rem;
  padding: 1rem;
}
header .header-user .header-user--menu a {
  color: hsl(0, 0%, 100%);
  text-decoration: none;
}
header .header-user .header-user--menu a:hover {
  color: hsl(231, 100%, 85%);
}
header .header-user.header-user--active {
  background: hsl(231, 100%, 20%);
}
header .header-user.header-user--active .header-user--menu {
  display: block;
}

h1 {
  font-size: 1.2rem;
  flex-grow: 1;
  font-weight: 900;
  font-stretch: 180%;
}

h2 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 800;
}

.tab-container {
  display: flex;
}
.tab-container .tab {
  width: 33.33%;
  display: flex;
  flex-direction: column;
}
.tab-container .tab a {
  display: block;
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 1rem 0.25rem;
  background: hsl(231, 100%, 70%);
  color: hsl(0, 0%, 100%);
}
.tab-container .tab a:hover {
  cursor: pointer;
  background: hsl(231, 100%, 60%);
}
.tab-container .tab:first-of-type a {
  border-right: 1px solid hsl(0, 0%, 100%);
}
.tab-container .tab:last-of-type a {
  border-left: 1px solid hsl(0, 0%, 100%);
}
.tab-container .tab .arrow-down {
  width: 0;
  height: 0;
  border-left: 0.75rem solid transparent;
  border-right: 0.75rem solid transparent;
  border-top: 0.75rem solid hsl(293, 100%, 75%);
  margin: 0 auto;
  opacity: 0;
}
.tab-container .tab.selected a {
  background: hsl(293, 100%, 75%);
  color: hsl(0, 0%, 100%);
  font-weight: 600;
}
.tab-container .tab.selected .arrow-down {
  opacity: 1;
}

.content {
  padding: 1rem;
}

.match {
  margin-bottom: 2rem;
}
.match .match-info {
  background: hsl(231, 100%, 70%);
  color: hsl(0, 0%, 100%);
  padding: 0.5rem 0.5rem 1.5rem 0.5rem;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  border-bottom: 1px solid hsl(0, 0%, 100%);
}
.match .match-info .match-info--meta {
  display: flex;
  margin-bottom: 1rem;
  justify-content: space-between;
}
.match .match-info .match-info--meta .match-info--date {
  flex: 1;
  text-align: left;
}
.match .match-info .match-info--meta .match-info--kickoff {
  flex: 1;
  text-align: center;
  font-weight: 800;
}
.match .match-info .match-info--meta .match-info--description {
  flex: 1;
  text-align: right;
}
.match .match-info .match-info--teams {
  display: flex;
  justify-content: center;
}
.match .match-info .match-info--teams .match-info--team {
  width: 100%;
}
.match .match-info .match-info--teams .match-info--team .match-info--team--flag {
  display: flex;
  justify-content: center;
  margin-bottom: 0.25rem;
}
.match .match-info .match-info--teams .match-info--team .match-info--team--flag .match-info--team--flag--container {
  background: hsl(0, 0%, 100%);
  border: 1px solid hsl(0, 0%, 100%);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  overflow: hidden;
}
.match .match-info .match-info--teams .match-info--team .match-info--team--flag .match-info--team--flag--container span {
  display: inline-block;
  text-align: center;
  font-size: 2.75rem;
  line-height: 1.5rem;
  margin-top: -0.075rem;
  margin-left: -0.25rem;
}
.match .match-info .match-info--teams .match-info--team .match-info--team--name {
  text-align: center;
  font-weight: 800;
}
.match .match-info .match-info--result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  white-space: nowrap;
}
.match.match-prev .match-info {
  background: hsl(231, 100%, 85%);
  color: hsl(231, 100%, 20%);
}
.match.match-prev .match-info .match-info--meta .match-info--kickoff {
  font-weight: 400;
}
.match.match-prev .match-info .match-info--teams .match-info--team .match-info--team--name {
  font-weight: 600;
}

.user-tips .user-tip {
  line-height: 1.5rem;
  display: flex;
  padding: 0.5rem 0.75rem;
  align-items: baseline;
}
.user-tips .user-tip:nth-child(odd) {
  background: hsl(231, 100%, 90%);
}
.user-tips .user-tip:nth-child(even) {
  background: hsl(231, 100%, 95%);
}
.user-tips .user-tip:last-of-type {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.user-tips .user-tip.current-user .user-tip--name, .user-tips .user-tip.current-user .user-tip--result--score, .user-tips .user-tip.current-user .user-tip--result--points {
  font-weight: 700;
}
.user-tips .user-tip .tipp-form {
  display: flex;
}
.user-tips .user-tip .tipp-form input[type=number] {
  width: 2rem;
  margin: 0 0.5rem;
  text-align: center;
}
.user-tips .user-tip .tipp-form button {
  margin-left: 0.25rem;
}
.user-tips .user-tip .tipp-form .result-divider {
  font-weight: bold;
}
.user-tips .user-tip .tipp-form.hidden {
  display: none;
}
.user-tips .user-tip .user-tip--name {
  flex-grow: 1;
}
.user-tips .user-tip .user-tip--result .user-tip--result--points {
  margin-left: 1rem;
}
.user-tips .user-tip .user-tip--result.hidden {
  display: none;
}

.edit-tipp {
  appearance: none;
  border: 1px solid hsl(231, 100%, 20%);
  border-radius: 1rem;
  padding: 0 0.75rem;
  background: none;
  color: hsl(231, 100%, 20%);
  font-family: RubixVar, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  font-size: 1rem;
  margin-right: 0.75rem;
  line-height: 1.4rem;
}

.ranking-table {
  overflow-x: scroll;
}
.ranking-table table {
  border-collapse: collapse;
}
.ranking-table table tr:nth-child(even) {
  background: hsl(231, 100%, 90%);
}
.ranking-table table tr:nth-child(odd) {
  background: hsl(231, 100%, 95%);
}
.ranking-table table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 0.5rem;
}
.ranking-table table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 0.5rem;
}
.ranking-table table tr.current-user {
  font-weight: 700;
}
.ranking-table table tr td {
  padding: 0.5rem;
  border: 1px solid hsl(0, 0%, 100%);
}
.ranking-table table tr th {
  background: hsl(231, 100%, 70%);
  padding: 0.5rem;
  border: 1px solid hsl(0, 0%, 100%);
  color: hsl(0, 0%, 100%);
  font-weight: 700;
  text-align: left;
}
.ranking-table table tr th:first-of-type {
  border-top-left-radius: 0.5rem;
}
.ranking-table table tr th:last-of-type {
  border-top-right-radius: 0.5rem;
}

form input[type=number], form input[type=text], form input[type=password] {
  appearance: none;
  border: 1px solid hsl(231, 100%, 30%);
  border-radius: 0.3rem;
  font-family: RubixVar, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  font-size: 1rem;
  font-feature-settings: "tnum" 1;
}
form button {
  appearance: none;
  border: none;
  border-radius: 1rem;
  padding: 0 1rem;
  background: hsl(293, 100%, 75%);
  color: hsl(0, 0%, 100%);
  font-family: RubixVar, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

.login-container {
  padding: 3rem 1rem;
  margin: 0 auto;
  width: 15rem;
}
.login-container .login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-container .login-form input[type=text], .login-container .login-form input[type=password] {
  margin-bottom: 1rem;
  width: 100%;
}
.login-container .login-form button {
  flex-grow: 0;
  width: auto;
  padding: 0.5rem 1rem;
}