#popup-window {
    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    z-index: 4;

    width: 55vw;
    height: 50vh;
    min-height: 40vw;

    overflow-y: clip;
    overflow-x: clip;

    visibility: hidden;

    border: 3px solid black;

    background: url("./img/platki popup bg.png") ;
    background-size: cover;

    --current-day-id: "null";

}
@media screen and (max-aspect-ratio: 1/1)  {
    #popup-window {
        width: 88vw;
        height: 75vh;
        /*min-height: 20vw;*/
        /*min-width: 20vw;*/
        /*max-height: 130vw;*/

        overflow-y: scroll;


    }
}



#popup-tint {
    position: absolute;
    background: rgba( 0, 0, 0, 0.7 );
    z-index: 3;
    visibility: hidden;
}




.popup-content {

    /*margin-top: 10vw;*/
    /*position: relative;*/
    position: absolute;
    margin: auto;
    /*margin: 4vw;*/
    left: 3vw;
    right: 3vw;



    display: flex;
    flex-direction: column;
    gap: 5vw;



    height: auto;
    min-height: max-content;
    /*margin: 2vw;*/
    align-items: center;
    content-visibility: hidden;
}
@media screen and (max-aspect-ratio: 1/1)  {
    .popup-content {
        /*margin: 4vw;*/
        /*border: red solid 1px;*/
        top: 18vw;
    }
    .popup-content > *:first-child {
        margin-top: 3vw;
    }
    .popup-content > *:last-child {
        margin-bottom: 3vw;
    }



    #popup-platki-concert-yt {
        height: 45vw;
        width: 80vw;
    }
}
.popup-content > * {
    /*border: blue solid 1px;*/
}




#popup-title {
    position: relative;
    text-align: center;
    margin: auto;
    left: 0;
    right: 0;
    top: 1.7vw;

    font-size: 3.3vw;
    font-family: "Caveat Brush", cursive;
    font-weight: bold;
    line-height: 3.2vw;
}



.day1info1 {
    width: 20vw;
    transform: rotate(-8deg);
    top: 6vw;
    right: 1vw;
    text-align: center;
}
.day1info2 {
    width: 50vw;
    transform: rotate(2deg);
    top: 20vw;
    left: 0;
}

.day2info1 {
    /*width: 50vw;*/
    text-align: center;
    transform: rotate(4deg);
    top: 8vw;
    left: 0;
}
.day2info2 {
    /*font-size: 200%;*/
    width: 20vw;
    text-align: center;
    transform: rotate(3deg);
    top: 10vw;
    left: 5vw;
}
.day2info3 {
    /*font-size: 200%;*/
    width: 20vw;
    text-align: center;
    transform: rotate(3deg);
    top: 18vw;
    left: 4vw;
}
.day2info4 {
    /*font-size: 200%;*/
    width: 20vw;
    text-align: center;
    transform: rotate(-9deg);
    top: 25vw;
    right: 1vw;
}

.day3info1 {
    width: 25vw;
    transform: rotate(-6deg);
    top: 4vw;
    left: 0;
    text-align: center;
}
.day3info2 {
    width: 27vw;
    transform: rotate(9deg);
    top: 20vw;
    right: 0;
    text-align: center;
}

.day4info1 {
    width: 29vw;
    transform: rotate(-8deg);
    top: 6vw;
    left: 1vw;
}
.day4info2 {
    width: 29vw;
    text-align: center;
    right: 0;
    top: 28vw;
    transform: rotate(-6deg);
}

.day5info1 {
    width: 31vw;
    transform: rotate(-4deg);
    top: 4vw;
    left: 0;
}
.day5info2 {
    text-align: center;
    right: 2.6vw;
    top: 6.5vw;

    transform: rotate(4deg);
}
.day5info3 {
    width: 20vw;
    transform: rotate(3deg);
    top: 22vw;
    right: 10vw;
}
.day5info4 {
    text-align: center;
    top: 30vw;
    right: 0;
}
.day5info5 {
    text-align: center;
    top: 33vw;
    right: 0;
}
.day6info1 {
    text-align: center;
    top: 7vw;
    transform: rotate(-15deg);
    width: 20vw;
    left: 3vw;
}
.day6info2 {
    text-align: center;
    top: 20vw;
    left: 10vw;
}
.day7info2 {
    top: 10vw;
    left: 10vw;
}
.day7info3 {
    top: 13vw;
    left: 10vw;
}
.day7info4 {
    top: 16vw;
    left: 10vw;
}
.day7info5 {
    top: 19vw;
    left: 10vw
}


.popup-infobox {
    position: absolute;
    font-family: "Arial", serif;
    font-weight: bold;
    font-size: 1.3vw;
    /*visibility: hidden;*/
}
@media screen and (max-aspect-ratio: 1/1)  {

    .popup-infobox {
        position: relative;
        font-size: 3.8vw;
        width: 100%;

        top:0;
        left:0;
        right:0;
        bottom: 0;

        text-align: center;
        transform: rotate(0deg);
    }
}

/*.popup-infobox {*/
/*    position: absolute;*/
/*    font-family: "Arial", serif;*/
/*    font-weight: bold;*/
/*}*/

/* Day 1 */
.platki-not-platki {
    width: 25vw;
    top: 2vw;
    left: 0;
}
@media screen and (max-aspect-ratio: 1/1)  {
    .platki-not-platki {
        width: 60vw;
    }
}
.original-spotify {
    /*height: 10vw;*/
    /*width: 40vw;*/
    top: 25vw;
    transform: rotate(1deg);
    left: 0;
    /*block-size: 50%;*/
}
@media screen and (max-aspect-ratio: 1/1)  {
    /*block-size: 100%;*/
    /*width: 80vw;*/
    /*width: 100%;*/
    height: 100%;
    /*width: 40vw;*/
    /*height: 30vw;*/
}

/* Day 2 */
.songster-logo {
    width: 15vw;
    left: 6vw;
    top: 20vw;
    transform: rotate(-9deg);
}
@media screen and (max-aspect-ratio: 1/1)  {
    .songster-logo {
        width: 40vw;
    }
}

/* Day 3 */
.stream-yt {
    transform: rotate(3deg);
    top: 4vw;
    width: 23vw;
    height: 13vw;
    right: 0;
}
@media screen and (max-aspect-ratio: 1/1)  {
    .stream-yt {
        height: 45vw;
        width: 80vw;
    }
}
.twitch-bandcamp {
    transform: rotate(-7deg);

    left: 2vw;
    top: 15vw;

    width: 15vw;
    height: 15vw;
}
@media screen and (max-aspect-ratio: 1/1)  {
    .twitch-bandcamp {
        height: 60vw;
        width: 60vw;
    }
}


/* Day 4 */
.concert-yt {
    transform: rotate(3deg);
    top: 15vw;
    width: 23vw;
    height: 13vw;
    left: 0;
}
@media screen and (max-aspect-ratio: 1/1)  {
    .concert-yt {
        height: 45vw;
        width: 80vw;
    }
}
.live-bandcamp {
    transform: rotate(7deg);

    right: 2vw;
    top: 7vw;

    width: 17vw;
    height: 17vw;
}
@media screen and (max-aspect-ratio: 1/1)  {
    .live-bandcamp {
        height: 60vw;
        width: 60vw;
    }
}


/* Day 5 */
.crafting {
    width: 20vw;
    transform: rotate(4deg);
    right: 0;
    top: 9vw;
}
@media screen and (max-aspect-ratio: 1/1)  {
    .crafting {
        width: 60vw;
    }
}

.minecraft-disc {
    width: 18vw;
    left: 0;
    top: 12vw;
}
@media screen and (max-aspect-ratio: 1/1)  {
    .minecraft-disc {
        width: 40vw;
    }
}

/* Day 6 */
.platki-cd {
    width: 30vw;
    transform: rotate(4deg);
    right: -5vw;
    top: 3vw;
}
@media screen and (max-aspect-ratio: 1/1)  {
    .platki-cd {
        width: 80vw;
    }
}

/* Day 7 */
.plakat {
    width: 16vw;
    transform: rotate(4deg);
    right: 0;
    top: 3vw;
}
@media screen and (max-aspect-ratio: 1/1)  {
    .plakat {
        width: 80vw;
    }
}






/* General iframe and img rules */
.popup-img,
.popup-iframe {
    position: absolute;
}
@media screen and (max-aspect-ratio: 1/1)  {
    .popup-img,
    .popup-iframe {
        position: relative;

        top:0;
        left:0;
        right:0;
        bottom: 0;
        transform: rotate(0deg);
    }
}




@media screen and (max-aspect-ratio: 1/1)  {


    .popup-content {
        height: auto;
        flex-direction: column;
    }

    #popup-title {
        /*top: 10px;*/
        top: 4vw;
        font-size: 7vw;
        line-height: 7vw;
    }
}