|
|
|
@font-face {
|
|
|
|
font-family: 'Combine';
|
|
|
|
src: url('Combine.otf') format('opentype');
|
|
|
|
font-weight: normal;
|
|
|
|
}
|
|
|
|
@font-face {
|
|
|
|
font-family: 'Sinistre';
|
|
|
|
src: url('Sinistre-S†Caroline.otf') format('opentype');
|
|
|
|
font-weight: normal;
|
|
|
|
}
|
|
|
|
:root {
|
|
|
|
--color-blue: #0000FF;
|
|
|
|
--color-gray: #edecec;
|
|
|
|
--color-pink: #f8a8ff;
|
|
|
|
--color-yel: #FDFFF0;
|
|
|
|
--color-aqua: #7FFFD4;
|
|
|
|
--color-black: #000;
|
|
|
|
--special-font: 'Sinistre';
|
|
|
|
font-size: 16pt;
|
|
|
|
}
|
|
|
|
html {
|
|
|
|
box-sizing: border-box;
|
|
|
|
height: 100%
|
|
|
|
}
|
|
|
|
*, *:before, *:after {
|
|
|
|
-webkit-box-sizing: inherit;
|
|
|
|
-moz-box-sizing: inherit;
|
|
|
|
box-sizing: inherit;
|
|
|
|
}
|
|
|
|
body{
|
|
|
|
margin:0px;
|
|
|
|
}
|
|
|
|
.move {
|
|
|
|
animation: bodymove 120s infinite;
|
|
|
|
-webkit-animation: bodymove 120s infinite;
|
|
|
|
}
|
|
|
|
@keyframes bodymove {
|
|
|
|
0% { background: radial-gradient(ellipse at center, var(--color-pink), var(--color-blue));
|
|
|
|
background-size: 100% 100%;}
|
|
|
|
20% { background: radial-gradient(ellipse at top, var(--color-yel), var(--color-blue) 100%);
|
|
|
|
background-size: 10% 10%; }
|
|
|
|
30% { background: radial-gradient(ellipse at top, var(--color-yel), var(--color-blue) 40%);
|
|
|
|
background-size: 10% 100%;}
|
|
|
|
35% { background: radial-gradient(ellipse at top, var(--color-yel), var(--color-blue) 40%, var(--color-pink));
|
|
|
|
background-size: 10% 100%;}
|
|
|
|
45% { background: radial-gradient(ellipse at center, var(--color-yel), var(--color-blue) 10%, var(--color-yel) 100%);}
|
|
|
|
65% { background: radial-gradient(ellipse at center, var(--color-blue), var(--color-yel) 10%, var(--color-blue) 100%);
|
|
|
|
background-size: 10% 999%;
|
|
|
|
background-position: left;}
|
|
|
|
70% { background: radial-gradient(ellipse at center, var(--color-pink), var(--color-yel) 10%, #f8a8ff 100%);
|
|
|
|
background-size: 10% 999%;}
|
|
|
|
85% { background: linear-gradient(var(--color-pink), var(--color-blue) 10%, var(--color-pink) 100%);
|
|
|
|
background-size: 10% 10%;}
|
|
|
|
90% { background: linear-gradient(var(--color-blue) 50%, var(--color-pink) 10% 10%);
|
|
|
|
background-size: 100% 1%;}
|
|
|
|
100% { background: linear-gradient(var(--color-pink) 10%, var(--color-blue) 100%);}
|
|
|
|
}
|
|
|
|
marquee{
|
|
|
|
color: var(--color-pink);
|
|
|
|
font-family: var(--special-font);
|
|
|
|
}
|
|
|
|
#stage01{
|
|
|
|
position: absolute;
|
|
|
|
z-index: 3;
|
|
|
|
margin: 10% 25%;
|
|
|
|
font-family: var(--special-font);
|
|
|
|
}
|
|
|
|
#stage01 input{
|
|
|
|
box-shadow: 1px 1px 8px 2px var(--color-pink);
|
|
|
|
border-radius: 100%;
|
|
|
|
padding: 0rem 0.5rem;
|
|
|
|
width: 150px;
|
|
|
|
height: 150px;
|
|
|
|
background-color: var(--color-black);
|
|
|
|
color: var(--color-pink);
|
|
|
|
border: 0px;
|
|
|
|
font-size: 1.6rem;
|
|
|
|
font-family: var(--special-font);
|
|
|
|
margin: 0rem 2rem;
|
|
|
|
}
|
|
|
|
#stage01 #result {
|
|
|
|
color: var(--color-pink);
|
|
|
|
}
|
|
|
|
#stage01 button {
|
|
|
|
font-size: 0.8rem;
|
|
|
|
border: 0px;
|
|
|
|
color: var(--color-pink);
|
|
|
|
font-family: var(--special-font);
|
|
|
|
box-shadow: 0.1rem 0.1rem 0.4rem 0.1rem var(--color-pink);
|
|
|
|
border-radius: 100%;
|
|
|
|
}
|
|
|
|
#stage01 button:hover{
|
|
|
|
background-color: var(--color-pink);
|
|
|
|
color: var(--color-black);
|
|
|
|
}
|
|
|
|
#stage02{
|
|
|
|
color: var(--color-blue);
|
|
|
|
font-size: 14.6vmax;
|
|
|
|
line-height: 18.6vmax;
|
|
|
|
position: absolute;
|
|
|
|
z-index: 2;
|
|
|
|
top: 0;
|
|
|
|
font-family: var(--special-font);
|
|
|
|
font-weight: bold;
|
|
|
|
word-spacing: 1vw;
|
|
|
|
filter: opacity(0.9);
|
|
|
|
text-shadow: 0.1rem 0.1rem 0.1rem var(--color-pink);
|
|
|
|
}
|
|
|
|
#stage03{
|
|
|
|
display: initial;
|
|
|
|
position: absolute;
|
|
|
|
z-index: 3;
|
|
|
|
top: 0;
|
|
|
|
right: 0;
|
|
|
|
margin: 2.2vmax;
|
|
|
|
width: 125vmin;
|
|
|
|
height: 95vmin;
|
|
|
|
border: 0rem;
|
|
|
|
box-shadow: 0.1rem 0.1rem 0.4rem 0.1rem var(--color-pink);
|
|
|
|
border-radius: 0 50% 50% 50%;
|
|
|
|
filter: grayscale(1);
|
|
|
|
opacity: 0.8;
|
|
|
|
}
|
|
|
|
span {
|
|
|
|
box-shadow: 0.1rem 0.1rem 1rem 0.1rem var(--color-pink);
|
|
|
|
position: absolute;
|
|
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
span.oval:nth-of-type(1n) {
|
|
|
|
width: 10%;
|
|
|
|
height: 80%;
|
|
|
|
border-radius: 100% / 50%;
|
|
|
|
}
|
|
|
|
span.oval:nth-of-type(2n) {
|
|
|
|
width: 50%;
|
|
|
|
height: 50%;
|
|
|
|
border-radius: 80% / 80%;
|
|
|
|
right: 0;
|
|
|
|
}
|
|
|
|
span.oval:nth-of-type(3n) {
|
|
|
|
width: 2.5%;
|
|
|
|
height: 2.5%;
|
|
|
|
border-radius: 100%;
|
|
|
|
background-color: var(--color-pink);
|
|
|
|
margin:10vh 0vh 0vh 45vw;
|
|
|
|
}
|
|
|
|
span.oval:nth-of-type(4n) {
|
|
|
|
width: 90%;
|
|
|
|
height: 20%;
|
|
|
|
border-radius: 50% / 50%;
|
|
|
|
margin-top: 40vh;
|
|
|
|
right: 0;
|
|
|
|
}
|
|
|
|
span.oval:nth-of-type(5n) {
|
|
|
|
width: 35%;
|
|
|
|
height: 35%;
|
|
|
|
border-radius: 60% 10% / 80% 40%;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
}
|
|
|
|
|