@font-face {
  font-family: 'futura-pt';
  font-display: auto;
  font-style: normal;
  font-weight: normal;
  src: url('fonts/FuturaCyrillicMedium.woff') format("woff");
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: #223261;
  font-family: futura-pt,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}

button {
  font-family: futura-pt,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}

#logo-link {
  position: fixed;
  top: 0;
}
#logo {
  height: 120px;
}

.container {
  /*120px => bottom line of the logo*/
  /*min(50px, max(calc((100vh - 320px) / 11), 0px)) => spacing of #button-spin*/
  /*53px #button-spin hight*/
  /*350px because of 0 margin at this width*/
  /*5vw margin on each site, therfore "/ 2"*/
  width:  min(620px, calc(100vw - ((100vw - 350px) / 5 / 2)), (100vh - (120px + min(50px, max(calc((100vh - 320px) / 11), 0px)) + 53px)));
  height: min(620px, calc(100vw - ((100vw - 350px) / 5 / 2)), (100vh - (120px + min(50px, max(calc((100vh - 320px) / 11), 0px)) + 53px)));
  /*Get the difference of the logo bottom line and the top line of the #button-spin (see #button-spin for details)*/
  margin-top: calc(120px - (min(50px, max(calc((100vh - 320px) / 11), 0px)) + 53px))
}

#spinWheelCanvas {
  width: 100%;
  height: 100%;
}

#popup a.button {
  display: inline-flex;
  border: solid;
  border-color: #E60096;
  border-radius: 9999px;
  border-width: 2px;
  color: #E60096;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  padding: .35em 1.2em;
  text-align: center;
  text-decoration: none;
  font-weight: normal;
}

#popup a.button:hover {
  background-color: #E60096;
  border-color: #E60096;
  color: #fff;
}

#popup button {
  display: inline-flex;
  border-style: solid;
  border-width: 2px;
  border-radius: 9999px;
  border-color: #E60096;
  color: #E60096;
  background-color: white;
  font-size: 1rem;
  line-height: 1.6;
  padding: .35em 1.2em;
}

#popup button:hover {
  background-color: #E60096;
  border-color: #E60096;
  color: #fff;
}

#button-spin {
  position: fixed;
  border-radius: 50px;
  background-color: #E60096;
  color: #fff;
  border: none;
  font-size: 24px;
  cursor: pointer;
  /*the bottom value gets calculatet...*/
  /*between 320 and 870 px viewport height*/
  /*and scaled between 0px and 50px */
  /*11 => (870 - 320) / 50*/
  /*scaling between 320 and 870 pixel*/
  /*50 => maximum value*/
  /*so, for every 11px viewport heigh, take 1px spacing*/
  bottom: min(50px, max(calc((100vh - 320px) / 11), 0px));
  font-weight: normal;
  padding: 10px 25px;
}