.container {
    position: absolute;
    margin: 200px auto 0px;
    left: 0;
    right: 0;
    width: 90%;
    height: 30%;
    display: flex;
    border: 6px rgba(255, 255, 255, 0.87) solid;
    box-sizing: border-box;
    box-shadow: 0 0 5px rgba(231, 63, 63, 0.479);
    z-index: 99;
    border-image: url(../img/4duyr277.bmp) 12 round;
}

.panel {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    transition: font-size 0.7s ease-in-out, flex-grow 0.7s ease-in-out;
    overflow: hidden;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.719);
	
}


.panel>* {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-in-out;
	
}

/* p:first-child {
    transform: translateY(100%);
} */

.change {
	width:100%;
	height: 100%;
    position: absolute;
    top: 50%;
    /* transform: translateY(-50%); */
	
}


/* .alter p {
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    transform: translateY(0%);
    letter-spacing: 6px;
    font-weight: bold;
} */

.pan1 {
    background: url(../img/1.jpg)no-repeat 45%/cover;
    color: rgb(247, 92, 247);
    text-shadow: 3px 3px 1px rgba(255, 255, 255);
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
}

.pan2 {
    background: url(../img/2.jpg) no-repeat 40%/cover;
    color: rgb(235, 235, 67);
    text-shadow: 3px 3px 1px rgb(99, 108, 235);
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
}

.pan3 {
    background: url(../img/3.jpg) no-repeat 60%/cover;
    color: rgb(224, 37, 37);
    text-shadow: 3px 3px 1px rgb(0, 0, 0);
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
}

.pan4 {
    background: url(../img/4.jpg) no-repeat 50%/cover;
    color: rgb(247, 92, 247);
    text-shadow: 3px 3px 1px rgb(253, 251, 251);
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
}

p {
    /* left: 0; */
    /* right: 0; */
    margin: 0 auto;
}

.p1 {
    align-self: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    bottom:0;
    position:absolute;
        font-size: 30px;
    font-weight: bold;
    display: none;
    color: rgb(247, 92, 247);
}

.p2 {
    align-self: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    bottom: 0;
        position: absolute;
    font-size: 30px;
    font-weight: bold;
    display: none;
    color: rgb(235, 235, 67);
}

.p3 {
    align-self: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    bottom: 0;
        position: absolute;
        font-size: 30px;
    font-weight: bold;
    display: none;
    color: rgb(224, 37, 37);
}

.p4 {
    align-self: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    bottom: 0;
        position: absolute;
        font-size: 30px;
    font-weight: bold;
    display: none;
    color: rgb(227, 23, 190);
}
.textContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}