* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 0;
}

@font-face {
  font-family: LeelaUIb;
  src: url(LeelaUIb.ttf);
}

body {
  width: 100%;
  height: 100%;
  background-color: #ff7700;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='%23cc0000' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='%23aa0000' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='%23d6002b' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='%23b10022' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='%23d9004b' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='%23b2003d' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='%23d3006c' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='%23ac0057' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='%23c4008c' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='%239e0071' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='%23aa00aa' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='%23880088' points='943 900 1210 900 971 687'/%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  font-family: LeelaUIb,
    Arial,
    Helvetica,
    sans-serif;
}

.container {
  width: 100%;
  max-width: 450px;
  height: auto;
  min-height: 250px;
  margin: auto;
  text-align: center;
}

h1 {
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}

h1 a {
  color: #fff;
  text-decoration: none;
  font-style: italic;
}

.input {
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

input[type=text],
input[type=button] {
  display: none;
}

input,
.btn {
  width: 100%;
  background: #fff;
  border: none;
  border-radius: 5px;
  font-style: 25px;
  text-align: center;
  font-weight: 600;
  padding: 10px 0;
  margin: 5px auto;
  text-decoration: none;
}

input:hover,
input:focus,
input:active,
.btn {
  background-color: orange;
  color: #fff;
}

.note {
  padding: 5px 20px;
  font-size: 15px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 999px;
  font-style: italic;
}

.screen,
.canvas {
  width: 450px;
  height: 500px;
  position: relative;
  margin: 0 auto;
  display: none;
}

img {
  width: 100%;
  height: 100%;
}

#image {
  position: relative;
}

#frame {
  position: absolute;
  top: 0;
  left: 0;
}

#name {
  position: absolute;
  bottom: 0;
  color: #fff;
  width: 100%;
  text-align: center;
  font-size: 30px;
  line-height: 70px;
  text-transform: uppercase;
}

#test-result {
  width: 100%;
  margin: 25px auto;
  display: none;
}

#inputArea {
  display: block;
}

.gap {
  width: 100%;
  height: 2px;
  background-color: #fff;
  margin: 10px auto;
}