@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
    display: flex;
    margin: 0;
    background-color: #f8f8f8;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 5rem;
}

.page-container {
    display: flex;
    text-align: center;
    justify-content: center;
    /* flex-direction: row; */
    flex-direction: column !important;
    /* max-width: 700px; */
    height: 100vh;
    min-height: 100vh;
    margin: auto auto auto auto;
}

/* .disable-dbl-tap-zoom {
  touch-action: manipulation;
} */

#pollStatus {
    display: flex;
    flex-direction: column;
    margin: auto auto auto auto;
}

#pollStatus h2 {
  margin-top: 0;
}

#cast-vote-h2 {
  margin-top: 5px;
}

#sok-tekst {
  display: flex;
  flex-direction: column;
  margin: auto auto auto auto;
}


.buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 100px;
}

button {
    border: none;
    outline: none;
    background-color: #6c5ce7;
    /* padding: 10px 20px; */
    padding: 50px 70px;
    /* font-size: 12px; */
    font-size: 60px;
    font-weight: 700;
    color: #fff;
    /* border-radius: 5px; */
    border-radius: 24px;
    transition: all ease 0.1s;
    /* box-shadow: 0px 5px 0px 0px #a29bfe; */
    box-shadow: 0px 13px 0px 0px #a29bfe;
  }
  
  button:active {
    transform: translateY(5px);
    box-shadow: 0px 0px 0px 0px #a29bfe;
  }


  /* Animations */

  #animation-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto auto 0 auto;

    
  }

  /* svg{
    max-width: 50vw;
    max-height: 50vh;
    } */

  #countdownCircleContainer {
    /* width: 150px; */
    /* height: 150px; */

    width: 50vw; /* You can adjust this to the size you want */
    /* height: 50vh; */
}

  #countdownCircle {
      fill: none;
      stroke-width: 10; /* Adjust for torus thickness */
      /* stroke: #ff0000; */
      stroke:#9891ff;
      transform-origin: 50% 50%;
      stroke-dasharray: 282; /* Circumference of the circle (2 * π * r) */
      stroke-dashoffset: 282; /* Start with full circle */

      /* Make animation go clockwise */
      /* transform: scale(-1, 1) rotate(-90deg); */

      transform: rotate(-90deg); /* To start the progress at the top */
      stroke-dasharray: 282; /* the circumference of the circle */
      stroke-dashoffset: 282; /* start with a full circle */
  }

  #backgroundCircle {
    fill: none;
    stroke-width: 10; /* Adjust for torus thickness */
    stroke: rgb(230, 230, 230);
    transform-origin: 50% 50%;
}

  .hidden {
    visibility: hidden;
    display: none !important;
  }

  .visible {
    visibility: visible;
  }





  @media (max-width: 1080px) {
    /* … */

    body {
      margin:0;
      font-size: 3em;
  }

  .page-container {
    display: flex;
    text-align: center;
    justify-content: center;
    flex-direction: row;
    max-width: 700px;
    height: 100dvh;
    min-height: 100dvh;
    margin: auto auto auto auto;
  }

  /* .disable-dbl-tap-zoom {
    touch-action: manipulation;
  } */

  #pollStatus {
    display: flex;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    margin: auto auto auto auto;
    max-width: 85vw;
  }

  #pollStatus h2 {
    margin-top: 0;
    margin-bottom: 5%;
  }

  #cast-vote-h2 {
    margin-top: 5px;
    font-size: 60px;
  }

  #sok-tekst {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: auto auto auto auto;
    max-width: 75vw;
    height: 100dvh;
    max-height: 100dvh;
  }

    .buttons {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-left: auto;
      margin-right: auto;
      gap: 20%;
  }

    button {
        border: none;
        outline: none;
        background-color: #6c5ce7;
        /* padding: 10px 20px; */
        padding: 5% 7%;
        margin-bottom: 5vh;
        min-width: 87%;
        max-width: 87%;
        min-height: 87px;
        font-size: 0.5em;
        font-weight: 700;
        color: #fff;
        /* border-radius: 5px; */
        border-radius: 24px;
        transition: all ease 0.1s;
        box-shadow: 0px 24px 0px 0px #a29bfe;
  }

    button:active {
        transform: translateY(20px);
        box-shadow: 0px 0px 0px 0px #a29bfe;
  }


  /* sokim.ejs only */

  #sok-tekst h3 {
    font-size: 22pt;
  }  

  }