portfolio.css

 * {box-sizing: border-box;}html, body {background: #f5f8ff;font-family: 'Montserrat', sans-serif;line-height: 1.3em;color: #333;}body {overflow-x: hidden;}section {display: flex;flex-direction: column;padding: 60px 0;}a {color: inherit;text-decoration: none;font-size: 14px;font-weight: 700;letter-spacing: 0.1em;text-transform: uppercase;display: inline-flex;align-items: center;}a:hover {opacity: 0.8;}a .material-icons {margin: 0 10px;}a, p, h4, .page, .material-icons{transition: 0.3s ease;}h3, p {line-height: 1.4em;margin-bottom: 10px;}h3 {font-size: 7vw;font-family: 'Playfair Display', serif;color: var(--heading-color);}p {font-size: 22px;}p a {font-weight: inherit;font-size: inherit;letter-spacing: inherit;text-transform: none;text-decoration: underline;}svg {fill: inherit;}.arrow-icon {width:24px;margin: 0 12px;}a.invert .arrow-icon {transform: rotate(180deg);}.page {padding-top: 120px;}.page-enter-active, .page-leave-active {transition-duration: 0.3s;transition-property: opacity;transition-timing-function: ease;}.page-enter, .page-leave-active {opacity: 0;}footer {position: relative;height: 100vh;margin-top: 10vw;display: flex;align-items: center;justify-content: center;}footer img {width: 45vw;border: 0;}footer a {flex-direction: column;}footer a div {font-size: 26px;line-height: 1;margin-top: 34px;}footer .next {transform: rotate(90deg);width: 50px;height: 50px;position: absolute;bottom: 50px;background: white;border-radius: 50%;display: flex;align-items: center;justify-content: center;}footer .arrow-icon {margin: 0;}.list h4 {margin-bottom: 10px;}.list p {margin-bottom: 0;}.project-content {position: fixed;top: 200px;left: 120px;z-index: 2;}.project-content a {margin-top: 30px;}.project-content a:hover .material-icons {transform: translateX(5px) }.project-content a .material-icons {color: #fe3448;}.project-images {padding: 12vw 0;position: relative;margin-left: calc(50% - 100px);}.image-wrapper {width: 150px;padding-bottom: 60px;transform:scale(0.9);transition: 0.6s ease all;filter: grayscale(90%) blur(0.5px);transform-origin: 50px 50px;transform-origin: right;cursor: pointer;}.image-wrapper.active {transform:scale(1);filter: grayscale(0%) blur(0);}.image-wrapper:last-child {}.image-wrapper img {width: 45vw;}@keyframes float {0% {box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);transform: translatey(0px);}50% {box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);transform: translatey(-20px);}100% {box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);transform: translatey(0px);}}.social-links svg {width: 30px;margin-right: 30px;}.intro-section article {display: flex;margin-top:60px;}.intro-section .content {width: 65%;margin-right: 80px;}.intro-section .content a {margin-top: 60px;}.text-section h1 {margin-bottom:60px;}.text-section h4 {min-width: 40%;}.text-section article {display: flex;margin-bottom:60px;}.text-section article:last-child, .text-section article:last-child p {margin-bottom: 0;}.image-section {flex-direction: row;flex-wrap: wrap;}.image-section .image {width: calc(50% - 30px);margin: 15px;}.image.browser {box-shadow: 0 0 0 1px rgba(0,0,0,.02), 0 1px 5px rgba(0,0,0,.05);border-radius: 5px;}.image.browser img {border-top-left-radius: 0;border-top-right-radius: 0;}.browser-header {background: #d6dbe4;height: 20px;border-top-left-radius: 4px;border-top-right-radius: 4px;box-shadow: 0 0 0 1px #ddd;display: flex;align-items: center;justify-content: flex-end;}.browser-header span {background: #9e9e9e;width: 8px;height: 8px;display: inline-block;border-radius: 50%;margin-right: 5px;}.team-section {justify-content: space-between;width: 60%;flex-direction: row;}.team-section .list {width: 33.33%;}.about-page, .about-page h1, .about-page a {color:white;fill: white;}.about-page {background-color: #252525;padding-bottom: 140px;}.about-me {display: flex;flex-direction: row;}.about-me > div {width: 50%;}.about-me > div:last-child {padding: 60px;}.about-me .social-links {margin-top: 40px }@media screen and (max-width: 768px) {footer img {width: 90vw;}}#home nav {padding-left: 15px;padding-right: 15px;}@media screen and (min-width:480px) {#home nav {padding-left: 120px !important;padding-right: 120px !important;}}@media screen and (max-width:480px) {.font-section {flex-direction: column !important;}.font-section h2 {margin-bottom: 20px !important;}.colors div {width: 90vw !important;}#home .image-wrapper {margin-left: 10px;margin-right: 100px;}#home .image-wrapper:last-child {margin-right: 10px;}#home h3 {font-size: 32px !important;}#home .image-wrapper img {width: 95vw;}#home {height: 100vh;}}@media screen and (max-width: 1530px) {nav {position: relative !important;}.page {padding-top: 0 !important;}}@media screen and (min-width: 1530px) {nav {padding: 40px 120px !important;}}@media screen and (max-width: 960px) {.project-content-container {display: flex;flex-direction: column-reverse;}.project-content {position: relative;top: 0;text-align: center;margin-top: 30px;left: 0;}.project-content a {margin-bottom: 160px;}.project-images {padding: 15px 0;margin-left: 0;display: flex;overflow-x: scroll;}.image-wrapper {filter: none !important;transform: none !important;padding: 0;width: 100%;margin: 0 20vw;}.image-wrapper img {width: 65vw;}.image-wrapper:last-child {margin-right: 25vw;}}@media screen and (max-width: 768px) {.video-section iframe {height: 300px !important;}h1 {line-height: 1.2em;font-size: 42px;}p {font-size: 18px;}.page .container {padding: 0 20px;}section {padding: 30px 0;}section article {flex-direction: column;margin-top: 20px;}.intro-section article {margin-top: 20px;}.intro-section .content {width: 100%;margin: 0;}.intro-section .content a {margin-top: 20px;margin-bottom: 40px;}.text-section h1 {font-size: 40px;margin-bottom: 30px;}.image-section .image {width: 100%;margin: 0 0 15px 0;}.image-section img {width: 100%;}.team-section {width: 100%;flex-wrap: wrap;}.team-section .list {margin-bottom: 20px;}.image-section .image:last-child, .team-section .list:last-child {margin-bottom: 0;}.list {width: 100% !important;}.about-me {display: flex;flex-direction: column;}.about-me > div {width: 100%;}.about-me > div:last-child {padding: 20px;}}.about-page .browser-header {display: none;}.font-section {flex-direction: row;justify-content: space-between;}.font-section h2 {font-family: 'Nunito Sans', sans-serif;font-size: 4vw;line-height: 1.2;margin-bottom: 80px;}.colors div {height: 70px;margin-bottom: 25px;display: flex;width: 400px;align-items: center;padding-left: 20px;border-radius: 8px;color: #FFF;font-weight: 600;}nav {position: absolute;width: 100%;display: flex;padding: 20px 0px;background: transparent;align-items: center;justify-content: space-between;z-index: 90;top: 0;left: 0;}h4 {font-size: 16px;font-weight: 700;letter-spacing: 0.1em;text-transform: uppercase;margin-bottom: 20px;}h1 {font-size: 58px;color: var(--header-color);font-family: 'Playfair Display', serif;line-height: 1.4em;margin-bottom: 10px;}h6 {font-weight: 700;letter-spacing: 0.2em;;}.float {animation: float 6s ease-in-out infinite;}.fade-enter-active, .fade-leave-active {transition-duration: 0.3s;transition-property: opacity;transition-timing-function: ease;}.fade-enter, .fade-leave-active {opacity: 0 }.container {max-width: 1200px;margin: 0 auto;padding: 0 60px;}.caption {text-align: center;padding-top: 30px;font-size: 16px;font-style: italic;}video, img {border-radius: 4px;width: 100%;}.bg-img {height: 25vw;min-height: 400px;background-size: cover;background-repeat: no-repeat;background-position: 50%;background-attachment: fixed;}.video-section iframe {width: 100%;height: 500px;}