*{
    margin: 0;
    padding: 0;
    transition: ease-in-out .2s;
}
*::-webkit-scrollbar {
    display: none;
}
*:focus {
    border: none;
    outline: none;
}
.container {
    background: linear-gradient(pink, lightpink);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    transition: ease-in-out 4s !important;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.active {
    color: #000;
}
.phone {
    background: #fff;
    width: 20em;
    height: 35em;
    border-radius: .8em;
    overflow: hidden;
}
.body {
    height: 33em;
    overflow: scroll;
}
h1, h2 {
    color: #999;

}
.search {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 2em;
    border: 1px solid #999;
    border-radius: 9999px;
    padding-inline: 1em;
    cursor: text;
}
.carousel {
    overflow: scroll; display: -webkit-flex; justify-content: center; align-items: center;
    height: 55%;
    gap: 5em;
    scroll-behavior: auto;
    scroll-snap-align: calc(50%, 20%);
    scroll-snap-type: mandatory;
}
.carousel .inner {
    white-space: nowrap;
    gap: 5em;
    margin-inline-start: 42.5em;
}
.c-first {
    height: 90%;
    width: 15em;
    background: linear-gradient(#f25, rgba(255, 34, 86, 0.555), rgba(255, 34, 86, 0.281));
    border-radius: .8em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: 5em;
    cursor: pointer;
}
.c-second {
    background: linear-gradient(lightpink, rgba(255, 182, 193, 0.527));
    border-radius: .8em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 90%;
    width: 15em;
    margin-right: 5em;
}
.c-third {
    background: linear-gradient(#4d3a3a, rgba(134, 89, 89, 0.521));
    border-radius: .8em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 90%;
    width: 15em;
    margin-right: 2.5em;
}
.list {
    padding: .5em;
}
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
}
.grid-1 {
    background: linear-gradient(rgb(77, 58, 58), rgba(134, 89, 89, 0.521));
    height: 14em;
    width: 100%;
    display: block;
    border-radius: 1em;
    overflow: hidden;
}
.grid-2 {
    background: linear-gradient(rgb(255, 230, 8), rgba(243, 239, 12, 0.521));
    height: 14em;
    width: 100%;
    display: block;
    border-radius: 1em;overflow: hidden;
}
.grid-3 {
    background: linear-gradient(rgb(149, 151, 138), rgba(105, 105, 103, 0.521));
    height: 14em;
    width: 100%;
    display: block;
    border-radius: 1em;overflow: hidden;
}
.grid-4 {
    background: linear-gradient(rgb(89, 6, 128), rgba(105, 75, 119, 0.521));
    height: 14em;
    width: 100%;
    display: block;
    border-radius: 1em;overflow: hidden;
}
footer {
    background-color: #fff;
    width: 20em;
    display: flex;
    position:relative;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 2em;
    box-shadow: 5px 5px 10px rgb(0,0,0,0.5),
    -5px -5px 10px rgb(255,255,255,0.3);
    color: #999;
}
footer li a{
    font-size: 1.1em;
}
label {
    cursor: pointer;
}


.first-c {
    height: 33em;
    background: rgb(241, 78, 117);
    width: 100%;
    
    position: relative;
    inset: 0;
    color: #fff;
}
.return
{
    padding: 1em;
}
.first-c .img {
height: 18.1em;
}
.first-c span {
    height: 10em;
    background-color: #fff;
    width: 90%;
    padding: 5%;
    display: block;
    border-radius : 26px 26px 0px 0px;
}
.second-c {
    height: 32.5em;
    background: lightpink;
    width: 100%;
    
    position: relative;
    inset: 0;
    color: #fff;
}
.return
{
    padding: 1em;
}
.second-c .img {
height: 18.1em;
}
.second-c span {
    height: 10em;
    background-color: #fff;
    width: 90%;
    padding: 5%;
    display: block;
    border-radius : 26px 26px 0px 0px;
}
.third-c {
    height: 32.5em;
    background: #4d3a3a;
    width: 100%;
    position: relative;
    inset: 0;
    color: #fff;
}
.return
{
    padding: 1em;
}
.third-c .img {
height: 18.1em;
}
.third-c span {
    height: 10em;
    background-color: #fff;
    width: 90%;
    padding: 5%;
    display: block;
    border-radius : 26px 26px 0px 0px;
}
input[type=checkbox]{
    display: none;
}
#red:checked ~ .container {
    background: linear-gradient(#f25, rgba(255, 34, 86, 0.555), rgba(255, 34, 86, 0.281));
}
#red:checked ~ .first-c {
    top: -35em;
    animation: transform .5s linear 1;
    animation-direction: alternate;
}
#pink:checked ~ .second-c {
    top: -68em;
    animation: transform .75s linear 1;
    animation-direction: alternate;
}
#brown:checked ~ .third-c {
    top: -100.5em;
    animation: transform 1s linear 1;
    animation-direction: alternate;
}
@keyframes pop {
    from {transform: rotateY(0deg);}
	to {transform: rotateY(225deg);}
}

@keyframes transform {
    0% {
        transform: rotate3d(0, 0, 0, 0deg) translate(0px, 0px)
    }

    10% {
        transform: rotate3d(5, 5, 5, 10deg) translate(50px, 0px)
    }

    20% {
        transform: rotate3d(60, -40, 30, 30deg)translate(0px, 0px)
    }

    30% {
        transform: rotate3d(5, 78, -50, 30deg) translate(0px, 50px)
    }

    40% {
        transform: rotate3d(45, 29, 5, 60deg) translate(80px, -1px)
    }

    50% {
        transform: rotate3d(450, 2, 51, 0deg) translate(50px, 0px)
    }

    60% {
        transform: rotate3d(4, 9, 5, 20deg)
    }

    70% {
        transform: rotate3d(45, 29, 5, -20deg) translate(40px, 40px)
    }

    80% {
        transform: rotate3d(1, 9, 5, 0deg)
    }

    90% {
        transform: rotate3d(05, 7, 5, -13deg) translate(50px, 0px)
    }

    100% {
        transform: rotate3d(0, 0, 0, 0deg)
    }
}