/*
the specialWin is invisible until you do the special Mission
the funcionality is similar to mission.css
*/
.specialWinContainer {
    position: fixed;
    top: 0px;
    left: 0px;

    background-color: rgba(0, 0, 0, 0.5);

    opacity: 0;
    pointer-events: none;

    width: 100%;
    height: 100%;

    transition: opacity 300ms ease-in-out;
}

/*
if the special Mission is done and you click on the avatar, you can see the specialWin
if it is closed its class is removed
*/
.specialWinContainer.visible {
    opacity: 1;
    pointer-events: auto;
}

/*
positions the container of the special Text on the sceen 
(it is fixed because of specialWinContainer, see above)
if it gets to big, a scrollbar is added
*/
#specialWin {
    position: absolute;

    background-color: bisque;

    right: 10%;
    left:  10%;
    top: 3.14%;

    max-height: 80%
}


/*
determines the size of the image container depending on the screen size
*/
#specialWinImgContainer {width: 100%; text-align: center;}

@media only screen and (min-width: 900px) and (min-device-width: 900px) {
    #specialWinImgContainer {width: 45%; text-align: center;}
}

/*
determines the image size
*/
#specialWinImg {
    width: calc(100px + 20vw);
}

/*
determines the position of the close-button
*/
#xSpecialContainer {
    position: absolute;
    top: 1%;
    right: 10%;
}