body { background-color: white; color: black; margin: 0; text-align: center; font-family: inter-variable, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } A:link {text-decoration: none; color: black;} A:visited {text-decoration: none; color: black;} A:active {text-decoration: none; color: black;} A:hover {text-decoration: none; color: black;} a:focus {outline: 0;} h1 { font-size: 28px; font-weight: 700; line-height: 1.6; } p { font-size: 18px; font-weight: 400; line-height: 1.4; } .header { max-width: 418px; margin: auto; padding: 56px 32px 0px 32px;} .header img { width: 100%; height: auto: } .tabbar { font-size: 22px; font-weight: 500; margin-top: 48px; } .tabbar a:hover { background-color: rgba(120, 120, 128, 0.16); padding: 4px 0; border-radius: 100px; transition: 0.3s; } .tab { display: inline-block; padding: 4px 16px; border-radius: 100px; } .selected { background-color: black; color: white; } .avatar img { margin-top: 64px; width: 128px; border-radius: 512px; background-color: rgba(116, 116, 128, 0.08); } .info { max-width: 544px; margin: auto; padding: 0px 52px 0px 52px; text-align: left; } .info p { margin-top: 0; } .link-buttons { margin-top: 32px; max-width: 544px; } .link-button { padding: 0px 24px 0px 0px; } .newwork { color: white; background-color: #E600F1; background-color: color(display-p3 0.9 0 0.945 / 1); width: 240px; height: 28px; margin-left: auto; margin-right: auto; border-radius: 6px; } .card-margins { margin-left: 52px; margin-right: 52px; margin-bottom: 128px; } .card { text-align: left; margin: auto; margin-top: 80px; border-radius: 52px; overflow: hidden; max-width: 1336px; min-height: 300px; box-shadow: 0px 16px 52px rgba(0, 0, 0, 0.15); } .card img { width: 100%; height: auto: } .card h1 { padding: 24px 52px 0px 52px; } .card p { padding: 0px 52px 40px 52px; max-width: 600px; } .nodescription h1 { padding-bottom: 32px; } .worked-with { margin: 0 52px 0px 52px } .logos { margin-top: 52px; width: 80%; max-width: 669px; height: auto; } .copyright { margin-top: 80px; margin-bottom: 80px; } /* Tablet margins */ @media (min-width: 640px) and (max-width: 1366px){ .card { border-radius: 32px; } } /* Tablet margins */ @media (min-width: 640px) and (max-width: 834px){ .card-margins { margin-left: 32px; margin-right: 32px; margin-bottom: 96px; } .link-buttons { margin-top: 32px; margin-bottom: 0; } .card { margin-top: 52px; } .card h1 { padding: 4px 32px 0px 32px; } .card p { padding: 0px 32px 20px 32px; } .nodescription h1 { padding-bottom: 16px; } .worked-with { margin: 128px 16px 0px 16px; } .logos { margin-top: 32px; } .copyright { margin-top: 96px; margin-bottom: 96px; } } /* Phone adaptations */ @media (max-width: 640px) { .header { padding: 32px 32px 0px 32px; } p { font-size: 16px; } h1 { font-size: 20px; font-weight: 700; line-height: 1.4; } .tabbar { font-size: 3.7vw; font-weight: 500; margin-top: 24px; padding: 0px 16px; } .tab { display: inline-block; padding: 4px 2.2vw; } .avatar img { margin-top: 40px; width: 96px; border-radius: 512px; background-color: rgba(116, 116, 128, 0.08); } .info { padding: 0px 32px; margin-bottom: 48px; } .link-buttons { margin-top: 24px; margin-bottom: 0; } .card-margins { margin: 32px 16px 32px 16px; } .card { margin-top: 32px; border-radius: 24px; min-height: auto; box-shadow: 0px 16px 40px rgba(0, 0, 0, 0.15); } .card h1 { padding: 0px 16px 0px 16px; } .nodescription h1 { padding-bottom: 8px; } .card p { padding: 0px 16px 8px 16px; } .worked-with { margin: 64px 16px 0px 16px; font-size: 17px; } .copyright { margin-top: 64px; margin-bottom: 64px; } } /* Text and background color for dark mode */ @media (prefers-color-scheme: dark) { body { background-color: black; color: white; } A:link {text-decoration: none; color: #ffffff;} A:visited {text-decoration: none; color: #ffffff;} A:active {text-decoration: none; color: #ffffff;} A:hover {text-decoration: none; color: #ffffff;} a:focus {outline: 0;} .newwork { font-weight: 500; color: black; background-color: #FF2D55; background-color: color(display-p3 1 0.169 0.33 / 1); } .header, .logos { -webkit-filter: invert(1); filter: invert(1); } .selected { background-color: white; color: black; } .avatar img { background-color: rgba(116, 116, 128, 0.18); } .tabbar a:hover { background-color: rgba(120, 120, 128, 0.32); } .card { background-color: #1C1C1E; } }