added style.css

what-do-graphic-designers-do-all-day/style.css

@@ -0,0 +1,242 @@
+:root{
+    --spot-color-1: #009;
+}
+@font-face {
+    font-family: 'Platypi';
+    src: url('../fonts/Platypi[wght].woff2');
+    font-weight: 300 800;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Platypi';
+    src: url('../fonts/Platypi-Italic[wght].woff2');
+    font-weight: 300 800;
+    font-style: italic;
+}
+a {
+    color: var(--spot-color-1);
+    text-decoration: none;
+}
+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;
+    -webkit-text-fill-color: transparent;    
+
+    -webkit-animation: gradientanimator 30s ease infinite;
+    -moz-animation: gradientanimator 30s ease infinite;
+    animation: gradientanimator 30s ease infinite;
+}
+
+@-webkit-keyframes gradientanimator {
+    0%{background-position:0% 70%}
+    50%{background-position:100% 31%}
+    100%{background-position:0% 70%}
+}
+@-moz-keyframes gradientanimator {
+    0%{background-position:0% 70%}
+    50%{background-position:100% 31%}
+    100%{background-position:0% 70%}
+}
+@keyframes gradientanimator {
+    0%{background-position:0% 70%}
+    50%{background-position:100% 31%}
+    100%{background-position:0% 70%}
+}
+body {
+    background-color: #fffdfb;
+    font-family: 'Platypi', serif;
+    font-size: 1.3125rem;
+    font-synthesis: none;
+    line-height: 1.3;
+    margin: 0;
+    padding: 4rem;
+    box-sizing: border-box;
+}
+button{
+    border: 1px solid var(--spot-color-1);
+    font-family: 'Platypi';
+    font-style: italic;
+    font-weight: 300;
+    background:none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    margin-right: 0.5rem;
+}
+button:hover{
+    animation: wiggle 0.6s infinite;
+}
+.content-list {
+    font-size: 41px;
+    max-width: 40rem;
+    margin: auto;
+    margin-right: 0;
+    line-height: 3.5rem;
+
+    a{color: inherit}
+
+    img {
+        width: 2rem;
+        height: auto;
+        vertical-align: middle; 
+        filter: saturate(2);
+    }
+
+    a:hover img, img:hover {
+        animation: wiggle 0.6s infinite;
+        cursor: pointer;
+    }
+}
+
+.container {
+    margin: 50px 0; 
+    line-height: 3.5rem;
+    h1 {font-style: normal}
+
+    h2 {
+        font-size: 40px;
+        max-width: 30%;
+        margin: 0;
+        margin-bottom: -0.5rem;
+    }
+}
+
+#content {
+    max-width: 40rem;
+    margin: auto;
+    margin-right: 0;
+}
+
+.desaturate{
+    filter: grayscale(90%) contrast(1.2) brightness(1.1);
+}
+.gummies{
+    display: flex;
+    margin: 2rem 0;
+}
+.gummy .caption{
+    opacity: 0;
+    transition: opacity 0.5s ease;
+}
+.gummy:hover .caption{
+    opacity: 1
+}
+.gummy img{
+    width: 4rem;
+    filter: saturate(2);
+}
+.gummy img:hover{
+    scale: 1;
+    animation: wiggle 0.6s infinite;
+    cursor: pointer;
+}
+h1 {
+    font-weight: 700;
+    font-size: 50px;
+    font-style: italic;
+    margin: 0 0 0.5rem;
+}
+iframe{
+    width: 100%;
+    height: 20rem;
+    border-radius: 0.5rem;
+    filter: grayscale(70%);
+    overflow-x: hidden;
+    border: none;
+}
+img{
+    max-width: 100%;
+    border-radius: 0.5rem;
+}
+figcaption{
+    font-size: 0.85rem;
+    margin: 0.5rem 0 0 0.5rem;
+}
+figure{
+    width: 100%;
+    margin: 0 0 2rem;
+}
+hr{
+    border: none;
+    margin: 4rem;
+}
+nav{
+    position: fixed;
+    a{color: inherit;}
+    h1{font-style: normal;}
+}
+
+#script{
+    
+    max-width: 40rem;
+    margin: auto;
+    margin-right: 0;
+    p{
+        margin-left: 12rem;
+    }
+    p:first-of-type{
+        margin-left: 0;
+    }
+    h2, h3 {
+        text-decoration: underline;
+        text-align: center;
+    }
+    strong {
+        position: absolute;
+        margin-left: -12rem;
+        width: 11rem; 
+    }
+}
+::selection{
+    background: var(--spot-color-1);
+    color: #fff;
+}
+@keyframes wiggle {
+    25% {
+        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;
+    }
+      
+    .container {
+        line-height: 2rem;
+        margin: 70px 0; /* Adjusted for mobile */
+
+        h1 {
+            font-size: 30px;  
+            font-style: normal;  
+        }
+        
+        h2 {
+            font-size: 20px;
+            margin-bottom: -0.25rem;
+        }
+    }
+      
+    .content-list {
+        font-size: 22px;
+        line-height: 2rem;
+        img{
+            margin: -50px 0;
+            overflow-y:visible;
+        }
+    }
+    
+    nav{
+        position: static;
+        h1{font-size: 1.8rem;}
+        .gummies{margin: 0;}
+        .gummy{width: 2.5rem;}
+    }
+}