Upload poke.css

poke.css

@@ -3,61 +3,12 @@ body {
     text-align: center;
     font-family: 'Piazzolla', serif;
     color: white;
-    font-size: 19px;
+    font-size: 20px;
 }
 
 h4 {
-    font-size: 14px;
+    font-size: 16px;
     margin: 0;
-    margin-bottom: 0.5%;
-}
-
-#btnMenu {
-    background-image: url("cog.png");
-    background-size: cover;
-    position:absolute;
-    top:0;
-    right:0;
-    margin-right:1%;
-    margin-top:1%;
-    width:40px;
-    height: 40px;
-    border: none;
-    background-color: transparent;
-}
-
-#menu-container {
-    border-style: solid;
-    border: 2px solid white;
-}
-
-#menu {
-    position:absolute;
-    top:0;
-    right:0;
-    margin:0;
-    margin-top:3em;
-}
-
-nav {
-    border-style: solid;
-    border: 2px solid white;
-    border-spacing: 5px;
-    font-size: 26px;
-    margin-right: 15px;
-    padding-right: 10px;
-    padding-left: 8px;
-}
-
-ul {
-    margin-top: -1%;
-    font-size: 20px;
-    padding: 0;
-}
-
-li {
-    list-style-type: none;
-    font-size: 18px;
 }
 
 label {
@@ -72,6 +23,12 @@ label {
     object-fit: cover;
 }
 
+.picpokShiny {
+    width:  288px;
+    height: 288px;
+    object-fit: cover;
+}
+
 .pictype {
     width: 89px;
     height: 39px;
@@ -99,26 +56,16 @@ h3 {
     font-weight: 0;
 }
 
-input {
-    background-color: rgb(20,20,20);
-    color:white;
-}
-
-a { 
-    color:white;
-    transition: transform .2s;
-}
-
-a:visited { 
-    text-decoration: none; 
-    color: white;
-}
-
 .stats {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
 }
 
+.shinies {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+}
+
 #FP1 {
     padding-bottom:4px;
 }
@@ -165,4 +112,77 @@ a:visited {
 .monweak img {
     width: 52px;
     height: 22px;
+}
+
+.green-text {
+    color: green;
+}
+
+.red-text {
+    color: red;
+}
+
+a:link {
+    color:rgb(30,130,230);
+    background-color: transparent;
+    text-decoration: underline;
+  }
+  
+  a:visited {
+    color:darkorchid;
+    background-color: transparent;
+  }
+  
+  a:active {
+    color:darkorchid;
+    background-color: transparent;
+    text-decoration: dashed;
+  }
+
+  input {
+    font-size: inherit;
+    font-family: inherit;
+  }
+
+/* MOBILE STYLE */
+@media only screen and (max-width: 425px) {
+    .calculator {
+        padding: 1rem;
+    }
+
+    .calculator>*+* {
+        margin-top: 0.5rem;
+    }
+
+    .calculator input {
+        box-sizing: border-box;
+        padding   : 0.5rem;
+        width     : 100%;
+    }
+
+    .inputs>* {
+        display: block;
+    }
+
+    .inputs>*+* {
+        margin-top: 0.5rem;
+    }
+
+    .buttons {
+        display  : flex;
+        flex-flow: row nowrap;
+        gap      : 0.5rem;
+    }
+
+    .buttons>* {
+        flex: 1 1 33%;
+    }
+
+    #stats {
+        font-size: 0.9rem;
+    }
+
+    #shinies {
+        grid-template-columns: 1fr;
+    }
 }