/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

body {
  font-family: "Source Sans Pro", sans-serif;
  line-height: 24px;
  margin: 0;
  background-color: #341176;
  color: white;

  svg:not(:root) {
    overflow: hidden;
  }

  a {
    color: white;
  }

  a:focus {
    outline: thin dotted;
  }

  a:active,
  a:hover {
    outline: 0;
  }

  b {
    font-style: bold;
  }

  header {
    background-color: #1c0a33;
    color: #b1b3b6;
    height: 223px;
    padding: 0 206px 8px 206px;

    span {
      float: left;
      width: 100%;
      line-height: 75px;
      margin: 32px 0 0 0;
      font-size: 60px;
      background-image: url("/static/images/dw-logo-voting-info-project.png");
      background-repeat: no-repeat;
      background-size: contain;
      padding-left: 480px;
      font-weight: 300;
      color: #b1b3b6;
    }

    nav {
      float: right;
      margin-top: 24px;
    }

    ul {
      margin: 5px 0;
      text-align: center;

      li:first-child {
        text-transform: uppercase;
      }

      li {
        display: inline-block;

        font-weight: 600;
        font-size: 18px;
        margin-left: 9px;

        a {
          color: #b1b3b6;
          text-decoration: none;
          padding: 5px 18px 5px 18px;
          display: inline-block;
          border: 2px solid #b1b3b6;
          border-radius: 30px;
        }
      }
    }
  }

  main {
    margin: 0 206px 0 206px;

    h1 {
      font-size: 2em;
      margin: 0.67em 0;
    }

    dialogue :modal {
      border-color: #b1b3b6;
    }

    label {
      margin-top: 10px;
    }

    legend {
      font-weight: 700;
    }

    progress {
      display: block;
    }

    button {
      background: #6231c6;
      border: none;
      color: #ebebeb;
      display: inline-block;
      font-size: 1em;
      font-weight: bold;
      padding: 0.5em 1em;
      text-align: center;
      text-shadow: none;
      border-radius: 10px;
      letter-spacing: 1px;
    }

    .htmx-indicator {
      border: 10px solid #f3f3f3;
      border-radius: 50%;
      border-top: 10px solid #3498db;
      width: 25px;
      height: 25px;
      margin: 10px;
      -webkit-animation: spin 2s linear infinite;
      /* Safari */
      animation: spin 2s linear infinite;
    }

    hr {
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      height: 0;
    }

    fieldset {
      border: none;
      margin: 0 2px;
      padding: 0.35em 0.625em 0.75em;

      ul {
        margin: 0;
        padding: 0;
      }
    }

    ul {
      list-style: none;
    }

    iframe {
      width: 100%;
      max-width: 1300px;
      height: 600px;
      border: none;
    }

    code {
      background-color: whitesmoke;
      font-family: monospace, serif;
      color: black;
      border: 1px solid #ebebeb;
    }

    table {
      width: 100%;
      background: white;
      color: #6231c6;
      text-align: left;
      table-layout: fixed;
      border-collapse: collapse;
      margin-top: 30px;
      border-spacing: 0;

      caption {
        text-align: left;
        color: #ebebeb;
        margin: 5px 0;
      }

      tr {
        border-top: 1px solid #6231c6;
        padding: 16px;
        line-height: 57px;
        vertical-align: middle;
      }

      tr :nth-child(1) {
        width: 10%;
        padding-left: 20px;
      }
    }
  }

  footer {
    margin: 0 206px 0 206px;
  }
}

.hidden {
  display: none;
}