@font-face {
  font-family: 'PixelFont'; /* Frei wählbarer Name */
  src: url('pixel.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
    background-color: blue;
    color: white;
    font-family: 'PixelFont', sans-serif;
    margin: 0;
    --fm: 1;
}

.popup_wrapper {
    --ppw_w: 25vw;
    --ppw_h: 18vw;
    position: absolute;
    top: calc((100vh - var(--ppw_h))/2);
    left: calc((100vw - var(--ppw_w))/2);
    width: var(--ppw_w);
    height: var(--ppw_h);
    background-color: whitesmoke;
    color: black;
    transition: opacity 3s ease-in-out;
}

.popup_topw {
    height: 10%;
    width: 100%;
}

.disco {
    width: 15%;
    user-select: none;
}




@media (max-width: 821px) {
    body {
        --fm: 3.6;
    }
    .popup_wrapper {
      --ppw_w: 90vw;
      --ppw_h: 65vw;
    }
    .disco {
        width: 60%;
    }
}