diff --git a/style.css b/style.css
index a43724a..62151a5 100644
--- a/style.css
+++ b/style.css
@@ -16,6 +16,7 @@ body, html {
position: relative;
width: 80vw;
height: 80vh;
+ overflow: hidden;
font-size: 1rem;
@@ -131,16 +132,35 @@ ul, li {
align-items: center;
}
-.bg-red {
- background-color: rgba(255, 200, 200);
+.bg {
+ &::before {
+ content: '';
+ display: block;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ border-radius: 50%;
+ }
}
-.bg-green {
- background-color: rgba(200, 255, 200);
+.bg--red {
+ &::before {
+ background-color: rgba(255, 200, 200);
+ }
}
-.bg-blue {
- background-color: rgba(200, 200, 255);
+.bg--green {
+ &::before {
+ background-color: rgba(200, 255, 200);
+ }
+}
+
+.bg--blue {
+ &::before {
+ background-color: rgba(200, 200, 255);
+ }
}
.clockwise {
@@ -151,6 +171,12 @@ ul, li {
animation: rotate 20s reverse linear infinite;
}
+.pulse {
+ &::before {
+ animation: pulse 2s alternate ease-in-out infinite;
+ }
+}
+
@keyframes rotate {
from {
transform: rotate(0);
@@ -159,3 +185,12 @@ ul, li {
transform: rotate(360deg);
}
}
+
+@keyframes pulse {
+ from {
+ transform: scale(1);
+ }
+ to {
+ transform: scale(1.2);
+ }
+}