Update 'backplaces/style.css'

backplaces/style.css

@@ -1,6 +1,7 @@
-:root{
+:root {
     --spot-color-1: #1E33FAff;
 }
+
 @font-face {
     font-family: 'Platypi';
     src: url('fonts/Platypi[wght].woff2');
@@ -25,10 +26,12 @@ a {
     color: var(--spot-color-1);
     text-decoration: none;
 }
-#about-student p{
+
+#about-student p {
     margin: 0;
 }
-blockquote{
+
+blockquote {
     background: linear-gradient(to top left, white, rgba(255, 153, 150, 0), #c048ff), linear-gradient(to top right, #8edf00, rgba(255, 153, 150, 0), #f13d2b) hsl(36deg 100% 50%);
     background-size: 150% 150%;
     -webkit-background-clip: text;
@@ -40,20 +43,23 @@ blockquote{
 }
 
 @-webkit-keyframes gradientanimator {
-    0%{background-position:0% 70%}
+    0% { background-position: 0% 70%; }
-    50%{background-position:100% 31%}
+    50% { background-position: 100% 31%; }
-    100%{background-position:0% 70%}
+    100% { background-position: 0% 70%; }
 }
+
 @-moz-keyframes gradientanimator {
-    0%{background-position:0% 70%}
+    0% { background-position: 0% 70%; }
-    50%{background-position:100% 31%}
+    50% { background-position: 100% 31%; }
-    100%{background-position:0% 70%}
+    100% { background-position: 0% 70%; }
 }
+
 @keyframes gradientanimator {
-    0%{background-position:0% 70%}
+    0% { background-position: 0% 70%; }
-    50%{background-position:100% 31%}
+    50% { background-position: 100% 31%; }
-    100%{background-position:0% 70%}
+    100% { background-position: 0% 70%; }
 }
+
 body {
     background-color: #fffdfb;
     font-family: 'Platypi', serif;
@@ -65,60 +71,77 @@ body {
     box-sizing: border-box;
 }
 
-#links {
+.navlinks {
     position: relative;
     font-family: 'Platypi';
     font-style: normal;
     font-weight: 300;
-    padding: 0.5rem;
+    text-decoration: none;
+    padding: 0 0 0.5rem;
+    line-height: 160%;
 }
 
-
+.navlinks a:hover {
-#links:hover{
     animation: wiggle 0.6s infinite;
 }
 
+@keyframes wiggle {
+    0%, 100% {
+        transform: scale(1);
+    }
+    25% {
+        transform: scale(0.8, 1.3);
+    }
+    50% {
+        transform: scale(1.1, 0.8);
+    }
+    75% {
+        transform: scale(0.7, 1.2);
+    }
+}
+
 .content-list {
     font-size: 41px;
     max-width: 40rem;
     margin: auto;
     margin-right: 0;
     line-height: 3.5rem;
+}
 
-    a {
+.content-list a {
     color: inherit;
-        }
+}
 
-    img {
+.content-list img {
     width: 2rem;
     height: auto;
     vertical-align: middle;
     filter: saturate(2);
-    }
+}
 
-    a:hover img, img:hover {
+.content-list a:hover img, .content-list img:hover {
     animation: wiggle 0.6s infinite;
     cursor: pointer;
-    }
 }
 
 #licensing-information {
     font-size: 0.5rem;
 }
+
 .container {
     margin: 50px 0;
     line-height: 3.5rem;
+}
 
-    h1 {
+.container h1 {
     font-style: normal;
-        }
+}
 
-    h2 {
+.container h2 {
     font-size: 20px;
     max-width: 30%;
     margin: 0;
     margin-bottom: -0.5rem;
-    }
 }
 
 #content {
@@ -127,86 +150,92 @@ body {
     margin-right: 0;
 }
 
-header{
+header {
-	line-height:1.3;
+    line-height: 1.3;
 }
 
 h1, #project-title {
     font-family: 'Platypi';
     font-size: 1.6rem;
 }
-iframe{
+
+iframe {
     width: 100%;
     height: 20rem;
     border-radius: 0.5rem;
     overflow-x: hidden;
     border: none;
 }
-img{
+
+img {
     max-width: 100%;
     padding: 0;
     border-radius: 0.5rem;
 }
-figcaption{
+
+figcaption {
     font-size: 1rem;
     padding: 1rem 0 0;
 }
-figure{
+
+figure {
     width: 100%;
     margin: 0 0 2rem;
     padding: 0;
 }
-hr{
+
+hr {
     border: none;
     margin: 4rem;
 }
 
-#galleries{
+#galleries {
     width: 74%;
 }
-nav{
+
+nav {
     position: fixed;
-    a{color: inherit;}
-    h1{font-style: normal;}
 }
 
-#script{
+nav a {
+    color: inherit;
+}
 
+nav h1 {
+    font-style: normal;
+}
+
+#script {
     max-width: 40rem;
     margin: auto;
     margin-right: 0;
-    p{
+}
+
+#script p {
     margin-left: 12rem;
-    }
+}
-    p:first-of-type{
+
+#script p:first-of-type {
     margin-left: 0;
-    }
+}
-    h2, h3 {
+
+#script h2, #script h3 {
     text-decoration: underline;
     text-align: center;
-    }
+}
-    strong {
+
+#script strong {
     position: absolute;
     margin-left: -12rem;
     width: 11rem;
-    }
 }
-::selection{
+
+::selection {
     background: var(--spot-color-1);
     color: #fff;
 }
-@keyframes wiggle {
+
-    25% {
+@media only screen and (max-width: 768px) {
-        transform: scale(0.8, 1.3);
-    }
-    50% {
-        transform: scale(1.1, 0.8);
-    }
-    75% {
-        transform: scale(0.7, 1.2);
-    }
-}
-@media only screen and (max-width: 768px){
     body {
         line-height: 1.3;
         padding: 2rem;
@@ -215,31 +244,41 @@ nav{
     .container {
         line-height: 2rem;
         margin: 70px 0;
+    }
 
-        h1 {
+    .container h1 {
         font-size: 30px;
         font-style: normal;
     }
 
-        h2 {
+    .container h2 {
         font-size: 20px;
         margin-bottom: -0.25rem;
     }
-    }
 
     .content-list {
         font-size: 22px;
         line-height: 2rem;
-        img{
-            margin: -50px 0;
-            overflow-y:visible;
     }
+
+    .content-list img {
+        margin: -50px 0;
+        overflow-y: visible;
     }
 
-    nav{
+    nav {
         position: static;
-        h1{font-size: 1.8rem;}
+    }
-        .gummies{margin: 0;}
+
-        .gummy{width: 2.5rem;}
+    nav h1 {
+        font-size: 1.8rem;
+    }
+
+    .gummies {
+        margin: 0;
+    }
+
+    .gummy {
+        width: 2.5rem;
     }
 }