diff --git a/index.html b/index.html
index 219ba1f..0d51723 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
Amalthea
-
+
@@ -13,18 +13,12 @@
mc.amalthea.one
Java + Bedrock
-
+
diff --git a/style.css b/style.css
index 53cce65..08296a4 100644
--- a/style.css
+++ b/style.css
@@ -1,70 +1,95 @@
-@font-face {
- font-family: "PRegular";
- src: url("8bitOperatorPlus8-Regular.ttf");
-}
-@font-face {
- font-family: "PBold";
- src: url("8bitOperatorPlus8-Bold.ttf"); /* see /license.txt */
-}
-::selection {
- background-color: beige;
- color: black;
-}
-body {
- padding: 0px;
- margin: 0px;
- display: table;
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- background-color: black;
- color: beige;
- text-shadow: 1px 1px black;
- font-family: PRegular;
-}
-td {
- padding: 10px;
-}
-a {
- color: beige;
-}
-a:hover {
- background-color: beige;
- color: midnightblue;
-}
-a:focus-visible {
- background-color: beige;
- color: midnightblue;
- outline: none;
-}
-.card {
- display: table-cell;
- vertical-align: middle;
-}
-.content {
- padding: 20px 50px;
- margin-left: auto;
- margin-right: auto;
- width: 400px;
- background-color: midnightblue;
- border: 5px solid beige;
-}
-.address {
- text-align: center;
- margin: 0px;
- text-shadow: 3px 3px black;
- font-family: PBold;
-}
-.address-desc {
- text-align: center;
- text-shadow: 2px 2px black;
- font-size: 24px;
-}
-.links {
- width: 100%;
- margin: auto;
- margin-top: 10px;
- font-size: 24px;
-}
+@font-face {
+ font-family: "PRegular";
+ src: url("8bitOperatorPlus8-Regular.ttf");
+}
+@font-face {
+ font-family: "PBold";
+ src: url("8bitOperatorPlus8-Bold.ttf"); /* see /license.txt */
+}
+::selection {
+ background-color: beige;
+ color: black;
+}
+
+body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ left: 0;
+ top: 0;
+ height: 100%;
+ width: 100%;
+ position: fixed;
+ background-color: black;
+ color: beige;
+ text-shadow: 1px 1px black;
+ font-family: PRegular;
+}
+
+@media only screen and (max-width: 768px) {
+ .content {
+ width: 100vw;
+
+ }
+
+ .address {
+ font-size: 160%;
+
+ }
+
+ .address-desc {
+ font-size: 140%;
+ }
+
+ .links {
+ margin-top: 10px;
+ font-size: 140%;
+ }
+}
+
+a {
+ color: beige;
+}
+a:hover {
+ background-color: beige;
+ color: midnightblue;
+}
+a:focus-visible {
+ background-color: beige;
+ color: midnightblue;
+ outline: none;
+}
+
+.content {
+ padding: 20px 50px;
+ margin-left: auto;
+ margin-right: auto;
+ width: 400px;
+ background-color: midnightblue;
+ border: 5px solid beige;
+}
+.address {
+ text-align: center;
+ margin: 0px;
+ text-shadow: 3px 3px black;
+ font-family: PBold;
+}
+.address-desc {
+ text-align: center;
+ text-shadow: 2px 2px black;
+ font-size: 24px;
+}
+.links {
+ width: 100%;
+ margin: auto;
+ display: flex;
+ flex-wrap: wrap;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ font-size: 24px;
+ justify-content: space-between;
+}
+
+.links > a {
+ margin: 10px;
+}