@charset "UTF-8"; /* ========================================= NEON ALFRED MOBILE ========================================= */ /* Gotham loads via Adobe Fonts — see the embed in index.html's . No local font files needed. */ * { box-sizing: border-box; } html { background-color: #000000; } body { margin: 0; width: 100%; background-color: #000000; color: #CFCFCF; } /* ========================================= HEADER ========================================= */ .header { width: 100%; background-color: #000000; text-align: center; } .logo { width: 100%; padding: 1em 0; border-bottom: thin solid #262626; color: #CFCFCF; font-family: "Gotham", Helvetica, Arial, sans-serif; font-size: 1em; font-weight: bold; letter-spacing: 0.4em; } .logo p { margin: 0.4em 0 0 0; color: #CFCFCF; font-family: "Gotham", Helvetica, Arial, sans-serif; font-size: 0.6em; font-style: italic; letter-spacing: 0.45em; } .logo a:link, .logo a:visited { color: #CFCFCF; text-decoration: none; } .logo a:hover { color: #727272; } /* ========================================= TOP NAVIGATION ========================================= */ .navTop { display: flex; justify-content: center; gap: 1.2em; width: 100%; margin-top: 0.7em; margin-bottom: 1em; } .navTop a { color: #CFCFCF; font-family: "Playfair Display", serif; font-size: 1.1em; font-style: italic; font-weight: 400; letter-spacing: 0.25em; text-decoration: none; transition: color 0.4s linear; } .navTop a:visited { color: #8D8D8D; } .navTop a:hover, .navTop a:active { color: #DF8605; } /* ========================================= PORTFOLIO GRID ========================================= */ .boxContainert { width: 100%; margin: 2em 0 0 0; padding: 0 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background-color: #000000; } /* Tagline */ .tagline { grid-column: 1 / -1; width: 100%; margin: 0 0 1.5em 0; color: #CFCFCF; font-family: "Gotham", Helvetica, Arial, sans-serif; font-size: 1em; font-weight: 300; text-align: center; } /* Portfolio tile */ .box10left10 { width: 100%; aspect-ratio: 1 / 1; transition: transform 0.5s linear; } /* Portfolio image */ .box10left10 img { display: block; width: 100%; height: 100%; object-fit: contain; } /* Hover */ .box10left10:hover { transform: scale(0.96); } /* ========================================= FOOTER ========================================= */ .navBottom { width: 100%; margin-top: 2em; padding-top: 1em; padding-bottom: 3em; border-top: thin solid #262626; text-align: center; } .navBottom nav { display: flex; justify-content: center; gap: 1.5em; } .navBottom nav a { color: #625A4E; font-family: "Playfair Display", serif; font-size: 1em; font-style: italic; font-weight: 400; letter-spacing: 0.2em; text-decoration: none; } .navBottom nav a:visited { color: #606060; } .navBottom nav a:hover, .navBottom nav a:active { color: #DF8605; } .navBottom h1 { margin: 2em 0; color: #CFCFCF; font-family: "Playfair Display", serif; font-size: 0.9em; font-style: italic; font-weight: 400; letter-spacing: 0.2em; }