95 lines
1.4 KiB
CSS
95 lines
1.4 KiB
CSS
body{
|
|
background-image: url(space2.jpg);
|
|
font-family: Verdana, sans-serif;
|
|
color: white;
|
|
margin: 0 10vw 0 10vw;
|
|
animation: drift 300s infinite;
|
|
}
|
|
|
|
/* www.w3schools.com/cssref/tryit.php?filename=trycss_anim_background-position */
|
|
@keyframes drift {
|
|
50% {background-position: center;}
|
|
}
|
|
|
|
a, a:visited{
|
|
color: white;
|
|
}
|
|
|
|
h1{
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
header{
|
|
margin-bottom: 40px;
|
|
background-color: #00000099;
|
|
padding: 5px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
footer{
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
section{
|
|
margin: 0 5vw 0 5vw;
|
|
margin-top: 20px;
|
|
}
|
|
section .story{
|
|
border-top: solid white 2px;
|
|
border-bottom: solid white 2px;
|
|
padding: 4px;
|
|
|
|
background-color: #00000099;
|
|
padding: 5px;
|
|
border-radius: 3px;
|
|
}
|
|
section .lesson{
|
|
margin-top: 5px;
|
|
padding: 4px;
|
|
|
|
background-color: #00000099;
|
|
padding: 5px;
|
|
}
|
|
section .lesson:before{
|
|
content: "Lesson:";
|
|
/* border-right: solid white 2px; */
|
|
}
|
|
|
|
|
|
|
|
|
|
/* thank you CodeLab 🙏
|
|
https://www.youtube.com/watch?v=CI-vuBp_hJY
|
|
*/
|
|
|
|
.wavy-text span{
|
|
display: inline-block;
|
|
animation: wave 2s ease-in-out infinite;
|
|
}
|
|
|
|
.wavy-text span:nth-child(1n){
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.wavy-text span:nth-child(2n){
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.wavy-text span:nth-child(3n){
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
.wavy-text span:nth-child(4n){
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
@keyframes wave{
|
|
0%, 100%{
|
|
transform: translateY(0);
|
|
}
|
|
50%{
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|