:root {
  --color: white;
}

body {
  margin: auto;
  width: 100%;
  max-width: calc(100% - 32px);
  font-family: "Museo Sans Rounded", sans-serif;
}

html {
  background: linear-gradient(to top left, white, #e1a7ff);
  min-height: 100vh;
}

.menu, .container {
  background: linear-gradient(white, #f1effc 64px, #e4e0f6 90%);
  padding: 32px;
  border: 2px solid black;
  box-shadow: 4px 4px #333;
  margin: 64px 0;
}
  
h1 {
  text-align: center;
}

h2 {
  text-transform: uppercase;
  font-size: 16px;
}

#root {
  display: flex;
  gap: 32px;
}

.container {
  display: flex;
  gap: 24px;
}

.timer, .countdown {
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  margin-top: 0;
}

.info {
  margin-top: auto;
  min-height: calc(var(--cell-size) * var(--rows));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.level {
  margin-bottom: 16px;
  font-size: larger;
  font-weight: 600;
}

.level:before {
  content: "LEVEL ";
}

.countdown-label {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.075em;
  font-weight: 600;
}

.normal {
  --color: #c1cfff;
  --color-dark: #a2b4f2;
  --color-grid: #5e70ad;
}

.timed {
  --color: #ffa7b0;
  --color-dark: #e67782;
  --color-grid: #b33c48;
}

.load {
  --color: #b0ffa7;
  --color-dark: #91e987;
  --color-grid: #4aa740;
}

.creator {
  --color: #ffdaa7;
  --color-dark: #ecc083;
  --color-grid: #ba853c;
}

input[type="submit"], input[type="button"], button {
  appearance: none;
  border: 2px solid black;
  background: linear-gradient(to bottom, white, var(--color) 16px, var(--color-dark) 96%);
  font-weight: 700;
  padding:6px 12px;
  box-shadow: 2px 2px #333;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: black;
  border-radius: 0;
}

input, .code {
  border: 2px solid black;
  box-shadow: 2px 2px #333;
  margin: 2px 0;
  padding: 4px 8px;
  background-color: #FFF;
}

.code {
  height: 21px;
  width: 10em;
  text-overflow: ellipsis;
  overflow: hidden;
}

.code-wrapper {
  position: relative;
}

.clipboard {
  position: absolute;
  top: 10px;
  right: 6px;
  width: 16px;
}

input {
  min-height: 24px;
}

@media screen and (max-width: 450px) {
  body {
    max-width: 100%;
  }
  
  .grid-with-labels {
    max-height: calc(100vh - 100px);
    overflow: scroll;
  }
  
  .container {
    margin: 0 !important;
    display: block;
    border: none;
    height: 100vh;
    min-width: 100%;
    padding: 0;
  }
  
  .info {
    position: absolute;
    bottom: 0;
    width: 100%;
    min-height: 100px;
    max-height: 100px;
    padding: 24px;
    box-sizing: border-box;
    flex-direction: row;
    background: linear-gradient(to top, #c87cef, #e1a7ff);
    border-top: 2px solid #333;
  }
}