body {
  font-family: sans;
  margin: 0;
}

header {
  height: 100px;
}

h1 {
  padding-top: 19px;
  margin-top: 0px;
  margin-left: 200px;
}

.sortable {

}

.sort-item {
  padding: 1em;
  border: #CCC 1px solid;
  border-radius: 0.2em;
  cursor: grab;
}

.blue-background-class {
  background: #CDF;
  cursor: grabbing;
}

.voteform {
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 2em;
    line-height: 1.5em;
}

p {
  margin-top: 0;
}

#hello, #voters {
    grid-column: 1  / 3;
}

h2 {
    grid-column: 1  / 3;
    line-height: 1.1em;
}

.result-item {
  color: #888;
}

.result-item:first-child {
  color: #484;
  font-size: 1.5rem;
}

li.result-item::marker {
  font-size: 1.0rem;
}

.ballot {
  border: 1px solid black;
  margin: 1em;
  border-radius: 0.4em;
}

.pos_1 {
  background-color: hsl(120, 80%, 70%);
  color: black;
}

.ballotlist {
  display: flex;
  flex-wrap: wrap;
}

.voter {
  padding: 1em;
  background-color: hsl(240, 10%, 80%);
}

.logo {
  position: absolute;
}
.logo-1 {
  animation-name: fadeoutin;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}
.logo-2 {
  animation-name: fadeinout;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes fadeinout {
  0% {
    opacity: 0%
  }
  10% {
    opacity: 100%
  }
  50% {
    opacity: 100%
  }
  60% {
    opacity: 0%
  }
  100% {
    opacity: 0%
  }
}
@keyframes fadeoutin {
  0% {
    opacity: 100%
  }
  10% {
    opacity: 0%
  }
  50% {
    opacity: 0%
  }
  60% {
    opacity: 100%
  }
  100% {
    opacity: 100%
  }
}

.vote-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-block: 1rem;
}

label {
  font-size: 1.5rem;
}
.emoji {
  font-size: clamp(1rem, 5vw, 2rem);
}

.slider {
  display: flex;
}

table.matrix th {
  text-align: right;
}

table.matrix td {
  text-align: right;
}