*{box-sizing:border-box}

html,body{margin:0;min-height:100%;font-family:Arial,sans-serif}

.screen{
  position:relative;
  overflow:hidden;
  min-height:100svh;
  background:url('./tlo.png') center/cover;
}

.selector{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:694px;
  height:553px;
}

.mark{
  position:absolute;
  top:0;
  left:195.5px;
  width:303.2px;
  height:307px;
  display:block;
  transition:transform .3s ease,filter .3s ease;
}

.mark:hover{
  transform:scale(1.055);
  filter:drop-shadow(0 8px 12px rgb(125 69 131 / 25%));
}

.countries{
  position:absolute;
  bottom:0;
  display:flex;
  gap:50px;
}

.country{
  width:198px;
  height:198px;
  background:#F8F8FA;
  border-radius:30px;
  display:grid;
  place-items:center;
  box-shadow:0 0 15.9px rgb(125 69 131 / 18%);
  text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease;
}

.country:is(:hover,:focus-visible){
  transform:translateY(-8px) scale(1.035);
  box-shadow:0 12px 28px rgb(125 69 131 / 30%);
}

.country:focus-visible{
  outline:4px solid #7d4583;
  outline-offset:5px;
}

.flag{
  display:block;
  width:126px;
  height:126px;
  border-radius:50%;
  overflow:hidden;
}

.nl{
  background:linear-gradient(to bottom,#ec1c24 33.333%,#fff 0 66.666%,#1b75bb 0);
}

.de{
  background:linear-gradient(to bottom,#141414 34.92%,#ed1f24 0 69.05%,#ffcd05 0);
}

.pl{
  background:linear-gradient(to bottom,#fff 50%,#ec1c24 0);
}

@media(max-width:760px){
  .selector{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    width:min(90vw,694px);
    height:auto;
    min-height:100svh;
    margin:0 auto;
    padding:30px 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(36px,9vw,65px);
  }
  .screen {
    background:url('./background_mobile.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .mark{
    position:static;
    width:clamp(125px,32vw,230px);
    height:auto;
  }

  .countries{
    position:static;
    gap:clamp(8px,3vw,25px);
    width:100%;
    justify-content:center;
  }

  .country{
    width:min(28vw,170px);
    height:auto;
    aspect-ratio:1;
    border-radius:clamp(12px,4vw,30px);
  }

  .flag{
    width:64%;
    height:auto;
    aspect-ratio:1;
  }
}

@media(prefers-reduced-motion:reduce){
  .mark,.country{transition:none}
}