/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

.fancy-box{
  --topH: 39px;
  --botH: 39px;
  max-width: 558px;
  margin: 0 auto 2rem;
  /* padding: calc(var(--topH) + 0px) 12px calc(var(--botH) + 0px); */
  padding: calc(var(--topH) + 0px) 17px calc(var(--botH) + 0px) 11px;

  background:
    url(/img/box01.png)    no-repeat left top,
    url(/img/box03.png) no-repeat left bottom,
    url(/img/box02.png)    repeat-y   left var(--topH);
  background-size:
    100% var(--topH),
    100% var(--botH),
    100% auto;

  border: 0px solid #000;
  background-color: #fff;
}

.fancy-box--whatsnew{
  --topH: 39px;
  --botH: 39px;
  max-width: 558px;
  margin: 0 auto 0rem;
  padding: calc(var(--topH) + 0px) 14px calc(var(--botH) + 0px) 9px;

  background:
    url(/img/box08.png)    no-repeat left top,
    url(/img/box03.png) no-repeat left bottom,
    url(/img/box02.png)    repeat-y   left var(--topH);
  background-size:
    100% var(--topH),
    100% var(--botH),
    100% auto;

  border: 0px solid #000;
  background-color: #fff;
}

.fancy-box--main2{
  --topH: 39px;
  --botH: 39px;
  max-width: 558px;
  margin: 0 auto 0rem;
  padding: calc(var(--topH) + 0px) 17px calc(var(--botH) + 0px) 11px;

  background:
    url(/img/box09.png)    no-repeat left top,
    url(/img/box11.png) no-repeat left bottom,
    url(/img/box10.png)    repeat-y   left var(--topH);
  background-size:
    100% var(--topH),
    100% var(--botH),
    100% auto;

  border: 0px solid #000;
  background-color: #fff;
}

.fancy-box--leftside{
  --topH: 39px;
  --botH: 39px;
  max-width: 200px;
  margin: 0 auto 0rem;
  /* padding: calc(var(--topH) + 0px) 12px calc(var(--botH) + 0px); */
  padding: calc(var(--topH) - 0px) 14px calc(var(--botH) - 0px);

  background:
    url(/img/box04.png)    no-repeat left top,
    url(/img/box06.png) no-repeat left bottom,
    url(/img/box05.png)    repeat-y   left var(--topH);
  background-size:
    100% var(--topH),
    100% var(--botH),
    100% auto;

  border: 0px solid #000;
  background-color: #fff;
}

.fancy-box--leftsidegames{
  --topH: 39px;
  --botH: 39px;
  max-width: 200px;
  margin: 0 auto 0rem;
  /* padding: calc(var(--topH) + 0px) 12px calc(var(--botH) + 0px); */
  padding: calc(var(--topH) - 0px) 14px calc(var(--botH) - 0px);

  background:
    url(/img/box12.png)    no-repeat left top,
    url(/img/box06.png) no-repeat left bottom,
    url(/img/box05.png)    repeat-y   left var(--topH);
  background-size:
    100% var(--topH),
    100% var(--botH),
    100% auto;

  border: 0px solid #000;
  background-color: #fff;
}

.fancy-box--leftsideothergames{
  --topH: 39px;
  --botH: 39px;
  max-width: 200px;
  margin: 0 auto 0rem;
  /* padding: calc(var(--topH) + 0px) 12px calc(var(--botH) + 0px); */
  padding: calc(var(--topH) - 0px) 14px calc(var(--botH) - 0px);

  background:
    url(/img/box13.png)    no-repeat left top,
    url(/img/box06.png) no-repeat left bottom,
    url(/img/box05.png)    repeat-y   left var(--topH);
  background-size:
    100% var(--topH),
    100% var(--botH),
    100% auto;

  border: 0px solid #000;
  background-color: #fff;
}

.fancy-box--leftsideclock{
  --topH: 39px;
  --botH: 39px;
  max-width: 200px;
  margin: 0 auto 0rem;
  /* padding: calc(var(--topH) + 0px) 12px calc(var(--botH) + 0px); */
  padding: calc(var(--topH) - 0px) 14px calc(var(--botH) - 0px);

  background:
    url(/img/clock01.png)    no-repeat left top,
    url(/img/clock03.png) no-repeat left bottom,
    url(/img/clock02.png)    repeat-y   left var(--topH);
  background-size:
    100% var(--topH),
    100% var(--botH),
    100% auto;

  border: 0px solid #000;
  background-color: #fff;
}

.fancy-box--rightside{
  --topH: 39px;
  --botH: 39px;
  max-width: 200px;
  margin: 0 auto 0rem;
  /* padding: calc(var(--topH) + 0px) 12px calc(var(--botH) + 0px); */
  padding: calc(var(--topH) - 0px) 14px calc(var(--botH) - 0px);

  background:
    url(/img/box07.png)    no-repeat left top,
    url(/img/box06.png) no-repeat left bottom,
    url(/img/box05.png)    repeat-y   left var(--topH);
  background-size:
    100% var(--topH),
    100% var(--botH),
    100% auto;

  border: 0px solid #000;
  background-color: #fff;

}

.fancy-row {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.fancy-row .fancy-box {
  flex: 1;
  max-width: 480px;
}

.fancy-box img {
  width: 100%;    /* fill the box width */
  height: auto;   /* keep proportions */
  display: block; /* no extra gaps */
  margin: 0 auto;
}

.divider {
  width: 100%;
  height: 17px;
  background: url('/img/div01.png') repeat-x center;
}

.spacer {
  display: block;
  width: 100%;
  height: var(--space, 1rem);
}

footer {
  background: url('/img/footer.png') no-repeat center top;
  background-size: contain;
  width: 1000px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}