diff --git a/index.html b/index.html
index ca43846..8c9e2b8 100644
--- a/index.html
+++ b/index.html
@@ -25,7 +25,7 @@
diff --git a/style.css b/style.css
index b9507fb..49fff97 100644
--- a/style.css
+++ b/style.css
@@ -202,63 +202,40 @@ input[type=checkbox]:checked ~ #overlay-button span:after {
}
/* PHONE CSS */
-.iphone-x {
+.phone {
/* position: relative; */
- height: 80%;
+ height: 90%;
aspect-ratio: calc(360/780);
background-color: #7371ee;
background-image: linear-gradient(60deg, #7371ee 1%, #a1d9d6 100%);
- border-radius: 18px;
- box-shadow: 0px 0px 0px 1vh #1f1f1f, 0px 0px 0px 1vh #191919,
- 0px 0px 0px max(1.5vh, 15px) #111;
+ border-radius: .5em;
+ box-shadow: 0px 0px 0px .5vh #1f1f1f, 0px 0px 0px .5vh #191919,
+ 0px 0px 0px max(1vh, 5px) #111;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
-.iphone-x .before,
-.iphone-x:after {
+.phone i {
content: "";
position: absolute;
- z-index: 5;
-}
-.iphone-x:after {
- bottom: 1%;
- width: 30%;
- height: .5%;
- background-color: #f2f2f2;
- border-radius: 10px;
-}
-.iphone-x .before {
- top: 0px;
- width: 56%;
- height: 3%;
- background-color: #1f1f1f;
- border-radius: 0px 0px 40px 40px;
display: flex;
- justify-content: center;
+ justify-content: space-around;
+ align-items: center;
+ z-index: 5;
+ bottom: 0;
+ width: 100%;
+ height: 5%;
+ background-color: #191919;
}
-.iphone-x i,
-.iphone-x b,
-.iphone-x s,
-.iphone-x span {
+.phone b {
position: absolute;
display: block;
color: transparent;
z-index: 100;
}
-.iphone-x i {
- left: 50%;
- transform: translate(-50%, 6px);
- height: 10%;
- width: 30%;
- background-color: #101010;
- border-radius: 000px;
- box-shadow: inset 0px -3px 3px 0px rgba(255, 255, 255, 0.2);
-}
-.iphone-x b {
- top: 10%;
- right: 25%;
+.phone b {
+ top: 2%;
display: flex;
align-items: center;
justify-content: center;
@@ -268,7 +245,7 @@ input[type=checkbox]:checked ~ #overlay-button span:after {
border-radius: 999px;
box-shadow: inset 0px -3px 2px 0px rgba(255, 255, 255, 0.2);
}
-.iphone-x b:after {
+.phone b:after {
content: "";
position: absolute;
background-color: #2d4d76;
@@ -277,6 +254,4 @@ input[type=checkbox]:checked ~ #overlay-button span:after {
display: block;
border-radius: 999px;
box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.5);
-}
-
-
+}
\ No newline at end of file