:root {

  --bg-color: #262626;
  --side-bg-color: linear-gradient(0deg, rgba(38,38,38,1) 40%, rgba(0,0,0,1) 100%);
  --text-color: black;

}


@font-face {
  font-family: 'Work Sans';
  src: url("WorkSans-Regular.ttf");
}

button{
  font-family: var(--font);
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  color: white;
  font-family: "Work Sans";
}

#sidebar, #content {
  height: 100%;
  overflow:auto;
  float:left;
  transition: width .35s;
}


#sidebar {
  background: var(--side-bg-color);
  width: 30%;
  box-shadow: 2px 0 4px rgba(0,0,0,1);
}

@media screen and (min-width: 800px){
  #sidebar {
    background: var(--side-bg-color);
    box-shadow: 2px 0 4px rgba(0,0,0,1);
    width: 10%;
  }
}



#sidebar.collapsed {
  width: 0;
}

#sidebar.collapsed + #content {
  width: 100%;
}


#content {
  background: var(--bg-color);
  width: 70%;

}


@media screen and (min-width: 800px){
  #content {
    background: var(--bg-color);
    width: 90%;
  }
}

#sidebar_content{
  margin-top: 20%;
}

#game_menu{
  text-align: center;
  font-weight: bold;
}

#slider_button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border:none;
  outline:none;
  background: black;
  color: white;
  font-size: 125%;
  margin-left: 2%;
  margin-top: 2%;
  cursor:pointer;
  position: absolute;

}

.side_button{

  display: block;
  background-color: transparent;
  color: white;
  padding: 15px;
  border-right: 5px solid white;
  text-decoration: none;
  text-align: center;
  font-style: italic;

}

.side_button:hover:not(.active){
  background-color: white;
  color: black;
}

.side_button.active {
  background-color: white;
  color: black;
}

.page {
  margin-top: 2%;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 5%;
}



.title{
  text-align: center;
  font-size: 150%;

}

@media screen and (min-width: 800px){
  .title {
    font-size: 300%;
  }
}

.subtitle{
  text-align: center;
  font-size: 100%;
  margin-top: -10px;
}

@media screen and (min-width: 800px){
  .subtitle{
    margin-top: -40px;
    font-size: 150%;
  }
}

#upgrades_page{
  display: none;
}

#potato_makers_page{
  display: none;
}

#statistics_page{
  display: none;
}

#settings_page{
  display: none;
}

#howtoplay_page{
  display: none;
}

#about_page{
  display: none;
}


#infobar{

  background: linear-gradient(0deg, rgba(38,38,38,0.75) 0%, rgba(13,255,23,1) 40%, rgba(13,255,23,1) 60%, rgba(38,38,38,0.75) 100%);
  display: block;
  position: absolute;
  width: 100%;
  color: black;
  font-weight: bold;
  bottom: 20%;
  text-align: center;
  align-content: center;
  font-size: 200%;
  font-style: italic;
  display: none;


}

#info{

  color: black;

}


#main_title{
  margin-top: 0px;
}



























#make_potato {

  color: white;
  font-size: 150%;
  font-weight: bold;
  background: linear-gradient(270deg, rgba(38,38,38,1) 0%, rgba(55,53,0,0.5) 50%, rgba(38,38,38,1) 100%);
  padding: 30px;
  border: none;
  width: 100%;

}

#make_potato:hover{
  background: linear-gradient(270deg, rgba(38,38,38,1) 0%, rgba(145,141,0,0.5) 50%, rgba(38,38,38,1) 100%);
}

#make_potato:active {

  background: linear-gradient(270deg, rgba(38,38,38,1) 0%, rgba(245,255,0,0.8323704481792717) 50%, rgba(38,38,38,1) 100%);
  color: black;

}

#make_power {

  color: white;
  font-size: 150%;
  font-weight: bold;
  background: linear-gradient(270deg, rgba(38,38,38,0.5) 0%, rgba(74,0,0,0.5) 50%, rgba(38,38,38,0.5) 100%);
  padding: 30px;
  border: none;
  width: 100%;
  text-align: center;


}

#make_power:hover{
  background: linear-gradient(270deg, rgba(38,38,38,1) 0%, rgba(68,0,0,0.5) 50%, rgba(38,38,38,1) 100%);
}

#make_power:active {

  background: linear-gradient(270deg, rgba(38,38,38,1) 0%, rgba(255,0,0,0.8099614845938375) 50%, rgba(38,38,38,1) 100%);
  color: black;

}


#sell_potato {

  color: white;
  font-size: 150%;
  font-weight: bold;
  background: linear-gradient(270deg, rgba(38,38,38,1) 0%, rgba(12,55,0,0.5) 50%, rgba(38,38,38,1) 100%);
  border: none;
  padding: 30px;
  width: 100%;
  text-align: center;


}

#sell_potato:hover{
  background: linear-gradient(270deg, rgba(38,38,38,1) 0%, rgba(25,145,0,0.5) 50%, rgba(38,38,38,1) 100%);
}

#price_counter{
  
  background: linear-gradient(270deg, rgba(38,38,38,1) 0%, rgba(5, 24, 0, 0.5) 50%, rgba(38,38,38,1) 100%);
  color: white;
  font-size: 120%;
  font-weight: bold;
  border: none;
  padding: 10px;
  width: 100%;
  text-align: center;
  pointer-events: none;


}

#power_counter{

  background: linear-gradient(270deg, rgba(38,38,38,0.5) 0%, rgba(54,0,0,0.5) 50%, rgba(38,38,38,0.5) 100%);
  font-size: 120%;
  font-weight: bold;
  border: none;
  padding: 10px;
  width: 100%;
  text-align: center;
  pointer-events: none;
  color: white;

}


#main_counter{
  text-align: center;
}


.tot_counter{
  text-align: center;
}

.potato_maker_container{

  display: flex;
  justify-content: center; 
  
}


.potato_maker_box{


  border: none;
  padding: 10px;
  float: right;
  display: block;
  text-align: center;
  width: 100%;
  height: 250px;
  color: white;
  font-size: 130%;
  font-weight: bold;
  font-family: var(--font);
  background: linear-gradient(270deg, rgba(38,38,38,1) 0%, rgba(13,91,255,0.5018382352941176) 50%, rgba(38,38,38,1) 100%);
}

.potato_maker_info{

  font-size: 80%;
  font-weight: 100;

}