body{
    padding:0;
    margin:0;
    background:black;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

#condom{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    animation:show 2s forwards;
}
    @keyframes show{
        0%{opacity:0;}
        100%{opacity:1;}
    }

#disOX{
    height:100%;
    width:33%;
    text-align:center;
    padding-top:200px;
    color:white;
    float:left;
    font-family:arial;
}

p{
    letter-spacing:1px;
}

#cointainer{
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    background:black;
    width:650px;
    height:600px;
    float:left;
}

#EndX,#EndO,#EndRemis{
    position:relative;
    width:200px;
    height:300px;
    font-size:100px;
    text-align:center;
    color:white;
    background:black;
    font-size:50px;
    overflow:hidden;
}

#EndX{
    animation:endX 2s forwards;
}

#EndX span{
    font-size:200px;
}
    @keyframes endX{
        0%{opacity:0;}
        100%{opacity:1;}
    }

#EndX::before,
#EndX::after{
    content:'';
    position:absolute;
    width:100%;
    height:5px;
    background:white;
}

#EndX::before{
    transform:rotate(-45deg) translate(-50%,-50%);
    animation:befoX 2s forwards;
}
    @keyframes befoX{
        0%{transform:rotate(-45deg) translate(50%,-100%);opacity:0}
        100%{transform:rotate(-45deg) translate(-75%,0%);opacity:1}
    }

#EndX::after{
    transform:rotate(45deg) translate(-230%,400%);
    animation:afteX 2s forwards ;
}

    @keyframes afteX{
        0%{transform:rotate(45deg) translate(-230%,400%);opacity:0}
        100%{transform:rotate(45deg) translate(-100%,400%);opacity:1}
    }

#EndO{
    animation:endO 2s forwards;
}

#EndO span:nth-child(1){
    position:absolute;
    top:80%;
    left:50%;
    transform:translate(-50%,-50%)
}

#EndO span:nth-child(2){
    position:absolute;
    top:32%;
    left:50%;
    transform:translate(-50%,-50%) rotate(-45deg);
    width:190px;
    height:5px;
    background:white;
    animation:ObrKrzy1 3s ease forwards;
}
    @keyframes ObrKrzy1{
        0%{transform:translate(-50%,-50%) rotate(-45deg);opacity:1}
        100%{transform:translate(-50%,-50%) rotate(3555deg);opacity:0}
    }

#EndO span:nth-child(3){
    position:absolute;
    top:32%;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    width:190px;
    height:5px;
    background:white;
    animation:ObrKrzy2 3s ease forwards;
}
    @keyframes ObrKrzy2{
        0%{transform:translate(-50%,-50%) rotate(45deg);opacity:1}
        100%{transform:translate(-50%,-50%) rotate(3645deg);opacity:0}
    }

#EndO span:nth-child(4){
    position:absolute;
    top:32%;
    left:50%;
    transform:translate(-50%,-50%);
    width:190px;
    height:190px;
    background:white;
    border-radius:50%;
    opacity:0;
    animation:ObrKrzy3 3s ease-in forwards;
}
#EndO span:nth-child(4) span{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:165px;
    height:165px;
    background:black;
    border-radius:50%;
    opacity:0;
    animation:ObrKrzy3 3s ease-in forwards;
}
    @keyframes ObrKrzy3{
        0%{opacity:0}
        100%{opacity:1}
    }

#EndRemis{
    width:400px;
    z-index:-2;
    animation:EndRemis 2s forwards;
}
    @keyframes EndRemis{
        0%{opacity:0}
        100%{opacity:1}
    }

#EndRemis span:nth-child(1){
    position:absolute;
    top:80%;
    left:50%;
    transform:translate(-50%,-50%)
}

#EndRemis span:nth-child(2){
    position:absolute;
    top:32%;
    left:50%;
    transform:translate(-50%,-50%);
    width:190px;
    height:190px;
    border-radius:50%;
    background:white;
    animation:EndRemis1 5s ease forwards 0.2s;
}
    @keyframes EndRemis1{
        0%{left:50%}
        100%{left:27%}
    }

#EndRemis span:nth-child(2) span{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:165px;
    height:165px;
    background:black;
    border-radius:50%;
}
#EndRemis span:nth-child(3){
    position:absolute;
    top:32%;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    width:190px;
    height:8px;
    background:white;
    border-radius:5px;
    z-index:-1;
    animation:EndRemis2 5s ease forwards 0.2s;

}
    @keyframes EndRemis2{
    0%{left:50%}
    100%{left:73%}
}

#EndRemis span:nth-child(4){
    position:absolute;
    top:32%;
    left:50%;
    transform:translate(-50%,-50%) rotate(-45deg);
    width:190px;
    height:8px;
    background:white;
    border-radius:5px;
    z-index:-1;
    animation:EndRemis2 5s ease forwards 0.2s;
}

.demo{
    display: flex;
    align-items:center;
    justify-content:center;
    box-sizing: border-box;
    background:black;
    cursor:pointer;
    width:33%;
    height:33%;
    margin:0;
    padding:0;
    color:white;
    font-weight: 100;
    font-size:100px;
}
.pier{
    border-right:2px solid white;
    border-bottom:2px solid white;
}
.dru{
    border-bottom:2px solid white;
}
.trz{
    border-left:2px solid white;
    border-bottom:2px solid white;
}
.czw{
    border-right:2px solid white;
    border-bottom:2px solid white;
}
.pia{
    border-bottom:2px solid white;
}
.szo{
    border-left:2px solid white;
    border-bottom:2px solid white;
}
.sio{
    border-right:2px solid white;
}
.usm{
    border-right:2px solid white;
}

.winek{

}