rosita (cr crditem) main code

<style>

#container02 {
width: 14.5em;
padding: 2%;
height: 16em;
margin: auto;
background: #ffffff;
border-radius: 10px 0 10px 10px;
left: -2em;
position: relative;
}
#container01 {
padding: 5px;
width: 2.7em;
height: 7.5em;
background: #fff;
position: absolute;
right: 29%;
top: 0%;
border-radius: 0 20px 20px 20px;
}

@media only screen and (max-width: 600px) {
#container01 {
right: 21%;
}
}

#text01, #text02, #text03 {
font-family: kinkie;
border-radius: 50%;
background: #FFE0F5;
padding: 3px;
padding-bottom:0px;
padding-top: 3px;
cursor: pointer;
text-align: center;
margin-bottom: 20%;
text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, 0 0;
color: #fff;
transition: 0.8s ease;
font-size: 1.3em;
width: 1.75em;
}

#text05, #text06, #text04 {
position: absolute;
left: 200px;
bottom: 87px;
font-size: 14px;
padding: 7px;
padding-right: 10px;
width: 32%;
height: 63%;
overflow-y: scroll;
line-height: 1.35;
background: #ffe0f5;
font-family: 'Kosugi Maru', sans-serif;
border-radius: 7px 0 7px 0;
}

@media only screen and (max-width: 600px) {
#text05, #text06, #text04 {
width: 47%;
left: 80px;
bottom: 77px;
}
}

#image01 {
position: absolute;
left: 0px;
top: 0px;
object-fit: cover;
padding: 3px;
background: rgba(255,224,245,1);
border-radius: 7px 0 7px 0;
overflow: hidden;
}
#text05 mark {
background: #FFE0F5;
border-radius: 5px 0 5px 0;
padding-left: 5px;
padding-right: 5px;
-webkit-filter: drop-shadow(0px 0px 1px #000000);
border: 1px solid black;
}
#text06 mark {
background: #FFE0F5;
border-radius: 5px 0 5px 0;
padding-left: 5px;
padding-right: 5px;
-webkit-filter: drop-shadow(0px 0px 1px #000000);
border: 1px solid black;
}
#text04 mark {
background: #FFE0F5;
border-radius: 5px 0 5px 0;
padding-left: 5px;
padding-right: 5px;
-webkit-filter: drop-shadow(0px 0px 1px #000000);
border: 1px solid black;
}
#text07, #text09, #text08 {
position: absolute;
top: 20px;
right: 275px;
cursor: pointer;
text-stroke: 1px #000;
background: white;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 3px;
padding-top: 0px;
margins: 10px;
border: 1px solid black;
border-radius: 10%;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
z-index: 9999;
}

@media only screen and (max-width: 600px) {
#text07, #text09, #text08 {
right: 144px;
top: 15px;
width: 5%;
}
}

#image02 {
position: absolute;
left: 0px;
top: 185px;
z-index: 999;
}
#text10 {
line-height: 1.25;
background: #FFE0F6;
padding-left: 42%;
position: relative;
padding-right: 5px;
border-radius: 0 7px 7px 7px;
bottom: -195px;
font-family: handy;
}
#text11 {
position: relative;
bottom: -200px;
left: -65px;
font-family: handy;
}
#image03 {
position: relative;
bottom: -185px;
left: 0px;
}

@media only screen and (max-width: 600px) {
#image02 {
position: absolute;
top: 160px;
}
}

@media only screen and (max-width: 600px) {
#text10 {
position: relative;
top: 170px;
}
}

@media only screen and (max-width: 600px) {
#image03 {
position: relative;
top: 160px;
}
}

@media only screen and (max-width: 600px) {
#text11 {
position: relative;
top: 173px;
}
}
</style>