diff --git a/index.html b/index.html
index d2bddb9..7d0e807 100644
--- a/index.html
+++ b/index.html
@@ -5,11 +5,15 @@
Picture in picture
-
- Hello, World!
+
+
+
+
+
+
diff --git a/style.css b/style.css
index 179b345..22e18bc 100644
--- a/style.css
+++ b/style.css
@@ -1,8 +1,49 @@
+@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
+
html {
box-sizing: border-box;
}
body {
margin: 0;
- min-height: 100vh;
-}
\ No newline at end of file
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: rgb(37, 37, 37);
+}
+
+
+.button-container{
+ border:2px solird black;
+ padding: 10px;
+ border-radius: 7px;
+ box-shadow: inset 0 20px 4px -19px rgba(255, 255, 255, 0.7);
+}
+
+button{
+ cursor: pointer;
+ outline: none;
+ width: 120px;
+ height: 75px;
+ font-family: 'Lobster', cursive;
+ font-size-adjust: 25px;
+ color: white;
+ text-shadow: 0 2px 5px black;
+ background: linear-gradient(to top, #696969,#575757);
+ border: 2px solid black;
+ border-radius: 7px;
+ box-shadow: inset 0 20px 4px -19px rgba(255, 255, 255, 0.4), 0 12px 12px 0 rgba(0,0,0,0.3);
+
+}
+
+button:hover{
+ background: linear-gradient(to bottom, #696969,#575757);
+
+}
+
+button:active{
+ transform:translateY(3px);
+ box-shadow: 0 6px 6px 0 rgba(0,0,0,0.3);
+
+}