:root {
	--yellow: rgba(200, 200, 100, 1);
	--bgYellow: rgba(140, 140, 70, 1);
	--gray: rgba(65, 65, 65, 1);
	--black: rgba(20, 20, 20, 1);
	accent-color: var(--gray);
  }
  
  *{box-sizing: border-box;}
  
  html{
	  background-image: linear-gradient(135deg, var(--black) 10%,
	  rgba(30, 30, 30, 1) 20%, var(--bgYellow) 20%, var(--bgYellow) 20.5%, rgba(30, 30, 30, 1) 20.5%,
	  rgba(65, 65, 65, 1) 60%, var(--bgYellow) 60%, var(--bgYellow) 60.2%, rgba(65, 65, 65, 1) 60.5%,
	  rgba(65, 65, 65, 1) 62%, var(--bgYellow) 62.5%, var(--bgYellow) 63%, var(--gray) 63%,
	  rgba(100, 100, 100, 1)); /*linear-gradient(135deg, rgba(20, 20, 20, 1), rgba(75, 75, 75, 1));linear-gradient(rgba(10, 150, 150, 1), rgba(250, 250, 250, 1));*/
	  background-repeat: no-repeat;
	  height: 100%;
	  width: 100%;
	  margin: 0px;
  }
  
  .roundButton{
	  position: absolute;
	  background-color: var(--yellow);
	  width: 60px;
	  height: 60px;
	  top: 10px;
	  border: 0px solid var(--gray);
	  border-radius: 50%;
  }
  
  #newButton{
	  background-image: url('lib/aktualLogo.png');
	  background-repeat: no-repeat;
	  background-position: center;
	  right: 20px;
  }
  
  .labelArea{
	  width: 700px;
	  margin: 250px auto 10px;
	  border: 0px solid lime;
	  vertical-align: center;
	  font-size: 2rem;
	  color: var(--yellow);
  }
  
  .labelDivs{
	  border: 0px solid lime;
	  display: inline-block;
	  width: 340px; 
  }
  
  .taskLabel{
	  text-align: left;
  }
  
  .solutionLabel{
	  text-align: right;
  }
  
  
  #mainframe{
	  width: 725px;
	  margin: 0px auto;
	  border: 0px solid lime;
	  vertical-align: center;
  }
  
  #mainframe > div,
  #mainframe > label, 
  #solutionInput{
	  position: relative;
	  display: inline-block;
	  font-size: 5rem;
	  font-family: monospace;
	  text-align: center;
	  border: 0px dashed var(--yellow);
	  background-color: var(--yellow);
	  color: var(--black);
  }
  
  #taskLabel{
	  border-radius: 8px;
	  width: 450px;
  }
  
  
  #checkButton{
	  width: 70px;
	  margin: 0px 20px;
	  border-radius: 0px;
	  /*background-image: linear-gradient(90deg, rgba(20, 20, 255, 1), rgba(5, 5, 5, 1));*/
	  -webkit-clip-path: polygon(0px 0px, 60px 0px, 70px 47px, 60px 94px, 0px 94px, 10px 47px);
	  clip-path: polygon(0px 0px, 60px 0px, 70px 47px, 60px 94px, 0px 94px, 10px 47px);
  }
  #checkButton::after{
	  content: '=';
	  position: relative;
	  top: -5px;
	  left: -30px;
  }
  
  #solutionInput,
  #mainframe > label{
	  width: 150px;
	  border-radius: 8px;
  }
  
  /*---------------------------OPTIONS-WINDOW---------------------------*/
  
  #optionsButton{
	  background-image: url('lib/optionsLogo.png');
	  background-repeat: no-repeat;
	  background-position: center;
	  left: 10px;
  }
  
  #optionsWindow{
	  display: none;
	  position: absolute;
	  width: 200px;
	  height: 350px;
	  top: 10px;
	  left: 10px;
	  background-color: var(--yellow);
	  color: var(--black);
	  border-radius: 8px;
	  z-index: 2;
	  Border: 1px solid var(--black)
  }
  #optionsWindow > form{
	  padding: 10px 0px;
  }
  #optionsWindow > form > fieldset{
	  margin-bottom: 10px;
	  font-size: 1.5rem;
	  padding: 5px;
	  border: none;
	  width: 190px;
	  border-top: 1px solid var(--black);
	  background-color: linear-gradient();
  }
  #optionsWindow > form > fieldset > label{
	  display: inline-block;
	  width: 180px;
  }
  
  #dig{
	  width: 100px;
  }
  
  #optionsWindow > form > fieldset > label > div{
	  display: inline-block;
	  width: 50px;
	  font-size: 2rem;
	  padding: 0px 25px;
	  color: var(--gray);
	  border: 0px solid var(--black);
  }
  
  .optionButton{
	  width: 92px;
	  height: 50px;
	  bottom: 0px;
	  border-radius: 0px;
	  margin: 0px;
	  background-color: var(--gray);
	  COLOR: var(--yellow);
	  font-weight: 600;
	  display: inline-block;
	  vertical-align: center;
	  text-align: center;
	  padding: 15px 10px;
  }
  #saveOptionButton{
	  margin-left: 5px;
	  border-radius: 8px 0px 0px 8px;
  }
  
  #cancelOptionButton{
	  right: 0px;
	  border-radius: 0px 8px 8px 0px;
  }
  
  
  /*---------------------------MOBILE-VERSION---------------------------*/
  @media (max-width: 900px) {
	  .labelArea{
	  width: 400px;
	  margin: 250px auto 10px;
	  border: 0px solid lime;
	  vertical-align: center;
	  font-size: 1rem;
	  color: var(--yellow);
  }
  
  .labelDivs{
	  border: 0px solid lime;
	  display: inline-block;
	  width: 190px; 
  }
  
	  #mainframe{
	  width: 435px;
  }
  
  #mainframe > div,
  #mainframe > label, 
  #solutionInput{
	  font-size: 2.5rem;
  }
  
  #taskLabel{
	  width: 220px;
  }
  
  #checkButton{
	  width: 50px;
	  margin: 0px 10px;
	  border-radius: 0px;
	  /*background-image: linear-gradient(90deg, rgba(20, 20, 255, 1), rgba(5, 5, 5, 1));*/
	  -webkit-clip-path: polygon(0px 0px, 40px 0px, 50px 23px, 40px 47px, 0px 47px, 10px 23px);
	  clip-path: polygon(0px 0px, 40px 0px, 50px 23px, 40px 47px, 0px 47px, 10px 23px);
	  
  }#checkButton::after{
	  content: '=';
	  position: relative;
	  top: -3px;
	  left: -9px;
  }
  
  
  #mainframe > label,
  #solutionInput{
	  width: 100px;
  }
  }