/*----------------------------------------------------------------------------------------
  Default styling rules.
----------------------------------------------------------------------------------------*/
  *{margin: 0; padding: 0;}

  html, body {
    width: 100%;
    height: 100%;
  }

  body {
    background-color: var(--background);
  }

/*----------------------------------------------------------------------------------------
  Color variables.
----------------------------------------------------------------------------------------*/
  :root {
    --background: #282828;
    --background-accent-dark: #484848;
    --background-accent-light: #d0d0d0;

    --text: #eee;
    --text-accent: #000;

    --odd-slice: #5f8952;
    --even-slice: #d0d0d0;

    --button-color: #7fa972;
    --button-color-pressed: #2f603d;
    --button-color-disabled: #2f603d55;
  }

/*----------------------------------------------------------------------------------------
  font style.
----------------------------------------------------------------------------------------*/
  * {
    font-family: montserrat, ariel;
    color: var(--text);
  }

/*----------------------------------------------------------------------------------------
  top bar.
----------------------------------------------------------------------------------------*/
  .header {
    position: absolute;
    top: 0; left: 0; right: 0;  

    height: 35px;

    padding: 0 10px;

    background-color: var(--background-accent-dark);
    
    z-index: 100;
  }

  .header > div {
    font-size: 25px;
    font-weight: 600;
    line-height: 35px;

    cursor: default;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; 
  }

/*----------------------------------------------------------------------------------------
  Roulette wheel.
----------------------------------------------------------------------------------------*/
  .wheel-outerwrapper{
    overflow: hidden;

    width: 100%;
    height: 100%;

    max-height: 850px;
  } 

  .wheel-innerwrapper{
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    width: 60vw;
    height: 60vw;

    min-width: 30em;
    min-height: 30em;

    max-width: 760px;
    max-height: 750px;

    overflow: hidden;
  }

  #indicator {
    position: absolute;
    top: -9px;
    left: calc(50% - 2.5px);

    transform: translateX(-50%) rotate(45deg);

    width: 15px;
    height: 15px;

    z-index: 200;

    background: radial-gradient(circle at center, #ec79798a, rgb(255, 61, 61) 100%);


    animation: blink 1s ease-in alternate infinite;
  }

  .wheel {
    box-sizing: border-box;

    display: inline-block;
    position: relative;
    overflow: hidden;

    width: 60vw;
    height: 60vw;

    min-width: 30em;
    min-height: 30em;

    max-width: 750px;
    max-height: 750px;

    border: 2px solid var(--background-accent-light);
    border-radius: 50%;

    background-color: var(--background-accent-light);

    list-style: none;

    transform: rotate(-11deg);
  }
    
  .wheel > li {
    position: absolute;
    top: 0;
    right: 0;

    overflow: hidden;
    
    width: 50%;
    height: 50%;

    transform-origin: 0% 100%;
    border: 1px solid var(--background-accent-light)
  }

  .wheel > li > div {
    position: absolute;
    left: -100%;

    width: 200%;
    height: 200%;

    padding-top: 20px;

    text-align: center;
    transform: skewY(70deg) rotate(10deg);
  }

  .wheel > li > div > div {
    transform: rotate(-89.5deg);
    font-weight: bold;
    font-size: 10px;
    position: relative;
  }

  .wheel > li > div > div > p {
    overflow: hidden;

    width: 35%;

    height: 25px;

    padding: 0;
    padding-left: 120px;

    margin: 0;

    text-align: right;
    text-transform: uppercase;
    
    white-space: nowrap;

    line-height: 25px;
    text-overflow: ellipsis;
    color: var(--text-accent);

    cursor: default;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; 
  }

  @media only screen and (max-width: 1100px) {
    .wheel > li > div > div > p {
      /* small screen */
        width: 35%;
        padding-left: 90px;
    }
  }

  /* Colors for odd and even slices */
    .wheel > li:nth-child(odd) > div {
      background: var(--odd-slice); 
      background: linear-gradient(325deg, white 0%, var(--odd-slice) 100%);

      background-size: 400%;
    }
    .wheel > li:nth-child(even) > div {
      background: var(--even-slice);
      background: linear-gradient(325deg, white 0%, var(--even-slice) 100%);
      
      background-size: 400%;
    }

  /* spin wheel animation */
    .spin {
      -webkit-animation: spin 5s forwards;
      animation: spin 5s forwards;
    }

  /* Winning slice aniation */
    .won {
      -webkit-animation: shiftcolor 1.5s infinite ease alternate;
      animation: shiftcolor 1.5s infinite ease alternate;
    }

    .wheel > li div.won {
      cursor: pointer;
    }
    .wheel > li div.won div p {
      cursor: pointer;
    }

  /* Rotation for every slice of the circle */
    .wheel > li:nth-child(1) {transform: rotate(0deg) skewY(-70deg);}
    .wheel > li:nth-child(2) {transform: rotate(20deg) skewY(-70deg);}
    .wheel > li:nth-child(3) {transform: rotate(40deg) skewY(-70deg);}
    .wheel > li:nth-child(4) {transform: rotate(60deg) skewY(-70deg);}
    .wheel > li:nth-child(5) {transform: rotate(80deg) skewY(-70deg);}
    .wheel > li:nth-child(6) {transform: rotate(100deg) skewY(-70deg);}
    .wheel > li:nth-child(7) {transform: rotate(120deg) skewY(-70deg);}
    .wheel > li:nth-child(8) {transform: rotate(140deg) skewY(-70deg);}
    .wheel > li:nth-child(9) {transform: rotate(160deg) skewY(-70deg);}
    .wheel > li:nth-child(10) {transform: rotate(180deg) skewY(-70deg);}
    .wheel > li:nth-child(11) {transform: rotate(200deg) skewY(-70deg);}
    .wheel > li:nth-child(12) {transform: rotate(220deg) skewY(-70deg);}
    .wheel > li:nth-child(13) {transform: rotate(240deg) skewY(-70deg);}
    .wheel > li:nth-child(14) {transform: rotate(260deg) skewY(-70deg);}
    .wheel > li:nth-child(15) {transform: rotate(280deg) skewY(-70deg);}
    .wheel > li:nth-child(16) {transform: rotate(300deg) skewY(-70deg);}
    .wheel > li:nth-child(17) {transform: rotate(320deg) skewY(-70deg);}
    .wheel > li:nth-child(18) {transform: rotate(340deg) skewY(-70deg);}

  /* Animations. */
    @-webkit-keyframes spin {
      from { -webkit-transform: rotate(0deg); }
      to { -webkit-transform: rotate(1429deg); }
    }
    @keyframes spin {
      from {transform:rotate(0deg);}
      to {transform:rotate(1429deg);}
    }

    @-webkit-keyframes shiftcolor {
      from {background-position: 0%, 100%;}
      to {background-position: 50%, 50%;}
    }
    @keyframes shiftcolor {
      from {background-position: 0%, 100%;}
      to {background-position: 50%, 50%;}
    }

    @-webkit-keyframes blink {
      from {background: radial-gradient(circle at center, #ec79798a, rgb(255, 61, 61) 100%);}
      to {background: radial-gradient(circle at center, rgb(255, 61, 61), #ec79798a 100%);}
    }
    @keyframes blink {
      from {background: radial-gradient(circle at center, #ec79798a, rgb(255, 61, 61) 100%);}
      to {background: radial-gradient(circle at center, rgb(255, 61, 61), #ec79798a 100%);}
    }

    @media screen and (min-width: 1250px) {
      #indicator {
        left: calc(50% - 10px);
      }
    }

/*----------------------------------------------------------------------------------------
  Options menu.
----------------------------------------------------------------------------------------*/
  .options {
    position: absolute;
    bottom: 0;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    width: 100%;
    height: calc(100% - 35px);

    max-width: 100%;

    overflow: hidden;

    z-index: 1000;

    background-color: #000000a1;
    background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.85) 60%, rgba(0,0,0,.35) 100%);

    transition: height .5s ease;
  }

  .options.closed {
    height: 0;
    padding: 0;

    overflow: hidden;
  }

  /*----------------------------------------------------------------------------------------
    Error message.
  ----------------------------------------------------------------------------------------*/
    #errorContainer {
      position: absolute;
      top: 0px;

      width: 100%;

      padding: 10px;

      opacity: 1;

      background-color: #000000a1;

      transition: opacity .750s ease;
    }

    #errorContainer #errormsg {
      max-width: 1200px;
      margin: 0 auto;
    }

    #errorContainer.closed {
      opacity: 0;
    }

    #errorContainer > div {
      text-align: center;
    }

  #sections {
    position: absolute;
    bottom: 15px;
    left: 50%;

    transform: translateX(-50%);

    width: 90%;
    max-height: 500px;

    max-width: 1200px;

    min-width: 260px;

    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    row-gap: 10px;

    justify-content: center;
    
    overflow: auto;
  }

  #sections > div {
    position: relative;
    overflow: hidden;

    max-width: 42%;

    border-radius: 1000px;

    padding: 3px 5px;

    font-size: 12px;
    line-height: 17px;

    background-color: var(--background);

    text-align: center;

    white-space: nowrap;
    text-overflow: ellipsis;

    text-transform: uppercase;

    transition: background-color .275s ease;
    
    cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; 
  }

  #sections > #itemCounter {
    box-sizing: border-box;

    padding: 5px 7px;

    background-color: var(--background-accent-dark);

    cursor: default;

    user-select: none;

    width: 130px;

    font-size: 13px;
    line-height: 30px;

    transition: color .275s ease;
  }
  #sections > #itemCounter.red {
    color: rgb(226, 7, 7);
  }
  
  #sections > #selectAll {
    box-sizing: border-box;

    padding: 5px 7px;

    width: 130px;

    border: 2px solid var(--background-accent-dark);

    border-radius: 1000px;

    color: var(--text-accent);
    background-color: var(--background-accent-light);

    cursor: pointer;

    font-size: 13px;

    user-select: none;

    transition: background-color .275s ease, color .275s ease, border-color .275s ease;
  }

  #sections > #selectAll:hover {
    background-color: var(--background-accent-dark);
    color: var(--text);
    border: 2px solid var(--background-accent-light);
  }

  #sections > div > input[type="checkbox"] {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);

    box-sizing: border-box;

    cursor: pointer;
  }

  #sections > div > label {
    cursor: pointer;
  }

  #sections > div.checked {
    background-color: var(--background-accent-dark);
    cursor: pointer;
  }

  #sections > .slidecontainer {
    max-width: calc(50% - 25px);

    overflow: hidden;

    cursor: default;
  }

  #section > .slidecontainer > div {
    cursor: default;
    
  }

  .slider {
    width: 90%;

    margin-top: 3px;

    cursor: pointer;
  }

  /* forced line break */
  #sections hr {
    width: 100%;

    padding: 0;
    border: 0;
    margin: 0;
  }


/*----------------------------------------------------------------------------------------
  Info section.
----------------------------------------------------------------------------------------*/
.info {
  box-sizing: border-box;

  position: absolute;
  bottom: 0;

  width: 100%;
  height: calc(100% - 35px);

  max-width: 100%;

  padding: 50px 25%;

  overflow: hidden;

  z-index: 1000;

  background-color: #000000a1;
  background: linear-gradient(0deg, rgba(0,0,0,.87) 0%, rgba(0,0,0,.90) 60%, rgba(0,0,0,.55) 100%);

  transition: height .5s ease;
}

.info.closed {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;

  overflow: hidden;
}

.property {
  color: var(--text);

  font-size: 1.5rem;

  margin-bottom: 15px;
}

.info header, .info .flex {
  display: flex;
  gap: 35px;
  justify-content: space-between;
}

.info header div, .info .flex div {
  width: auto;
}

#name, #abv {
  font-weight: 600;
  font-size: 1.7rem;
}

#brewery {
  font-weight: 400;
}

#style {
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 25px;
}

#description {
  font-size: 1.3rem;
  min-height: 50px;
  max-height: 42%;

  overflow-y: auto;
}

.info button {
  margin-top: 15px; 
  width: 150px;
  height: 35px;

  color: white;
  border: 2px solid black;
  border-radius: 1000px;

  font-size: 22px;
  font-weight: bold;

  border: 2px solid white;

  outline-offset: 5px;

  background-color: transparent;

  transition: all .5s ease;

  cursor: pointer;
}

.info button:hover {
  background-color: white;
  border: 2px solid black;
  color: black;

  -webkit-box-shadow: 0 0 25px white;
  box-shadow: 0 0 25px white;
}

@media screen and (max-width:1100px) {
  .info {
    padding: 50px 10%;
  }
}

@media screen and (max-width:600px) {
  .info {
    padding: 50px 5%;
  }
}

/*----------------------------------------------------------------------------------------
  Help section.
----------------------------------------------------------------------------------------*/
  .help {
    position: absolute;
    left: 50%;
    
    transform: translateX(-50%);

    width: 75%;
    max-width: 300px;
    min-width: 200px;

    text-align: center;
    font-size: 1rem;

    box-sizing: border-box;
  } 
  
  .help > div {
    cursor: pointer;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; 
  }

  #help-spin {
    bottom: 95px;
  }

  #help-info {
    top: 300px;
  }

  #help-options {
    top: 45px;
    left: auto;
    transform: none;
    right: 35px;
  }

  .help .closed {display: none;}

  .arrow_box {
    position: relative;
    background: var(--background);
    border: 2px solid var(--background-accent-light);
    border-radius: 1000px;
    padding: 10px;
  }
  .arrow_box:after, .arrow_box:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  
  .arrow_box:after {
    border-color: rgba(0, 0, 0, 0);
    border-top-color: var(--background);
    border-width: 20px;
    margin-left: -20px;
  }
  .arrow_box:before {
    border-color: rgba(255, 255, 255, 0);
    border-top-color: var(--background-accent-light);
    border-width: 23px;
    margin-left: -23px;
  }

  .arrow_box_up {
    position: relative;
    background: var(--background);
    border: 2px solid var(--background-accent-light);
    border-radius: 1000px;
    padding: 10px;
  }
  .arrow_box_up:after, .arrow_box_up:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  
  .arrow_box_up:after {
    border-color: rgba(0, 0, 0, 0);
    border-bottom-color: var(--background);
    border-width: 20px;
    margin-left: -20px;
  }
  .arrow_box_up:before {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: var(--background-accent-light);
    border-width: 23px;
    margin-left: -23px;
  }

  .arrow_box_up_right {
    position: relative;
    background: var(--background);
    border: 2px solid var(--background-accent-light);
    border-radius: 1000px 0 1000px 1000px;
    padding: 10px;
  }

  .hamburger-icon-wrapper {
    width: 30px;
		height: 18px;
    display: inline-block;
    -webkit-transform : scale(0.6);
    -moz-transform : scale(0.6);
    -o-transform : scale(0.6);
    -ms-transform : scale(0.6);
    transform : scale(0.6);
  }
  
  /* hamburger icon */
	.hamburger-icon {
		width: 30px;
    height: 30px; 
		position: absolute;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
		cursor: pointer;
    z-index: 1001;

    outline: none;
    -webkit-tap-highlight-color: transparent;
}

  .hamburger-icon span {
		display: block;
		position: absolute;
		height: 3px;
		width: 100%;
		background: #d4d4d4;/* d4d4d4 */
		border-radius: 9px;
		opacity: 1;
		left: 0;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg); 			transform: rotate(0deg);
		-webkit-transition: .25s ease-in-out;
		-moz-transition: .25s ease-in-out;
		-o-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
	}

  .hamburger-icon span:nth-child(1) {
		top: 0px;
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
	}

	.hamburger-icon span:nth-child(2) {
		top: 11px;
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
	}

	.hamburger-icon span:nth-child(3) {
		top: 22px;
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
	}
  
/*----------------------------------------------------------------------------------------
  Buttons.
----------------------------------------------------------------------------------------*/
  .roll-button {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);

    width: auto;
    height: auto;

    padding: 7px 14px;

    color: white;
    border: 2px solid black;
    border-radius: 1000px;

    font-size: 22px;
    font-weight: bold;

    border: 2px solid white;

    outline-offset: 5px;

    background-color: transparent;

    transition: all .5s ease;

    -webkit-animation: flicker 2.5s .5s infinite ease alternate;
    animation: flicker 2.5s .5s infinite ease alternate;
    
    cursor: pointer;
  }

  button.roll-button:hover {
    background-color: white;
    border: 2px solid black;
    color: black;
  }
  button.roll-button:disabled {
    background-color: transparent;
    border: 2px solid rgb(82, 82, 82);
    color: rgb(82, 82, 82);

    -webkit-box-shadow: none; 
    box-shadow: none;

    animation: none;

    cursor: default;
  }

  @-webkit-keyframes flicker {
    from { -webkit-box-shadow: 0 0 0px white; }
    to { -webkit-box-shadow: 0 0 25px white;}
  }
  @keyframes flicker {
    from {box-shadow: 0 0 0px white;}
    to {box-shadow: 0 0 25px white;}
  }

  /* hamburger icon */
	#opt {
		width: 30px;
		height: 30px;
		position: absolute;
		top: 5px;
		right: 20px;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
		cursor: pointer;
    z-index: 1001;

    outline: none;
    -webkit-tap-highlight-color: transparent;
}

	#opt span {
		display: block;
		position: absolute;
		height: 3px;
		width: 100%;
		background: #d4d4d4;/* d4d4d4 */
		border-radius: 9px;
		opacity: 1;
		left: 0;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg); 			transform: rotate(0deg);
		-webkit-transition: .25s ease-in-out;
		-moz-transition: .25s ease-in-out;
		-o-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
	}

	#opt span:nth-child(1) {
		top: 0px;
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
	}

	#opt span:nth-child(2) {
		top: 11px;
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
	}

	#opt span:nth-child(3) {
		top: 22px;
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
	}

	#opt.open span:nth-child(1) {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
		top: 0px;
		left: 5px;
	}

	#opt.open span:nth-child(2) {
		width: 0%;
		opacity: 0;
	}

	#opt.open span:nth-child(3) {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
		top: 21px;
		left: 5px;
	}