cr angeidiarys (pro standard)

*CHANGE THE ELEMENT ID IF IT DOESN'T MATCH YOURS*

--- CONTAINER 01 ---

#container01 > .wrapper {
z-index: 5;
position: relative;
top: 2em;
}

--- LONG BANNER TEXT ---

#text01 {
background: #EDCFFF;
border-radius: 0px 10px 10px 0px;
right: 1.8em;
top: 45px;
}

@media only screen and (max-width: 600px) {
#text01 {
top: 30px;
}
}

--- 'FAIRYTOPIA' TEXT ---

#text02 {
color: white;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-family:planet;
top: 10px;
}

@media only screen and (max-width: 600px) {
#text02 {
top: 3px;
}
}

--- MAIN CONTAINER ---

#container02 > .wrapper {
width: 55%;
box-shadow: 0 0 0 1px black, inset 0 0 0 1px black;
border-radius: 0.375em;
position: relative;
right: 4em;
}

--- INFO TEXTS ---

#elementID {
color: white;
-webkit-text-stroke-width: 0.8px;
-webkit-text-stroke-color: #000;
background: #F5E6FF;
border: 1px solid black;
border-radius: 10px 0px 10px 0px;
padding: 10px;
width: 8em;
height: 4.5em;
}

@media only screen and (max-width: 600px) {
#elementID {
padding: 7px;
width: 8em;
}
}

--- NAME TEXT ---

#elementID {
background: linear-gradient(180deg, #FFCCCC 0%, #FFFFFF 45%, #FFCCCC 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: #000;
z-index: 5;
font-family: fenotype;
position: absolute;
top: 2.15em;
left: -0.15em;
}

@media only screen and (max-width: 600px) {
#elementID {
top: 2.2em;
left: -0.8em;
}
}

--- DOLL IMAGE ---

#image01 .frame {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
z-index: 3;
position: absolute;
right: -2.5em;
top: -2.5em;
}

@media only screen and (max-width: 600px) {
#image01 .frame {
top: -3em;
}
}

@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 15px); }
100% { transform: translate(0, -0px); }
}

--- MENU CONTAINER ---

#elementID > .wrapper {
width: 23%;
position: absolute;
bottom: 1.7em;
left: 18.5em;
}

@media only screen and (max-width: 600px) {
#elementID > .wrapper {
width: 24%;
}
}

--- 'Menu' TEXT ---

#elementID {
color: white;
background: linear-gradient(180deg, #FFCCCC 0%, #FFFFFF 50%, #FFCCCC 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: #000;
font-family:planet;
}

--- 'PAGE 00 & etc' TEXTS ---

#elementID {
color: white;
}

#elementID a {
-webkit-text-stroke-width: 0.6px;
-webkit-text-stroke-color: #000;
}

--- POSITIONING for MUSIC PLAYER ---
position: absolute;
top:14em;
left:20em;

--- MEDIA RULE for MUSIC PLAYER ---
@media only screen and (max-width: 600px) {
#glenplayer02 {
top: 14.3em;
}
}

--- LINKS ---

#elementID {
color: white;
background: #EDCFFF;
border-radius: 10px;
border: 1px solid black;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
width: 70%;
font-family: lovely;
left: 4.5em;
top:10px;
}

@media only screen and (max-width: 600px) {
#elementID {
width: 70%;
}
}

--- CONTAINER (2nd PAGE) ---

#elementID > .wrapper {
border-radius: 10px 0px 10px 0px;
width: 83%;
}

-- INFO TEXT (LEFT) ---

#elementID {
background: #FFFFFF99;
padding: 5px;
border: 1px solid black;
border-radius: 10px 0px 10px 0px;
}

--- 'i like... ★' TEXT ---

#elementID {
padding: 3px;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-family: planet;
}

@media only screen and (max-width: 600px) {
#elementID {
padding: 2px;
}
}

--- SCROLL (RIGHT) ---

#elementID {
background: #FFFFFF99;
padding: 5px;
border: 1px solid black;
border-radius: 10px 0px 10px 0px;
overflow: auto;
height: 70px;
}

@media only screen and (max-width: 600px) {
#elementID {
height: 53px;
}
}

--- CONTAINER (3rd PAGE) ---

#elementID > .wrapper {
border-radius: 10px 0px 10px 0px;
width: 83%;
height: 8em;
}

--- SCROLLBOX ---

#elementID {
background: #FFFFFF99;
padding: 5px;
border: 1px solid black;
border-radius: 10px 0px 0px 10px;
border-right: none;
overflow: auto;
height: 100px;
z-index: 5;
}

@media only screen and (max-width: 600px) {
#elementID {
height: 80px;
bottom: 5px;
}
}

#elementID mark {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-size: 1.25em;
font-family:planet;
}

--- RULES TEXT ---

#elementID {
background: #FFFFFFCC;
padding: 5px;
border: 1px solid black;
border-radius: 0px 10px 10px 0px;
writing-mode: vertical-rl;
text-orientation: downwards;
height: 100px;
width: 40px;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
z-index: 500;
padding-right: 10px;
font-family:planet;
}

@media only screen and (max-width: 600px) {
#elementID {
width: 40px;
height: 80px;
bottom: 5px;
}
}

--- PNG IMAGE ---

#elementID .frame {
z-index: 3;
position: absolute;
top: -5em;
left: 17.5em;
}

@media only screen and (max-width: 600px) {
#elementID .frame {
left: 18.5em;
}
}

--- CONTAINER (4th PAGE) ---

#elementID > .wrapper {
border-radius: 10px 0px 10px 0px;
width: 83%;
}

--- SCROLLBOX (LEFT) ---

#elementID {
background: #FFFFFF99;
padding: 5px;
border: 1px solid black;
border-radius: 10px 0px 10px 0px;
width: 13em;
z-index: 500;
overflow: auto;
height: 70px;
right: -0.5px;
}

@media only screen and (max-width: 600px) {
#elementID {
width: 13em;
}
}

#elementID mark {
color: white;
font-size: 1em;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-family: lovely;
}

--- 'xtra!' TEXT ---

#elementID {
background: linear-gradient(90deg, #FFCCCC 0%, #fff 50%, #FFCCCC 100%);
border: 1px solid black;
border-radius: 10px 10px 10px 10px;
height: 25px;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
z-index: 500;
width: 6.5em;
font-family:planet;
right: -0.5px;
}

@media only screen and (max-width: 600px) {
#elementID {
width: 6.5em;
padding-top: 2px;
}
}

--- SCROLL (RIGHT) ---

#elementID {
background: #FFFFFF99;
padding: 5px;
border: 1px solid black;
border-radius: 10px 0px 10px 0px;
width: 13em;
z-index: 500;
overflow: auto;
height: 70px;
right: 20px;
}

@media only screen and (max-width: 600px) {
#elementID {
width: 13em;
right: 15px;
}
}