*{box-sizing: border-box;}
body{
    margin:0;
}

.background{
    background-color:black;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center; 
}

.door-container{
    width: 30vh;
    height: 48vh;
    box-shadow: 0 0 20px white;
    position: relative;
}

.door{
    background-color: black;
    color: white;
    width:51%;
    height: 100%;
    margin-left: 50%;
    animation: glow-door linear alternate infinite;
    animation-duration: 3s;
}

.behind{
    background-color: white;
    color: black;
}

.inner.swing{
    width: 200%;
    left:-100%;
    animation: open-door linear alternate infinite;
    animation-duration: 3s;
}

.inner{
    top:0;
    position: absolute;
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 8vh;
    width: 100%;
    height: 100%;
}

.text-container{
    position: absolute;
    width: 30vh;
    height: 48vh;
    font-family: 'Open Sans Condensed', sans-serif;
    color: white;
	text-shadow: -1px 1px 0 #000,
				  1px 1px 0 #000,
				 1px -1px 0 #000,
				-1px -1px 0 #000;
}

.text{
    position: absolute;
    width: 30vh;
    height: 48vh;
    display: grid;
    place-items: center;
    font-size:5vh;
    text-align: center;
}

.text div{
    padding: 10px;
}


.white div{
    color:white;
    width: 30vh;
    height: 48vh;
    display: grid;
    place-items: center;
}

.black div{
    color:black;
    width: 30vh;
    height: 48vh;
    display: grid;
    place-items: center;
}

@keyframes open-door {
    0% {
        transform: perspective(400px) rotateY(0deg);
    }
    100% {
        transform: perspective(400px) rotateY(-120deg);
    }
}

@keyframes glow-door{
    0%{
        background-color: black;
    }
    75%{
        background-color: black;
    }
    76%{
        background-color: white;
    }
    100%{
        background-color: white;
    }
}

@keyframes transition {
    0% {
        width: 30vh;
    }
    40%{
        width: 30vh;
    }
    60%{
        width: 14vh;
    }
    80% {
        width: 0vh;
    }
    100%{
        width: 0vh;
    }
}