/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/
/* Our default values set as CSS variables */
:root {
  --color-bg: #000;
  --color-text-main: #000000;
  --color-primary: #D7F5EF;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem;
  --font-family: "HK Grotesk";
  --font-family-header: "HK Grotesk";
}

/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

/* Import fonts */
@font-face {
  font-family: HK Grotesk;
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027")
    format("opentype");
}
@font-face {
  font-family: HK Grotesk;
  font-weight: bold;
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Bold.otf?v=1603136323437")
    format("opentype");
}

/* Our remix on glitch button */
.btn--remix {
  font-family: HK Grotesk;
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
  line-height: 1rem;
  font-weight: 500;
  height: 2.75rem;
  align-items: center;
  cursor: pointer;
  background: #FFFFFF;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  text-decoration: none;
  color: #000;
  white-space: nowrap;
  margin-left: auto;
}
.btn--remix img {
  margin-right: 0.5rem;
}
.btn--remix:hover {
  background-color: #D0FFF1;
}

/* Navigation grid */
.footer {
  display: flex;
  justify-content: space-between;
  margin: 1rem auto 0;
  padding: 1rem 0 0.75rem 0;
  width: 100%;
  flex-wrap: wrap;
  border-top: 4px solid #fff;
}

.footer a:not(.btn--remix):link,
a:not(.btn--remix):visited {
  font-family: HK Grotesk;
  font-style: normal;
  font-weight: normal;
  font-size: 1.1rem;
  color: #000;
  text-decoration: none;
  border-style: none;
}
.footer a:hover {
  background: var(--color-primary);
}

.footer .links {
  padding: 0.5rem 1rem 1.5rem;
  white-space: nowrap;
}

.divider {
  padding: 0 1rem;
}
/******************************************************************************
END Glitch hello-app default styles
******************************************************************************/

body {
  font-family: HK Grotesk;
  background-color: var(--color-bg);
}


.content {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  max-width: 1200px;
}

.threecol .col { width: 30%; float: left; margin-right: 3%; }
.threecol .col table { width: 100%; }
p,
label {
  font-size: 1.25rem;
}

/* Title h1 style */
h1 {
  color: #2800FF;
  font-family: HK Grotesk;
  font-style: normal;
  font-weight: bold;
  font-size: 100px;
  line-height: 105%;
  margin: 2rem 0 0;
}

/* Very light scaling for our illustration */
.illo-container {
  display: flex;
  justify-content: flex-end;
}
.illustration {
  max-width: 100%;
  max-height: 150px;
  margin-top: 1rem;
}

/* Styles for our poll form and its results */
.poll-form,
.poll-results {
  background-color: #FFF3FC;
  padding: 0 16px 16px 16px;
  border-radius: 8px;
}
.poll-form button:hover {
  cursor: pointer;
  box-shadow: -8px 4px 20px var(--color-primary);
}
button,
input {
  font-family: inherit;
  font-size: 100%;
  background: #FFFFFF;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 0.5rem 1rem;
}
button {
  cursor: pointer;
}
label {
  color: #000000;
  font-weight: bold;
}

/* Instructions */
.instructions {
  margin: 1rem auto 0;
}
.instructions p {
  font-size: 1rem;
}
h2 {
  color: #2800FF;
}
h3 {
  
  text-align: center;
    text-transform: uppercase;
    margin-bottom: 0px;
    background-color: #fff;
}

/* Admin page */
table {
  text-align: left;
  border-collapse: collapse;
  background-color: #FFFFFF;
  font-size: 0.9em;
}
td,
th {
  border: 2px solid #FCF7F1;
  padding: 0.5rem;
}
p a {
  text-decoration: none;
  font-weight: bold;
}
p.error,
p.error a:link,
p.error a:visited {
  color: #2800FF;
}
.results {
  padding-top:10px;
}
.clear { display: block; clear: both; }
body.game {
  margin: 0;
}
body.game .wrapper {
  z-index: 1;
  width: 100%; 
}

#canvas { width: 100%; height: 56vw; z-index: 9999;}
.header {text-align: center; width: 100%; height: 16vw;}
.header img {height: 16vw; min-height: 120px;}
  table { background-color: #000; color: #fff; width: 100%;}
  table a, table a:visited { color: #fff !important; text-decoration: none;}
  table td { padding: 3px; border-width: 1px;}
  table td.x { font-weight: bold; padding: 5px;}
body .scorekeeper { display: none;}
body.scorekeeper .scorekeeper { display: block; }
body .header { background-image: url('https://cdn.glitch.global/ebb07e8c-a40a-4cf7-9130-9c7d4b20552a/pdxballhockey1.jpg?v=1680287646887'); background-repeat: repeat-x; display: block; width: 100%; background-size: contain; min-height: 120px; }
body .header .left { float: left;}
body .header .right { float: right;}
body .menu { display: block;  font-size: 2.5vw; position: absolute; top: 2vw;left: 2vw;  }
body .menu span { display: block; color: #fff; float: left;  text-transform: uppercase; clear: both; margin-bottom: .5vw;  }
body .menu span a, body .menu span a:visited { color: #fff;text-decoration: none; font-weight: bold; background-color: #666; padding: 0 5px; }
body .menu span a.current { color: #666; background-color: #fff;}
body p, body ul { color: #fff; font-size: 1em; margin: 10px 0; }
body h4 { color: #fff; font-size: 1.1em; margin: 0px; fon-weight: bold; }
body .wrapper { padding: 1vw; clear: both; }
body p.login a, body p.login a:visited { color: Blue; }
body.game #gameStart { display: none; overflow-y: show; }
body.game.statusupcoming .wrapper { background-image: none; height: 100vh; background-color: #000; }
body.game.statusupcoming #canvas { display: none;  }
body.game.statusupcoming.result0 #gameStart { display: block;  }
body.game.statusupcoming h4 { color: #fff;  }
body.game.statusfinal td.x { display: none;}
body.game.admin td.x { display: block;}
body.game #btnStartGame { display: none;  }
body.game.statusupcoming #btnStartGame { display: block;  }
body.game.statusupcoming #btnResetGame { display: none;  }
body.game .modal h4 { display: block; width: 100%; background-color: #fff; color: #000; text-align: center;}
body.game button.restart { display: none; }
body.game #wrapper.paused button.restart { display: block; }
body.game label { font-size: 1rem; }
body #gameStart { background-color: #000; color: #fff; position:absolute; width: 100%; top: 0px; }
body #gameStart .homeTeamRoster { width: 50%; float: left; }
body #gameStart .awayTeamRoster { width: 50%; float: right; clear: right; }
body #gameStart button { float: left; }
body #gameTime { background-color: #000; color: #fff; margin-top: -30px; width: 100%; min-height: 400px;  }
body #gameTime input.time { width: 60px;}

body .scorebox { background-color: #fff; text-align: center; display: block; overflow-y: auto; height: 17vw; margin-bottom: 5vw; }
body .scorebox .name { font-size: 3vw; font-weight: bold; color: #fff; text-transform: uppercase; display: block; clear: both; }
body .scorebox .shots { font-size: 2vw; font-weight: bold; color: #fff; text-transform: uppercase;  }
body .scorebox .teamone  { float: left; clear: left; width: 50%; text-align: left; height: 17vw; max-height: 90px; }
body .scorebox .teamtwo  { float: right; clear: right;width: 50%; text-align: right; height: 17vw; max-height: 90px; }
body.game .scorebox .teamone .score  { position: absolute; left: 8vw; top: 4vw;  }
body.game .scorebox .teamtwo .score { position: absolute; right: 8vw; top: 1vw;  }
body.game .scorebox .teamone .shots  { position: absolute; left: 8vw; top: 12vw;  }
body.game .scorebox .teamtwo .shots { position: absolute; right: 8vw; top: 10vw;  }
body.game .scorebox .teamone .name { position: absolute;  top: 0vw; }
body.game .scorebox .teamtwo .name { position: absolute; right: 0px; top: 14vw; }
body.home #livegame, body.home #livegame .scorebox { max-width: 800px; display: block; clear: both; overflow-y: hidden; }
body.game #control-footer { display: block; clear: both; width: 100%; height: 20px; color: #fff; border-top: 1px solid #fff;  background-color: #000; margin-top: 20px;text-align: center; position: fixed; bottom: 0px; }
body.game #control-footer a, body.game #control-footer a:visited { text-transform: uppercase; font-size: 0.9em; color: #fff;  }
body.game.scorekeeper #control-footer .scorekeeper { display: none; }
body.game.scorekeeper #control-footer .guest { display: none; }
body.game.scorekeeper #control-footer .scorekeeper { display: block; }
body.game.admin #control-footer .scorekeeper { display: block; }

body.home h3.scores {max-width: 550px; }
body.home .scorebox { max-width: 550px; max-height: 90px; overflow-y: hidden; margin-bottom: 10px;}
body.home .scorebox .shots { display: block; clear: both; font-size: 18px; }
body.home .scorebox .score { display: block; clear: both; padding: 0px 20px; font-size: 40px; margin-top: -10px;}
body.home .scorebox .name { font-size: 20px;  }

body #time, body.home .scorebox .time { font-size: 10vw; font-weight: bold; color: #fff; position: absolute; top: 3vw; left: 37vw; cursor: pointer; }
body.home .scorebox .time { top: auto; margin-top: 25px; left: 280px;font-size: 8vw; }
  body.home .scorebox .time {left: 250px; font-size: 2em; margin-top: 25px;}
  body.home .scorebox .time a { color: #fff; text-decoration: none; }
body .scorebox .time .period { font-size: 3vw; clear: both; display: block; margin-top: -3vw;}
body.home .scorebox .time .period { font-size: 2vw;margin-top: -2vw; }
body .scorebox .time.paused {  animation: blinker 1s linear infinite; }
  body.game .header #exit { position: absolute; right: 0px; top: 0px; }
  body.game .header #exit a {  color: #fff; font-weight: bold; text-decoration: none; font-size: 20px; }
body .scorebox .score { font-size: 8vw; font-weight: bold; color: #fff;   }
body.game .header .id { display: none; }
body.game .goalDetails, body.game .penaltyDetails { position: absolute; top: 10%; margin: auto; z-index: 999999; display: block; background-color: #fff; color: #000; padding-bottom: 50px; }
body.game #gameStats { display: block; overflow: visible; padding-bottom: 20px; }
body.game .half { width: 48%; display: block; float: left; padding-right: 2%; overflow: visible; }
body.game  .half.right { text-align: right; padding-right: 0; padding-left: 2%;}
body.game #penalty label { color: #fff; }
body.game #gamelog { color: #fff; margin-left: 5vw;}
body.game #gamelog .shots { width: 30%; float: left; }
body.game #gamelog .goals { width: 65%; float: right;margin-left: 5%; }
body.statusfinal #gamelog .goals { float: left; }
body.admin #gamelog .goals { float: right; }
body.game #gamelog .pims { width: 65%; float: right;margin-left: 5%; }
body.game #gamelog h4 { margin-bottom: 0px; text-transform: uppercase; text-align: center;}
body.game #gamelog table { background-color: #000; color: #fff; }
body.game #gamelog table td.x { display: none; }
body.game.scorekeeper #gamelog table td.x { display: block; }
body.game.admin #gamelog table td.x { display: block; }

body.game a.add { display: none; }
body.game.scorekeeper a.add { display: inline; }
body.game.admin a.add { display: inline; }

body.game.statusfinal a.add { display: none; }
body.game.admin a.add { display: inline; }
body.game #gameStats .shots, body.game #gameStats .goals, body.game #gameStats .pims { padding-bottom: 20px; }

body.game #gameStats  h4 { font-size: 1.5em; color: #fff;}
body.game #gameStats  h4 span.shots { font-size: 1.6em;  }
body.game #gameStats  a.add { font-size: 1.6em; color: #fff; text-decoration: none; }
body.game #gameStats .goals table a.add { font-size: 1em; color: #fff; text-decoration: none; }
  table td.hidden, table th.hidden { display: none; }


body #team, body #season { font-size: 1.2em; }
body.sked p>a, body.sked p>a:visited { color: #fff;}
@media only screen and (max-width : 900px) {
  body .menu span { margin-bottom: 10px; font-size: 15px; }
  .threecol .col { width: 100%; clear: both; }

  body.game .scorebox #time { font-size: 4em; left: 30vw; }
  body.home .scorebox .time { left: 40vw; }
  body .periodold { position: absolute; left: 40vw; top: 80px;} 
  body.home .scorebox { min-height: 90px;}
  body .scorebox .name { font-size: 1.4em;}
  body .scorebox .score { font-size: 3.5em;}
  body .scorebox .shots { font-size: 1em; top: 100px;}
  body .scorebox .teamone .score  { font-size: 3.5em;  }
  body .scorebox .teamtwo .score { font-size: 3.5em;  }
  body.game .scorebox .teamone .score  { position: absolute; left: 8vw; top: 6vw;font-size: 3.5em;  }
  body.game .scorebox .teamtwo .score { position: absolute; right: 8vw; top: 6vw;font-size: 3.5em;  }
  body.game .scorebox .teamone .shots  { position: absolute; left: 4vw; top: 100px;  }
  body.game .scorebox .teamtwo .shots { position: absolute; right: 4vw; top: 0px;  }
  body.game .scorebox .teamone .name { position: absolute;  top: 0vw;  }
  body.game .scorebox .teamtwo .name { position: absolute; right: 0px; top: 95px; }
  body.home .scorebox .name { font-size: 1.2em;}
  body.home .scorebox .score { margin-top: -5px; font-size: 2.5em !important; padding: 0 40px;}
  body.home .scorebox .shots { font-size: 0.9em; }
  body.home .scorebox { margin-bottom: 1vw; overflow-y: hidden; }
  
  body.game .goalDetails, body.game .penaltyDetails { width: 100%; height: 100%; top: 120px; background-color: #000; }
  body.game .goalDetails table { width: 100%;  }
  body.game .penaltyDetails table { width: 50%; float: left; }
  body.game .goalDetails table input[type=checkbox], body.game .penaltyDetails table input[type=checkbox] { transform: scale(1.5); }
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}