:root{
  --b-width: 100px;
  --b-height: 100px;
}

.brazil{
  background-image: url("/assets/icons/brazil.png");
}

.button{
  width: var(--b-width);
  height: var(--b-height);
  background-color: var(--pallete-2);
  position: relative;
  display: inline-block;
  margin: calc(0.2*var(--b-width)) 0px calc(0.2*var(--b-width)) 0px;
  cursor: pointer;
}

.button-label{
  font-family: ubuntu, sans-serif;
  color: var(--pallete-1);
  text-align: center;
  margin-top: calc(0.05*var(--b-height));
  font-size: calc(0.13*var(--b-width));
  background-color: var(--pallete-2);
  z-index: 3;
  position: relative;
}

.button-image-common{
  width:100%;
  height:100%;
  position: absolute;
}

.circle-clip{
  --b-clip-circle-radius: calc( 0.27*var(--b-width) );
  --b-clip-circle-center-x: var(--b-clip-circle-radius);
  --b-clip-circle-center-y: var(--b-clip-circle-radius);

  clip-path: circle( var(--b-clip-circle-radius) at var(--b-clip-circle-center-y) var(--b-clip-circle-center-x));
}

.clear{
  clear:both;
}

.container{
  width: 278px;
  margin: auto;
}

.container-buttons{
  width: calc( 2.5*var(--b-width) );;
  height: calc( 3*var(--b-height) );
  margin: auto;
}

.container-flags{
  margin: 10px 0px 0px 0px;
}

.flag{
  width: 20px;
  height: 20px;
  display:inline-block;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
}

.italy{
  background-image: url("/assets/icons/italy.png");
}

.france{
  background-image: url("/assets/icons/france.png");
}


.left{
  float:left;
}

.lens{
  background-color: var(--pallete-1);

  -webkit-mask-image: url("/assets/icons/masks/mask-lens.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  z-index:2;
  top: calc(25%);
  left: calc(-15%);
}

.right{
  float: right;
}

.stripes{
  background-color: var(--pallete-5);

  -webkit-mask-image: url("/assets/icons/masks/mask-stripes.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;

  z-index:1;
  top: calc(25%);
  left: calc(-15%);
}

.usa{
  background-image: url("/assets/icons/usa.png");
}


.zoomed-calendar{
  background-color: var(--pallete-1);

  -webkit-mask-image: url("/assets/icons/masks/mask-calendar.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: 0px calc(-0.1*var(--b-width));

  z-index:2;
  top: calc(31%);
  left: calc(27%);
}

.zoomed-interrogation-mark{
  background-color: var(--pallete-1);

  -webkit-mask-image: url("/assets/icons/masks/mask-interrogation.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: calc(0.2*var(--b-width)) 0px;

  z-index:2;
  top: calc(31%);
  left: calc(20%);
  height: 50%;
}

.zoomed-newspaper{
  background-color: var(--pallete-1);

  -webkit-mask-image: url("/assets/icons/masks/mask-newspaper.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: calc(-0.15*var(--b-width)) 0px;

  z-index:2;
  top: calc(31%);
  left: calc(27%);
  width: 90%;
}

.zoomed-book{
  background-color: var(--pallete-1);

  -webkit-mask-image: url("/assets/icons/masks/mask-book.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: calc(0.1*var(--b-width)) 0px;

  z-index:2;
  top: calc(31%);
  left: calc(27%);
  height: 50%;
}