+
diff --git a/html/icy-tower-home.html b/html/icy-tower-home.html
index 2120b08..df1885e 100644
--- a/html/icy-tower-home.html
+++ b/html/icy-tower-home.html
@@ -9,7 +9,7 @@
rel="stylesheet"
/>
-
+
diff --git a/html/iframe-hello-user.html b/html/iframe-hello-user.html
index d55f0ce..65afc85 100644
--- a/html/iframe-hello-user.html
+++ b/html/iframe-hello-user.html
@@ -10,7 +10,7 @@
/>
Icy Tower
-
+
diff --git a/html/instructions.html b/html/instructions.html
index 12c6a14..7b7d759 100644
--- a/html/instructions.html
+++ b/html/instructions.html
@@ -10,7 +10,7 @@
/>
Instructions
-
+
diff --git a/html/tower.html b/html/tower.html
index 9536d37..76468e9 100644
--- a/html/tower.html
+++ b/html/tower.html
@@ -1,50 +1,48 @@
-
+
-
-
-
-
+
+
+
+
+
-
+ href="https://fonts.googleapis.com/css?family=Cabin|Inconsolata|Nunito|Nunito+Sans|Pacifico|Quicksand|Rubik|VT323"
+ rel="stylesheet">
+
Let's Play
-
-
-
-
-
+
+
-
- 
+
+
+
+
+
-
-
Would you like to play music?
-
+
+
Would you like to play music?
+
+
-
-
-
+
+
+
\ No newline at end of file
diff --git a/js/login-sign-in.js b/js/login-sign-in.js
index 83f95d4..eb2360f 100644
--- a/js/login-sign-in.js
+++ b/js/login-sign-in.js
@@ -37,7 +37,7 @@ function cheakLoginValidation(e) {
let massege = document.querySelector('#error-massage');
let password = document.querySelector('#pwd').value;
let userName = document.querySelector('#email').value;
- console.log(userName); // Is this a debugging statement?
+ console.log(userName);
let user = JSON.parse(localStorage.getItem(userName));
if (user == null || user.password != password) {
massege.classList.remove('hide');
@@ -56,7 +56,7 @@ function cheakLoginValidation(e) {
updateHeloUser();
}
let verifyPwd = document.querySelector('#verify-pwd');
-verifyPwd.addEventListener('input', cheakEqualtoPwd);
+verifyPwd.addEventListener('change', cheakEqualtoPwd);
function cheakEqualtoPwd() {
let pw = document.querySelector('#pasword-first').value;
if (pw != document.querySelector('#verify-pwd').value) {
@@ -73,15 +73,14 @@ function addMEssageAboutPassword(message) {
document.getElementById('message').style.color = 'red';
}
let password = document.querySelector('#pasword-first');
-password.addEventListener('input', cheakPassword);
-password.addEventListener('input', cheakEqualtoPwd);
+password.addEventListener('change', cheakPassword);
+password.addEventListener('change', cheakEqualtoPwd);
function cheakPassword() {
- // Spelled wrong but not a concern
let pw = document.querySelector('#pasword-first').value;
if (pw.length < 8) {
addMEssageAboutPassword('**Password length must be at least 8 characters');
- } else if (pw.length > 35) {
- addMEssageAboutPassword('**Password length must not exceed 35 characters');
+ } else if (pw.length > 15) {
+ addMEssageAboutPassword('**Password length must not exceed 15 characters');
} else if (pw.search(/\d/) == -1) {
addMEssageAboutPassword(
'**Password length must contain at least one number'
@@ -114,7 +113,6 @@ function saveUser(e) {
let userName = inputName.value;
console.log(userName);
if (pwd === '' || firstName === '' || userName === '') {
- // Checks like this are unnecesary when you can use say 'required' in its html
document.getElementById('submit-error-message').innerHTML =
'**All the field are neccessary';
isOk = false;
diff --git a/js/tower.js b/js/tower.js
index 6667f33..999d3a7 100644
--- a/js/tower.js
+++ b/js/tower.js
@@ -1,20 +1,20 @@
// initial audio
-const backgroundMusic = new Audio('../audio/happy-day-113985.mp3');
-const successSound = new Audio('../audio/game-bonus-144751.mp3');
-const failure = new Audio('../audio/wah-wah-sad-trombone-6347.mp3');
+const backgroundMusic = new Audio('../audio/happy-day-113985.mp3')
+const successSound = new Audio('../audio/game-bonus-144751.mp3')
+const failure = new Audio('../audio/wah-wah-sad-trombone-6347.mp3')
// ask to user agreement to music and sounds
-let playMusic = false;
+let playMusic = false
let agreementModal = document.getElementById('agree-to-sound');
agreementModal.style.display = 'block';
-let closeAgreementModal = document.getElementById('close-modal-agreement'); //add event listener to the x button in the closal model to close it
+let closeAgreementModal= document.getElementById('close-modal-agreement'); //add event listener to the x button in the closal model to close it
closeAgreementModal.addEventListener('click', () => {
agreementModal.style.display = 'none';
-});
+})
let agreementBtn = document.getElementById('agreement');
-agreementBtn.addEventListener('click', () => {
+agreementBtn.addEventListener('click', ()=>{
playMusic = true;
agreementModal.style.display = 'none';
-});
+})
let minmumBlockWidth;
let horizontalDistance;
@@ -112,7 +112,9 @@ function drawBlocks() {
item.width,
item.height
);
+
});
+
}
let times = 0;
function movingScreen() {
@@ -397,10 +399,10 @@ letStart();
let fondHighScore = false;
function mainLoop() {
//the loop that works while the game. It calls the functions
- if (playMusic) {
+ if (playMusic){
backgroundMusic.play();
}
-
+
if (gameOver == false) {
if (keyboard.any) {
context.clearRect(0, 0, canvas.width, canvas.height);
@@ -427,16 +429,16 @@ function mainLoop() {
if (character.onGround) updateScore();
if (score > 25 && !step == 1) {
step = 1;
- if (playMusic) {
+ if (playMusic){
successSound.play();
}
-
+
cancelAnimationFrame(mainLoop);
}
if (score > 50 && step != 2) {
step = 2;
-
- if (playMusic) {
+
+ if (playMusic){
successSound.play();
}
}
@@ -445,7 +447,7 @@ function mainLoop() {
}
myanim = requestAnimationFrame(mainLoop);
} else {
- if (playMusic) {
+ if (playMusic){
backgroundMusic.pause();
failure.play();
}
@@ -519,6 +521,7 @@ function gradientAnimation() {
//when we finished introduct "game over" twice
let overMOdal = document.getElementById('over-modal');
overMOdal.style.display = 'block';
+
}
}
let closeDiv = document.getElementById('close-modal'); //add event listener to the x button in the closal model to close it
From e251675ca4d391410938fe1cd5c80897ae22c4aa Mon Sep 17 00:00:00 2001
From: Konsttakis <56228227+Konsttakis@users.noreply.github.com>
Date: Thu, 4 Jan 2024 14:01:47 +0200
Subject: [PATCH 3/5] Add files via upload
From b2723936c1a60df0225678f792ea3657032aeeec Mon Sep 17 00:00:00 2001
From: Konsttakis <56228227+Konsttakis@users.noreply.github.com>
Date: Thu, 4 Jan 2024 14:02:46 +0200
Subject: [PATCH 4/5] Add files via upload
From 4736c189e064a44ab12b14b0775164736c255fb7 Mon Sep 17 00:00:00 2001
From: Konsttakis
Date: Thu, 4 Jan 2024 14:43:25 +0200
Subject: [PATCH 5/5] Centered images on Home Screen / Unfinished
---
characters.css | 149 ---------------
css/home-page.css | 87 +++++++--
home-page.css | 473 ----------------------------------------------
3 files changed, 66 insertions(+), 643 deletions(-)
delete mode 100644 characters.css
delete mode 100644 home-page.css
diff --git a/characters.css b/characters.css
deleted file mode 100644
index d7f45cb..0000000
--- a/characters.css
+++ /dev/null
@@ -1,149 +0,0 @@
-* {
- box-sizing: border-box;
-}
-
-/* Added this so the scrollbar doesn't appear, messing the width of icons */
-html {
- overflow-y: hidden;
-}
-
-
-body {
- margin: 0%;
- background-image: url('../image/background-for-game.png');
- background-repeat: no-repeat;
- background-size: cover;
- font-family: 'Pacifico', cursive;
-}
-
-h1 {
- margin-top: -12%;
- text-align: center;
- font-size: 100px;
- color: rgb(204, 137, 13);
- text-shadow: 7px 4px black;
-}
-
-.back {
- width: 5%;
- display: inline-block;
- float: right;
- opacity: 0.5;
-}
-
-.logo {
- margin-top: -4%;
- margin-left: 40%;
- margin-right: 40%;
- width: 20%;
-}
-
-.character_photos {
- display: flex;
- height: 80%;
- width: 95%;
- justify-content: space-evenly;
-}
-
-.hero {
- opacity: 0.5;
- margin-top: -2%;
-}
-
-header {
- margin-bottom: 4%;
-}
-
-.choose_your_hero {
- margin-top: 9%;
-}
-
-/* Changed the 3 hovers so when you hover over a characther
-the other characters don't change in size */
-#hero1:hover {
- transform: scale(1.2,1.2);
-}
-
-#hero2:hover {
- transform: scale(1.2,1.2);
-}
-
-#hero3:hover {
- transform: scale(1.2,1.2);
-}
-
-
-@media only screen and (max-width: 1485px) {
- .logo {
- margin-left: 35%;
- margin-right: 35%;
- width: 25%;
- }
-}
-
-@media only screen and (max-width: 1273px) {
- .logo {
- margin-left: 31%;
- margin-right: 31%;
- width: 25%;
- }
-}
-
-@media only screen and (max-width: 1085px) {
- .logo {
- margin-left: 29%;
- margin-right: 29%;
- width: 29%;
- }
-}
-
-@media only screen and (max-width: 900px) {
- .logo {
- margin-left: 30%;
- margin-right: 30%;
- width: 25%;
- }
-}
-
-@media only screen and (max-width: 600px) {
- .home {
- width: 10%;
- }
-
- .back {
- width: 10%;
- }
-
- h1 {
- margin-top: -30%;
- font-size: 80px;
- }
-
- .hero {
- width: 40%;
- margin-left: 32%;
- }
-
- #hero1:hover {
- width: 35%;
- opacity: 1;
- }
-
- #hero2:hover {
- width: 35%;
- opacity: 1;
- }
-
- #hero3:hover {
- width: 33%;
- opacity: 1;
- }
-
- .character_photos {
- flex-direction: column-reverse;
- }
-
- .logo {
- display: none;
- }
-}
diff --git a/css/home-page.css b/css/home-page.css
index 56ab11e..89bb1df 100644
--- a/css/home-page.css
+++ b/css/home-page.css
@@ -14,6 +14,7 @@ body {
background-size: cover;
text-align: center;
font-family: 'Pacifico', cursive;
+ /* top: 0%; */
}
form {
@@ -37,18 +38,45 @@ form {
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
-.icy-tower-wrap{
- position: absolute;
- bottom: 0;
- left: 0;
+/* .icy-tower-wrap{
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ text-align: center;
z-index: -1;
margin: auto;
- width: 100vw;
- align-items: center;
+ width: 200vw;
+ align-items: center;
+ } */
+
+/* .icy-tower-img{
+ /* width: 60vw;
+ margin: auto;
+ display: block;
+ width: auto;
+ max-height: 100vh;
+
+ } */
+
+ .icy-tower-wrap {
+ position: absolute;
+ left: 50%;
+ top: 50%; /* Vertically center the container */
+ transform: translate(-50%, -50%); /* Adjust for vertical centering */
+ z-index: -1;
+ width: 85vw; /* 80% of the viewport width */
+ height: 95vh; /* Fixed height, adjust as needed */
+ text-align: center;
+ overflow: hidden; /* Prevents the image from overflowing the container */
}
-.icy-tower-img{
- width: 60vw;
- margin-inline: 20vw;
+
+.icy-tower-img {
+ width: 100%; /* Allows the image to adjust its width while maintaining aspect ratio */
+ height: 100%; /* Ensures the image takes up the full height of the container */
+ object-fit: contain; /* Ensures the entire image is visible within the container without cropping */
+ display: block; /* To center with margin: auto; */
+ margin: auto;
}
@media screen and (max-width: 1200px) {
@@ -85,11 +113,30 @@ form {
/* Changed margin so logo is at the center */
.container {
- margin: 35%;
- margin-top: 0%;
- position: relative;
+ position: absolute;
+ left: 50%;
+ top: 80%; /* Set the container 80% from the top */
+ transform: translateX(-50%); /* Adjust for horizontal and vertical centering */
+ z-index: -1;
+ width: 80%; /* Set the container width to 80% */
+ text-align: center;
+ overflow: hidden; /* Prevents the image from overflowing the container */
}
+.container img {
+ width: 100%; /* Allows the image to adjust its width while maintaining aspect ratio */
+ height: auto; /* Ensures the image maintains its aspect ratio */
+ display: block; /* To center with margin: auto; */
+ margin: auto;
+
+ /* border-radius: 30px;
+ width: 450px;
+ height: 350px; */
+
+}
+
+
+
.form {
width: 27%;
background-color: white;
@@ -183,11 +230,7 @@ form {
}
}
-.container img {
- border-radius: 30px;
- width: 450px;
- height: 350px;
-}
+
@media screen and (max-width: 1150px) {
.container img {
@@ -390,7 +433,7 @@ form {
box-sizing: border-box;
}
-/* Changed margins so the logo is centered */
+/* Changed margins so the logo is centered made them auto */
.c-rainbow__layer {
--text-color: var(--color-foreground);
counter-increment: rainbow;
@@ -399,9 +442,11 @@ form {
text-shadow: -1px -1px 0 var(--color-black), 1px -1px 0 var(--color-black), -1px 1px 0 var(--color-black), 1px 1px 0 var(--color-black), 4px 4px 0 rgba(0, 0, 0, .2);
animation: rainbow 1.5s ease-in-out infinite;
font-size: 150px;
- /* margin: 15px; */
- margin-left: 400px;
- margin-top: 10px;
+ margin: 10px auto;
+ text-align: center;
+
+ /* margin-left: 400px;
+ margin-top: 10px; */
}
.c-rainbow__layer:nth-child(1) {
animation-delay: calc(1 / var(--delay) * 1s);
diff --git a/home-page.css b/home-page.css
deleted file mode 100644
index 56ab11e..0000000
--- a/home-page.css
+++ /dev/null
@@ -1,473 +0,0 @@
-* {
- box-sizing: border-box;
-}
-
-/* Added this so the scrollbar doesn't appear, messing the width of icons */
-html {
- overflow-y: hidden;
-}
-
-body {
- margin: 0%;
- background-image: url('../image/background-for-game.png');
- background-repeat: no-repeat;
- background-size: cover;
- text-align: center;
- font-family: 'Pacifico', cursive;
-}
-
-form {
- text-align: center;
-}
-
-.main-heading {
- text-align: center;
- font-size: 8.5em;
- margin-top: 0%;
- margin-right: 20%;
- background-image: linear-gradient(
- magenta,
- magenta,
- #31a2ff,
- rgb(138, 12, 65)
- );
- background-size: 100%;
- -webkit-background-clip: text;
- -moz-background-clip: text;
- -webkit-text-fill-color: transparent;
- -moz-text-fill-color: transparent;
-}
-.icy-tower-wrap{
- position: absolute;
- bottom: 0;
- left: 0;
- z-index: -1;
- margin: auto;
- width: 100vw;
- align-items: center;
-}
-.icy-tower-img{
- width: 60vw;
- margin-inline: 20vw;
-}
-
-@media screen and (max-width: 1200px) {
- .main-heading {
- font-size: 6em;
- }
-}
-
-@media screen and (max-width: 1000px) {
- .main-heading {
- margin-right: auto;
- }
-}
-
-@media screen and (max-width: 700px) {
- .main-heading {
- font-size: 4em;
- }
-}
-
-.hide {
- display: none;
-}
-
-#login {
- float: right;
- margin-right: 4%;
- margin-top: 2%;
-}
-
-#sign-in {
- margin-bottom: 2%;
-}
-
-/* Changed margin so logo is at the center */
-.container {
- margin: 35%;
- margin-top: 0%;
- position: relative;
-}
-
-.form {
- width: 27%;
- background-color: white;
- color: black;
- border: 3px solid #31a2ff;
- margin-top: -7%;
- margin-left: 37%;
- z-index: 99;
- align-self: center;
- z-index: 99;
- position: fixed;
-}
-
-@media screen and (max-width: 1200px) {
- .form {
- width: 47%;
- margin-left: 25%;
- }
-}
-
-@media screen and (max-width: 600px) {
- .form {
- width: 96%;
- margin-left: 2%;
- }
-}
-
-.form input {
- width: 96%;
- padding: 3%;
- margin: 0.5% 1% 0px 1%;
- border: none;
- background: #bfb8b8;
-}
-
-.form label {
- font-size: 1.5em;
-}
-
-.submit {
- width: 96%;
- border: none;
- margin: 0.5% 1% 0px 1%;
- padding: 3.5%;
- background: linear-gradient(magenta, #31a2ff, rgb(138, 12, 65));
- color: white;
- font-size: 1.8em;
-}
-
-.form input :focus {
- background-color: #625b5b;
- outline: none;
-}
-
-.form h2 {
- font-size: 1.6em;
-}
-
-.row {
- display: flex;
- flex-wrap: wrap;
- padding: 0 4px;
-}
-
-.message {
- color: red;
-}
-
-.error-img {
- width: 16px;
- height: 16px;
-}
-
-#error-massage {
- float: left;
- color: red;
- text-align: left;
- margin: 0;
-}
-
-.image {
- flex: 50%;
- max-width: 50%;
- padding: 0 4px;
-}
-
-@media screen and (max-width: 700px) {
- .image {
- flex: 100%;
- max-width: 100%;
- }
-}
-
-.container img {
- border-radius: 30px;
- width: 450px;
- height: 350px;
-}
-
-@media screen and (max-width: 1150px) {
- .container img {
- width: 350px;
- }
-}
-
-@media screen and (max-width: 900px) {
- .container img {
- width: 280px;
- height: 250px;
- }
-}
-
-@media screen and (max-width: 700px) {
- .container img {
- width: 450px;
- height: 350px;
- }
-}
-
-#open-form {
- margin-top: 2%;
- margin-left: 2%;
- float: left;
- min-width: 100px;
- height: 50px;
- border-radius: 30px;
- border: 1px solid #ccc;
- color: #315bff;
- outline: none;
- font-size: 20px;
- background: white;
- font-family: 'Pacifico', cursive;
-}
-#open-form:hover{
- transform: scale(1.1);
-}
-
-#hello-user {
- margin-top: 2%;
- margin-left: 2%;
- float: left;
- min-width: 100px;
- height: 82px;
- border-radius: 10px;
- border: 1px solid #ccc;
- color: #315bff;
- outline: none;
- font-size: 20px;
- background: white;
-}
-
-.change-form {
- color: #315bff;
- border: 1px solid #ccc;
- border-radius: 30px;
- height: 29px;
- font-family: 'Pacifico', cursive;
- font-size: 1.1em;
-}
-
-.btn-close {
- border: none;
- position: absolute;
- top: 14px;
- left: 14px;
- display: block;
- width: 28px;
- height: 28px;
- background: url(../image/close-window.png) no-repeat;
- font-family: 'Pacifico', cursive;
-}
-#close-modal {
- color: #aaa;
- float: right;
- font-size: 28px;
- font-weight: bold;
-}
-#you-must-login {
- display: none;
- font-size: 1.7em;
- background-image: url('../image/background-for-game.png');
- position: fixed;
- width: 25%;
- margin-top: 15%;
- z-index: 99;
- padding: 20px;
- border: 1px solid #888;
- border-radius: 40px;
- margin-right: 42.5%;
- margin-left: 42.5%;
-}
-
-.rainbow-text{
- z-index: 50;
- position: relative;
- color: #000;
- background: #fff;
- mix-blend-mode: multiply;
- overflow: hidden;
- font-size: 8.5em;
- /* text-shadow: 0 2px 4px rgba(0,0,0,0.5); */
- padding: 2px 4px 6px;
- margin: -2px -4px -6px;
- font-weight: bold; /* Added to make the text bold */
- opacity: 8000000; /* Adjust the opacity value as needed */
-}
-.rainbow-text::before{
- content: "";
- position: absolute;
- top:0;right:0;bottom:0;left:-100%;
- background: white repeating-linear-gradient(90deg, #14ffe9 0%, #ffc800 16.66666%, #ff00e0 33.33333%, #14ffe9 50.0%);
- mix-blend-mode: screen;
- pointer-events: none;
- animation: move 1s linear infinite;
-}
-
-@keyframes move{
- 0%{transform: translateX(0);}
- 100%{transform: translateX(50%);}
-}
-
-@supports not (mix-blend-mode: multiply) {
- .rainbow-text{
- -webkit-text-fill-color: transparent;
- background-clip: text !important;
- background: white repeating-linear-gradient(90deg, #14ffe9, #ffc800, #ff00e0, #14ffe9);
- text-shadow: none;
- }
- .rainbow-text::before{ content: none; }
-}
-
-.icy-img:hover{
-
- animation: shake 0.5s infinite;
- animation-timing-function: ease-in-out;
-}
-
-
-@keyframes shake {
- 0% {
- transform: translate(1px, 1px) rotate(0deg);
- }
- 10% {
- transform: translate(2px, -2px) rotate(-1deg);
- }
- 20% {
- transform: translate(3px, 0px) rotate(1deg);
- }
- 30% {
- transform: translate(-4px, 2px) rotate(0deg);
- }
- 40% {
- transform: translate(5px, -1px) rotate(1deg);
- }
- 50% {
- transform: translate(6px, 2px) rotate(-1deg);
- }
- 60% {
- transform: translate(-3px, 1px) rotate(0deg);
- }
- 70% {
- transform: translate(3px, 1px) rotate(-1deg);
- }
- 80% {
- transform: translate(-1px, -1px) rotate(1deg);
- }
- 90% {
- transform: translate(1px, 2px) rotate(0deg);
- }
- 100% {
- transform: translate(1px, -2px) rotate(0deg);
- }
-}
-:root {
- --color-background: #31037d;
- --axis-x: 1px;
- --axis-y: 1rem;
- --delay: 10;
- --color-black: #000;
- --color-white: #fff;
- --color-orange: #d49c3d;
- --color-red: #d14b3d;
- --color-violet: #cf52eb;
- --color-blue: #44a3f7;
- --color-green: #5acb3c;
- --color-yellow: #debf40;
- --color-foreground: var(--color-white);
- --font-name: Righteous;
-}
-.c-rainbow {
- counter-reset: rainbow;
- position: relative;
- display: flex;
- list-style: none;
- padding: 0;
- margin: 0;
- z-index: 5;
- box-sizing: border-box;
-}
-
-/* Changed margins so the logo is centered */
-.c-rainbow__layer {
- --text-color: var(--color-foreground);
- counter-increment: rainbow;
- font-size: 3rem;
- color: var(--text-color);
- text-shadow: -1px -1px 0 var(--color-black), 1px -1px 0 var(--color-black), -1px 1px 0 var(--color-black), 1px 1px 0 var(--color-black), 4px 4px 0 rgba(0, 0, 0, .2);
- animation: rainbow 1.5s ease-in-out infinite;
- font-size: 150px;
- /* margin: 15px; */
- margin-left: 400px;
- margin-top: 10px;
-}
-.c-rainbow__layer:nth-child(1) {
- animation-delay: calc(1 / var(--delay) * 1s);
- left: calc(var(--axis-x) * 1);
- z-index: -10;
-}
-.c-rainbow__layer:nth-child(2) {
- animation-delay: calc(2 / var(--delay) * 1s);
- left: calc(var(--axis-x) * 2);
- z-index: -20;
-}
-.c-rainbow__layer:nth-child(3) {
- animation-delay: calc(3 / var(--delay) * 1s);
- left: calc(var(--axis-x) * 3);
- z-index: -30;
-}
-.c-rainbow__layer:nth-child(4) {
- animation-delay: calc(4 / var(--delay) * 1s);
- left: calc(var(--axis-x) * 4);
- z-index: -40;
-}
-.c-rainbow__layer:nth-child(5) {
- animation-delay: calc(5 / var(--delay) * 1s);
- left: calc(var(--axis-x) * 5);
- z-index: -50;
-}
-.c-rainbow__layer:nth-child(6) {
- animation-delay: calc(6 / var(--delay) * 1s);
- left: calc(var(--axis-x) * 6);
- z-index: -60;
-}
-.c-rainbow__layer:nth-child(7) {
- animation-delay: calc(7 / var(--delay) * 1s);
- left: calc(var(--axis-x) * 7);
- z-index: -70;
-}
-.c-rainbow__layer:not(:first-child) {
- position: absolute;
- top: 0;
-}
-.c-rainbow__layer--white {
- --text-color: var(--color-white);
-}
-.c-rainbow__layer--orange {
- --text-color: var(--color-orange);
-}
-.c-rainbow__layer--red {
- --text-color: var(--color-red);
-}
-.c-rainbow__layer--violet {
- --text-color: var(--color-violet);
-}
-.c-rainbow__layer--blue {
- --text-color: var(--color-blue);
-}
-.c-rainbow__layer--green {
- --text-color: var(--color-green);
-}
-.c-rainbow__layer--yellow {
- --text-color: var(--color-yellow);
-}
-@keyframes rainbow {
- 0%, 100% {
- transform: translatey(var(--axis-y));
- }
- 50% {
- transform: translatey(calc(var(--axis-y) * -1));
- }
-}