@import url('https://fonts.googleapis.com/css?family=Rubik:500');
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@900&display=swap');

* {margin: 0; padding: 0}
html, body {height: 100%; margin: 0; background-color: rgb(50,50,50)}
canvas {outline: none; position: absolute; }

dialog
{
  max-width: 90%; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  font-family: archivo;
  transform: translate(-50%, -50%); 
  background-color: rgba(0,0,0,0.65);
  border-radius: 12px;
  border-width: 8px; 
  border-color: rgba(255,255,255,0.65);
  padding: 20px 20px 20px 20px; 
}

dialog::backdrop 
{
  background-color: rgba(0,0,0,0.5);
}

label
{
  color: white;
  display: block;
  font-weight: bold; 
  text-align: left;
  font-family: archivo;
  width: 100%; 
  border-radius: 5px;
  height: 44px;
  line-height: 44px;
  font-size: 1.1em; 
}

input
{
  padding: 5px 12px;
  line-height: 20px;
  vertical-align: middle;
  background-color: rgba(0,0,0,0.75);
  height: 44px;
  resize: none;
  font-family: archivo;
  padding: 15px;
  outline: none;
  border-radius: 12px;
  border-width: 2px;
  border-color: white;
  color: white;
  text-align: left;
  font-weight: bold;
  box-sizing: border-box; 
  width: 100%; 
  font-size: 1.1em; 
}

textarea
{
  padding: 5px 12px;
  line-height: 26px;
  vertical-align: middle;
  background-color: rgba(0,0,0,0.75);
  height: 100%;
  resize: none;
  font-family: archivo;
  outline: none;
  border-radius: 12px;
  border-width: 2px;
  border-color: white;
  color: white;
  text-align: left;
  font-weight: bold;
  box-sizing: border-box; 
  width: 100%; 
  font-size: 1.1em; 
}

button
{
  font-family: archivo;
  text-align: center;
  font-size: 1.1em;
  font: copperplate;
  font-weight: bold;
  border: 13;
  border-radius: 8px;
  border-width: 2px;
  border-color: white;
  background-color: black;
  color: white;
  margin-top: 20px;
  margin-left: 0px;
  width: 25%;
  height: 44px;
}

.centered
{
  text-align: center;
}