@media all and (min-aspect-ratio: 13/9)
{
  :root
  {
    --width-unit: 0.4rem;
    /* --width-unit: 0.6vh; */
  }
}

@media all and (max-aspect-ratio: 13/9)
{
  :root
  {
    --width-unit: 1vw ;
  }
}

*
{
  font-family: 'Pangolin', sans-serif;
  margin:0;
  padding:0;
  text-align: center; 
  border-width: calc(var(--width-unit) * 0.35);
}

ul, .content > *, #responsesForm, #scoreboard, .emoji-picker, form, #kickPlayerButton, #thickness
{
  width: 100%;
}

a
{
  text-decoration: none;
  width: 100%;
}


body, main, form, .canvasBox, .canvasBoxDrawable, .content, #finalNode div, #emojiDisplayContainer, .emoji-picker
{
  display:flex;
  flex-direction: column;
  align-items: center;
}

.content
{
  background-color: #E0FFFF;
  padding: calc(var(--width-unit) * 3);
  border-radius: calc(var(--width-unit) * 1.5);
  border-style: solid;
  margin: calc(var(--width-unit) * 1);
  margin-top: calc(var(--width-unit) * 2);
  width: 92%;
  justify-content: center;
}

body
{
  min-height: 100vh;
  max-width: 100%;
  justify-content: flex-start;
  background-color: rgb(254, 255, 206);
}

header
{
  width: 100%;
  background-color: white;
  padding: calc(var(--width-unit) * 2) 0px;
  border-bottom: solid;
}

main
{
  width: calc(var(--width-unit) * 96);
  /* max-width: 80vh; */
  padding-bottom: calc(var(--width-unit) * 1);
  justify-content: flex-start;
}

footer
{
  justify-self: flex-end;
  margin-top: auto;
  width: 100%;
  background-color: white;
  border-top: solid;
}

footer p
{
  font-size: calc(var(--width-unit) * 4);
}

h1, h2, h3, h4
{
  color: #191970;
}

h1
{
  color: red;
  font-size: calc(var(--width-unit) * 10);
}

h2
{
  font-size: calc(var(--width-unit) * 9);
  width: 100%;
  margin-top: calc(var(--width-unit) * 1);
  margin-bottom: calc(var(--width-unit) * 1);
}

h3
{
  font-size: calc(var(--width-unit) * 7);
  margin: calc(var(--width-unit) * 2);
}

h4
{
  font-size: calc(var(--width-unit) * 5);
  font-weight: normal;
  margin: calc(var(--width-unit) * 2);
  padding: calc(var(--width-unit) * 2);
}

p, label, input, select, button, li, th, td, table, #response
{
  font-size: calc(var(--width-unit) * 5);
  margin: calc(var(--width-unit) * 0.5);
  margin-top: calc(var(--width-unit) * 2);
  margin-bottom: calc(var(--width-unit) * 2);
  padding: calc(var(--width-unit) * 0.5);
  overflow-wrap: break-word;
}

input, select, button[type="submit"], #calculateScoreButton
{
  width: 80%;
  -moz-appearance: none;
  -webkit-appearance: none;
}

#inputBox
{
  display: flex;
  width: 100%;
  justify-content: center;
}

#emojiButton
{
  height: calc(var(--width-unit) * 12);
  width: calc(var(--width-unit) * 12);
  align-self: center;
  padding:auto;
}

input[type="text"], #response
{
  padding-top: calc(var(--width-unit) * 2);
  padding-bottom: calc(var(--width-unit) * 2);
  border-style: solid;
  border-color: black;
  width: 78%;
  background-color: white;
}

#response[placeholder]:empty:before
{
  content: attr(placeholder);
  color: #555; 
}

button, select
{
  color: #191970;
  background-color: white;
  padding: calc(var(--width-unit) * 2);
  border-radius: calc(var(--width-unit) * 2);
  border-style: solid;
  border-color: black;
  touch-action: manipulation;
}

ul, #chain li
{
  list-style: none;
}

li
{
  margin: 0px;
}

li.content, .emojiDisplay
{
  margin-left: auto;
  margin-right: auto;
}

#chain li
{
  background-color: white;
  margin-top: calc(var(--width-unit) * 2);
  margin-bottom: calc(var(--width-unit) * 2);
}

#previousData, .emojiDisplay
{
  max-width: 100%;
  word-wrap: break-word;
}

canvas
{
  background-color: white;
}

.canvasDrawable, input
{
  touch-action: none;
}

.canvas
{
  width: calc(var(--width-unit) * 80);
  max-width: 100%;
}

.canvasDrawable
{
  border:calc(var(--width-unit) * 1) solid #000000;
  border-radius: calc(var(--width-unit) * 4);
  width: calc(var(--width-unit) * 76);
  height: calc(var(--width-unit) * 76);
}

.canvasBoxDrawable
{
  width: 100%;
  height: auto;
}

#canvasButtons, #navigationButtons, .emoji-picker__search, .playerListItem
{
  width: 95%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#skipButton, #forceChainsToEnd
{
  margin-top: calc(var(--width-unit) * 15);
  width: auto;
}

#roomCodeInput
{
  text-transform:uppercase;
}

.message:empty
{
  display: none;
}

content form > *
{
  margin-top: calc(var(--width-unit) * 2);
  margin-bottom: calc(var(--width-unit) * 2);
}

#finalNode
{
  background-color: rgb(123, 255, 167);
  border-style: solid;
  border-radius: calc(var(--width-unit) * 2);
  padding: calc(var(--width-unit) * 1);
}

#finalNode div li
{
  width: 90%;
  margin-bottom: calc(var(--width-unit) * 2);
}

.emojiDisplay
{
  min-height: calc(var(--width-unit) * 6);
  font-size: calc(var(--width-unit) * 10);
}

.emoji
{
  height: calc(var(--width-unit) * 9);
  margin-left: calc(var(--width-unit) * 1);
  margin-right: calc(var(--width-unit) * 1);
  margin-bottom: 0px;
  margin-top: calc(var(--width-unit) * 2);
}

.emoji-picker__search
{
  min-height: calc(var(--width-unit) * 5);
  font-size: calc(var(--width-unit) * 10);
  color: black;
  align-items: center;
}

.emoji-picker__search-icon
{
  margin-top: calc(var(--width-unit) * 1.5);
}

.emoji-picker__search-container
{
  margin-bottom: calc(var(--width-unit) * 10);
  width: 90%;
}

.emoji-picker__content
{
  margin-top: calc(var(--width-unit) * 3);
}

.playerListItem
{
  align-items: center;
  width: 100%;
}

.xButton
{
  background: transparent;
  color: red;
  font-weight: bold;
  border: none;
}

.xButton:focus
{
  outline: transparent;
}

#closePlayerList, #sliderHelp
{
  width: auto;
}

button:hover
{
  cursor: pointer;
}

#sliderHelp
{
  font-size: calc(var(--width-unit) * 3);
  width: auto;
}

.red
{
  color: red;
}

.about p
{
  text-align: left;
}

#lineSettings
{
  width: 80%;
  display: grid;
  grid-template-columns: auto calc(var(--width-unit) * 18);
  grid-template-rows: auto auto;
  margin: calc(var(--width-unit) * 1);
}

#colourSelect
{
  width: calc(var(--width-unit) * 12);
  height: calc(var(--width-unit) * 12);
}

#thicknessLabel, #thickness
{
  grid-column-start: 1;
  grid-column-end: 1;
}

#colourLabel, #colourSelect
{
  grid-column-start: 2;
  grid-column-end: 2;
}

#thicknessLabel, #colourLabel
{
  grid-row-start: 1;
  grid-row-end: 1;
}

#thickness, #colourSelect
{
  grid-row-start: 2;
  grid-row-end: 2;
  justify-self: center;
  margin: 0px;
}