html,
body {
  background: var(--skin-primary, #597d98);
  font-size: 16px;
  font-family: Verdana, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#container {
  position: fixed;
  width: calc(min(90vw, 400px));
  top: calc(50% - 200px);
  left: calc(50% - min(45vw, 200px));
  border-radius: 16px;
  background: var(--skin-color, rgb(231 231 231));
  box-shadow: 0 0 24px #0000004d;
  animation: 1s ease-in-out 0s fadeIn;
  -moz-animation: 1s ease-in-out 0s fadeIn;
  -webkit-animation: 1s ease-in-out 0s fadeIn;
}

form {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 60px 36px 36px;
  gap: 16px;
}

h2 {
  font-size: 36px;
  font-weight: bold;
  color: var(--skin-primary, #597d98);
}

h6 {
  font-weight: bold;
  color: var(--skin-secondary, #737272);
}

h6,
div {
  margin-bottom: 20px;
}

input {
  font-size: 16px;
  padding: 8px;
  box-shadow: 0 5px 5px #0000004d;
}

input:not([type='submit']) {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--skin-secondary, gray);
  border-radius: 4px;
}

input[type='submit'] {
  cursor: pointer;
  margin-left: auto;
  width: 50%;
  border-radius: 16px;
  border-width: 0;
  color: var(--skin-color, white);
  background-color: var(--skin-primary, #597d98);
  transition: all 0.1s ease-in-out;
}

input[type='submit']:hover {
  background-color: var(--skin-primary-hover, #374f61);
}

.showaction {
  position: relative;
  bottom: 28px;
  width: 60px;
  height: 0;
  left: calc(100% - 72px);
  font-weight: bold;
  text-align: right;
  cursor: pointer;
  color: var(--skin-secondary, #505050);
  transition: all 0.1s ease-in-out;
  user-select: none; /* Standard syntax */
  -ms-user-select: none; /* IE 10 and IE 11 */
  -webkit-user-select: none; /* Safari */
}

.showaction:hover {
  color: var(--skin-primary, #597d98);
}