From 660088fb7471b3145b21b317245e1d724f74cccc Mon Sep 17 00:00:00 2001
From: Little Dipper <little_dipper@rayman.rayman.virtualbox.org>
Date: Wed, 21 Jun 2023 02:49:02 +0200
Subject: [PATCH] button

---
 containers/react/src/styles/field.css | 38 +++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/containers/react/src/styles/field.css b/containers/react/src/styles/field.css
index 27f45d32..07beeba9 100644
--- a/containers/react/src/styles/field.css
+++ b/containers/react/src/styles/field.css
@@ -1,16 +1,21 @@
 .playButton {
-	background-image: linear-gradient(90deg, #5843e4, #5a0760);;
+	background-image: linear-gradient(90deg, #5843e4, #5a0760);
+	display: flex;
+	flex-wrap: wrap;
+	overflow: hidden;
 	border-radius: 5vh;
 	color: white;
-	display: block;
+	/* display: block; */
 	margin: auto;
 	margin-top: 30vh;
-	padding: 2vh 5vw;
+	padding: 2vh 4vw;
 	height: 10vh;
 	width: 20vw;
-	font-size: 300%;
+	font-size: 250%;
+	text-align: center;
   }
 
+  
   .field {
 	background-color: rgb(249, 249, 249);
 	/* border-radius: 5vh; */
@@ -22,7 +27,7 @@
 	height: 80%;
 	width: 80%;
 	/* font-size: 300%; */
-  }
+}
 
 .clicked{
 	/* justify-content: center; */
@@ -40,6 +45,29 @@
 	/* padding-top: 25; */
 	/* padding-top: 177.77% */
 }
+@media screen and (max-width: 900px){
+  .playButton{
+	  font-size: 200%;
+  }
+}
+
+@media screen and (max-width: 700px){
+  .playButton{
+	  font-size: 150%;
+  }
+}
+
+@media screen and (max-width: 530px){
+  .playButton{
+	  font-size: 100%;
+  }
+}
+
+@media screen and (max-width: 350px){
+  .playButton{
+	  font-size: 50%;
+  }
+}
 
 #myCanvas {
 	background-color: rgb(124, 47, 47);