:root {
  --dark1: #3A3335;
  --dark2: #6d6164;
  --light1: #b8af9d;
  --light2: #FDF0D5;

  --purple1: #9381FF;
  --purple2: #B8B8FF;

  --red: #EA2B1F;
  --green: #678D58;
  --blue: #47A8BD;
  --yellow: #FFD73A;
}

body {
  padding: 0;
  margin: 0;
  background-color: var(--light2);
  color: var(--dark1);
}

div.header {
  padding: 15px;
  margin: 0;
  width: 100%;
  background-color: var(--purple1);
  overflow: hidden; 
  box-sizing: border-box; 
}
div.header .domain {
  float: left;
  max-width: 50%;
}
div.header .account {
  float: right;
  max-width: 50%;
}
a.no-link {
  color:inherit;
  text-decoration:none;
}

div.container {
  display: grid;
  place-content: center;
}
  
div.container .element {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 8px;
  width: 12rem;
  max-width: calc(
    100vw - 8px * 2
  );
  margin-inline: auto;
}

.popup-bottom {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 8px;
  width: 12rem;
  max-width: calc(
    100vw - 8px * 2
  );
  margin-inline: auto;
}
.popup-middle {
  position: fixed;
  inset: 0px;
  width: 12rem;
  height: 5rem;
  max-width: 100vw;
  max-height: 100dvh;
  margin: auto;
}

form *:read-only {
  border: 0;
  box-shadow: none;
}


@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--dark1);
    color: var(--light2);
  }
}