Sample Title
John Krasinski
diff --git a/style.css b/style.css
index 8a4b0f1..185ef0c 100644
--- a/style.css
+++ b/style.css
@@ -5,10 +5,7 @@
body {
margin: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- min-height: 100vh;
+ min-height: 100vh !important;
}
.body {
@@ -17,16 +14,70 @@ body {
backdrop-filter: blur(120px);
}
-.container {
- padding: 32px;
- border-radius: 8px;
- border: 1px solid rgba(0,0,0,0.2);
- box-shadow: 0 0 8px rgba(0,0,0,0.6);
- background-color: rgba(0,0,0,0.5);
- color: white;
- text-align: center;
+@media screen and (max-width: 640px) {
+ body {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .container {
+ width: 90vw;
+ padding: 32px;
+ border: 1px solid rgba(0,0,0,0.2);
+ box-shadow: 0 0 8px rgba(0,0,0,0.6);
+ background-color: rgba(0,0,0,0.5);
+ color: white;
+ text-align: center;
+ }
+
+ img {
+ width: 90%;
+ }
+
+ .list {
+ background-color: rgba(255, 255, 255, 0.2);
+ box-shadow: 0 0 4px rgba(0,0,0,0.6);
+ border-radius: 0 0 8px 8px;
+ padding: 16px;
+ color: white;
+ width: 90vw;
+ }
}
+@media screen and (min-width: 640px) {
+ body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ img {
+ height: 400px;
+ }
+
+ .container {
+ padding: 32px;
+ border-radius: 8px;
+ border: 1px solid rgba(0,0,0,0.2);
+ box-shadow: 0 0 8px rgba(0,0,0,0.6);
+ background-color: rgba(0,0,0,0.5);
+ color: white;
+ text-align: center;
+ }
+
+ .list {
+ background-color: rgba(255, 255, 255, 0.2);
+ box-shadow: 0 0 4px rgba(0,0,0,0.6);
+ border-radius: 0 8px 8px 0;
+ padding: 16px;
+ color: white;
+ width: 25%;
+ }
+}
+
+
.status {
display: grid;
grid-template-columns: 1fr 5fr 1fr;
@@ -50,15 +101,6 @@ body {
color: green;
}
-.list {
- background-color: rgba(255, 255, 255, 0.2);
- box-shadow: 0 0 4px rgba(0,0,0,0.6);
- border-radius: 0 8px 8px 0;
- padding: 16px;
- color: white;
- width: 25%;
-}
-
.list ul {
padding: 0;
}
+