Simon O'Shea
612 lines
8.0 KiB
CSS
612 lines
8.0 KiB
CSS
/**
|
|
normal chrome dark theme color
|
|
@media(prefers-color-scheme:dark){body{background-color:rgb(50,54,57);}}
|
|
|
|
#ball-left
|
|
{
|
|
display: block;
|
|
position: relative;
|
|
|
|
top: 2.5rem;
|
|
left: 20%;
|
|
|
|
height: .5rem;
|
|
width: .5rem;
|
|
border-radius: 50%;
|
|
|
|
animation-name: left-ball;
|
|
animation-duration: 20s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
#ball-right
|
|
{
|
|
display: block;
|
|
position: relative;
|
|
|
|
bottom: 2.5rem;
|
|
|
|
height: .5rem;
|
|
width: .5rem;
|
|
border-radius: 50%;
|
|
|
|
animation-name: right-ball;
|
|
animation-duration: 20s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
@keyframes left-ball
|
|
{
|
|
0%
|
|
{
|
|
left: 25%;
|
|
background-color: white;
|
|
}
|
|
10%
|
|
{
|
|
left: 30%;
|
|
background-color: #fcd2d1;
|
|
}
|
|
20%
|
|
{
|
|
left: 25%;
|
|
background-color: #fcfad1;
|
|
}
|
|
30%
|
|
{
|
|
left: 30%;
|
|
background-color: #d4fcd1;
|
|
}
|
|
40%
|
|
{
|
|
left: 25%;
|
|
background-color: #d1f6fc;
|
|
}
|
|
50%
|
|
{
|
|
left: 30%;
|
|
background-color: #dfd1fc;
|
|
}
|
|
60%
|
|
{
|
|
left: 25%;
|
|
background-color: #d1eefc;
|
|
}
|
|
70%
|
|
{
|
|
left: 30%;
|
|
background-color: #eed1fc;
|
|
}
|
|
80%
|
|
{
|
|
left: 25%;
|
|
background-color: #f1d1fc;
|
|
}
|
|
90%
|
|
{
|
|
left: 30%;
|
|
background-color: #fcdcd1;
|
|
}
|
|
100%
|
|
{
|
|
left: 25%;
|
|
background-color: white;
|
|
}
|
|
}
|
|
|
|
@keyframes right-ball
|
|
{
|
|
0%
|
|
{
|
|
left: 72.25%;;
|
|
background-color: white;
|
|
}
|
|
10%
|
|
{
|
|
left: 67.25%;;
|
|
background-color: #fcd2d1;
|
|
}
|
|
20%
|
|
{
|
|
left: 72.25%;;
|
|
background-color: #fcfad1;
|
|
}
|
|
30%
|
|
{
|
|
left: 67.25%;;
|
|
background-color: #d4fcd1;
|
|
}
|
|
40%
|
|
{
|
|
left: 72.25%;;
|
|
background-color: #d1f6fc;
|
|
}
|
|
50%
|
|
{
|
|
left: 67.25%;;
|
|
background-color: #dfd1fc;
|
|
}
|
|
60%
|
|
{
|
|
left: 72.25%;;
|
|
background-color: #d1eefc;
|
|
}
|
|
70%
|
|
{
|
|
left: 67.25%;;
|
|
background-color: #eed1fc;
|
|
}
|
|
80%
|
|
{
|
|
left: 72.25%;;
|
|
background-color: #f1d1fc;
|
|
}
|
|
90%
|
|
{
|
|
left: 67.25%;;
|
|
background-color: #fcdcd1;
|
|
}
|
|
100%
|
|
{
|
|
left: 72.25%;;
|
|
background-color: white;
|
|
}
|
|
}**/
|
|
|
|
@media(prefers-color-scheme:dark){body{background-color:rgb(23,38,38);}}
|
|
|
|
@keyframes border-color
|
|
{
|
|
0%
|
|
{
|
|
border-right-width: 4px;
|
|
border-left-width: 4px;
|
|
|
|
border-right-style: solid;
|
|
border-left-style: solid;
|
|
|
|
border-right-color: white;
|
|
border-left-color: white;
|
|
}
|
|
10%
|
|
{
|
|
border-right-width: 4px;
|
|
border-left-width: 4px;
|
|
|
|
border-right-style: solid;
|
|
border-left-style: solid;
|
|
|
|
border-right-color: #fcd2d1;
|
|
border-left-color: #fcd2d1;
|
|
}
|
|
20%
|
|
{
|
|
border-right-width: 4px;
|
|
border-left-width: 4px;
|
|
|
|
border-right-style: solid;
|
|
border-left-style: solid;
|
|
|
|
border-right-color: #fcfad1;
|
|
border-left-color: #fcfad1;
|
|
}
|
|
30%
|
|
{
|
|
border-right-width: 4px;
|
|
border-left-width: 4px;
|
|
|
|
border-right-style: solid;
|
|
border-left-style: solid;
|
|
|
|
border-right-color: #d4fcd1;
|
|
border-left-color: #d4fcd1;
|
|
}
|
|
40%
|
|
{
|
|
border-right-width: 4px;
|
|
border-left-width: 4px;
|
|
|
|
border-right-style: solid;
|
|
border-left-style: solid;
|
|
|
|
border-right-color: #d1f6fc;
|
|
border-left-color: #d1f6fc;
|
|
}
|
|
50%
|
|
{
|
|
border-right-width: 4px;
|
|
border-left-width: 4px;
|
|
|
|
border-right-style: solid;
|
|
border-left-style: solid;
|
|
|
|
border-right-color: #dfd1fc;
|
|
border-left-color: #dfd1fc;
|
|
}
|
|
60%
|
|
{
|
|
border-right-width: 4px;
|
|
border-left-width: 4px;
|
|
|
|
border-right-style: solid;
|
|
border-left-style: solid;
|
|
|
|
border-right-color: #d1eefc;
|
|
border-left-color: #d1eefc;
|
|
}
|
|
70%
|
|
{
|
|
border-right-width: 4px;
|
|
border-left-width: 4px;
|
|
|
|
border-right-style: solid;
|
|
border-left-style: solid;
|
|
|
|
border-right-color: #eed1fc ;
|
|
border-left-color: #eed1fc;
|
|
}
|
|
80%
|
|
{
|
|
border-right-width: 4px;
|
|
border-left-width: 4px;
|
|
|
|
border-right-style: solid;
|
|
border-left-style: solid;
|
|
|
|
border-right-color: #f1d1fc;
|
|
border-left-color: #f1d1fc;
|
|
}
|
|
90%
|
|
{
|
|
border-right-width: 4px;
|
|
border-left-width: 4px;
|
|
|
|
border-right-style: solid;
|
|
border-left-style: solid;
|
|
|
|
border-right-color: #fcdcd1;
|
|
border-left-color: #fcdcd1;
|
|
}
|
|
100%
|
|
{
|
|
border-right-width: 4px;
|
|
border-left-width: 4px;
|
|
|
|
border-right-style: solid;
|
|
border-left-style: solid;
|
|
|
|
border-right-color: white;
|
|
border-left-color: white;
|
|
}
|
|
}
|
|
|
|
@keyframes color
|
|
{
|
|
0%
|
|
{
|
|
color: white;
|
|
}
|
|
10%
|
|
{
|
|
color: #fcd2d1; /*light pink*/
|
|
}
|
|
20%
|
|
{
|
|
color: #fcfad1;
|
|
}
|
|
30%
|
|
{
|
|
color: #d4fcd1;
|
|
}
|
|
40%
|
|
{
|
|
color: #d1f6fc;
|
|
}
|
|
50%
|
|
{
|
|
color: #dfd1fc;
|
|
}
|
|
60%
|
|
{
|
|
color: #d1eefc;
|
|
}
|
|
70%
|
|
{
|
|
color: #eed1fc;
|
|
}
|
|
80%
|
|
{
|
|
color: #f1d1fc;
|
|
}
|
|
90%
|
|
{
|
|
color: #fcdcd1;
|
|
}
|
|
100%
|
|
{
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
@keyframes hover
|
|
{
|
|
0%
|
|
{
|
|
color: #f45a5a;
|
|
font-size: 1rem;
|
|
}
|
|
25%
|
|
{
|
|
color: #84E0D5;
|
|
}
|
|
50%
|
|
{
|
|
color: #f4a75a;
|
|
font-size: 1.2rem;
|
|
}
|
|
75%
|
|
{
|
|
color: #b0e084;
|
|
}
|
|
100%
|
|
{
|
|
color: #FCB283;
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
@keyframes right-arrow
|
|
{
|
|
0%
|
|
{
|
|
transform: translateX(0%);
|
|
}
|
|
10%
|
|
{
|
|
transform: translateX(15%);
|
|
}
|
|
20%
|
|
{
|
|
transform: translateX(0%);
|
|
}
|
|
30%
|
|
{
|
|
transform: translateX(15%);
|
|
}
|
|
40%
|
|
{
|
|
transform: translateX(0%);
|
|
}
|
|
50%
|
|
{
|
|
transform: translateX(15%);
|
|
}
|
|
60%
|
|
{
|
|
transform: translateX(0%);
|
|
}
|
|
70%
|
|
{
|
|
transform: translateX(15%);
|
|
}
|
|
80%
|
|
{
|
|
transform: translateX(0%);
|
|
}
|
|
90%
|
|
{
|
|
transform: translateX(15%);
|
|
}
|
|
100%
|
|
{
|
|
transform: translateX(0%);
|
|
}
|
|
}
|
|
|
|
@keyframes left-arrow
|
|
{
|
|
0%
|
|
{
|
|
transform: translateX(0%);
|
|
}
|
|
10%
|
|
{
|
|
transform: translateX(-15%);
|
|
}
|
|
20%
|
|
{
|
|
transform: translateX(0%);
|
|
}
|
|
30%
|
|
{
|
|
transform: translateX(-15%);
|
|
}
|
|
40%
|
|
{
|
|
transform: translateX(0%);
|
|
}
|
|
50%
|
|
{
|
|
transform: translateX(-15%);
|
|
}
|
|
60%
|
|
{
|
|
transform: translateX(0%);
|
|
}
|
|
70%
|
|
{
|
|
transform: translateX(-15%);
|
|
}
|
|
80%
|
|
{
|
|
transform: translateX(0%);
|
|
}
|
|
90%
|
|
{
|
|
transform: translateX(-15%);
|
|
}
|
|
100%
|
|
{
|
|
transform: translateX(0%);
|
|
}
|
|
}
|
|
|
|
html, body
|
|
{
|
|
line-height: 15pt;
|
|
min-height: 100%;
|
|
min-width: 100%;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
|
|
overflow: hidden;
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
|
|
body
|
|
{
|
|
padding: 0px;
|
|
margin: 0px;
|
|
|
|
height: 100vh;
|
|
width: 100vw;
|
|
|
|
background-image: url("bg.png");
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
|
|
h1
|
|
{
|
|
color: white;
|
|
font-family: monospace;
|
|
font-size: 1.4rem;
|
|
|
|
|
|
animation-name: color;
|
|
animation-duration: 20s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
|
|
a, section
|
|
{
|
|
display: inline-block;
|
|
height: 1rem;
|
|
|
|
text-decoration: none;
|
|
text-align: center;
|
|
|
|
color: white;
|
|
font-family: monospace;
|
|
font-size: .8rem;
|
|
|
|
scrollbar-width: none;
|
|
|
|
animation-name: color;
|
|
animation-duration: 20s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
a:hover
|
|
{
|
|
animation-name: hover;
|
|
animation-duration: 1s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
hr
|
|
{
|
|
color: white;
|
|
border: .5px solid;
|
|
border-radius: 25px;
|
|
|
|
animation-name: color;
|
|
animation-duration: 20s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
audio
|
|
{
|
|
display: inline;
|
|
position: absolute;
|
|
right: 0%;
|
|
bottom: 0%;
|
|
width: 1.25rem;
|
|
}
|
|
|
|
#line-top
|
|
{
|
|
margin-top: 1rem;
|
|
margin-bottom: -.2rem;
|
|
}
|
|
|
|
#line-bottom
|
|
{
|
|
margin-top: -.2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
#right-arrow
|
|
{
|
|
display: inline-block;
|
|
font-family: monospace;
|
|
font-size: 1.4rem;
|
|
|
|
position: relative;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
|
|
animation: right-arrow 10s infinite, color 20s infinite;
|
|
}
|
|
|
|
#left-arrow
|
|
{
|
|
display: inline-block;
|
|
font-family: monospace;
|
|
font-size: 1.4rem;
|
|
|
|
position: relative;
|
|
margin-top:0;
|
|
margin-bottom: 0;
|
|
|
|
animation: left-arrow 10s infinite, color 20s infinite;
|
|
}
|
|
|
|
#black-box
|
|
{
|
|
width: 20rem;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, .6);
|
|
|
|
|
|
border-right-width: 4px;
|
|
border-left-width: 4px;
|
|
|
|
padding-top: 0%;
|
|
margin-left: 10rem;
|
|
text-align: center;
|
|
|
|
overflow: scroll;
|
|
scrollbar-width: none;
|
|
|
|
animation-name: border-color;
|
|
animation-duration: 20s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
html::-webkit-scrollbar
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|