body
{
  color:white;
  font-Family:"Comic Sans MS", Comic;
  font-size:18pt;
  background-image: url(/Images/Season5Images/fruiero.png); background-repeat: no-repeat; background-attachment: fixed; background-size:100% 100%;
}
.leftmenu
{
  margin-left:5%;
  margin-top:50px;
  width:125px;
  height:400px;
  background-color:white;
  color:green;
  float:left;
  border-radius:20px;
}
.middle
{
  margin-top:50px;
  margin-left:25px;
  margin-right:25px;
  padding:10px;
  width:10px;
  min-height:380px;
  max-height:380px;
  transition-property: max-height, width;
  transition-delay: .25s, 0ms;
  transition-duration: 1s, 1s;
  overflow-y:auto;
  background-color:rgba(0,0,0,0.25);
  float:left;
}

.loaded
{
  width:Calc(90% - 330px);
  max-width:800px;
  max-height:Calc(80vh - 50px);
}
.rightmenu
{
  margin-top:50px;
  width:50px;
  height:400px;
  background-color:white;
  color:green;
  float:left;
  border-radius:20px;
}
.button1
{
  margin-left:60px;
  margin-right:-60px;
  background-color:rgba(0,0,255,.5);
  transition:background-color .25s;
  width:90px;
  height:50px;
  border-radius:50%
}
.button1:hover
{
  background-color:rgba(0,0,255,1);
}

.button2
{
  margin-left:15px;
  margin-right:-15px;
  background-color:rgba(255,120,0,.5);
  transition:background-color .25s;
  width:90px;
  height:50px;
  border-radius:50%
}
.button2:hover
{
  background-color:rgba(255,120,0,1);
}

.button3
{
  margin-left:5px;
  margin-right:0px;
  background-color:rgba(255,0,0,.5);
  transition:background-color .25s;
  width:90px;
  height:50px;
  border-radius:50%
}
.button3:hover
{
  background-color:rgba(255,0,0,1);
}


@media only screen and (max-width: 600px)
{
  .leftmenu
  {
    margin-left:10px;
  }
  .rightmenu
  {
    display:none;
  }
  .middle
  {
    margin-right:10px;
  }
  .loaded
  {
    width:Calc(100% - 190px);
    min-width:0px;
  }
}