style.css

@import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);@import url(https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap);:root{--color-primary-grey-0:#363945;--color-primary-grey-1:#505877;--color-primary-grey-2:#454a5f;--color-primary-grey-3:#202126;--color-primary-grey-4:#101013;--color-primary-orange-0:#fdac53;--color-primary-orange-1:#ffd2a2;--color-primary-orange-2:#ffbe76;--color-primary-orange-3:#e98e2c;--color-primary-orange-4:#bc6a11;--color-complement-0:#655e4c;--color-complement-1:#ae9b6e;--color-complement-2:#8c7f60;--color-complement-3:#37342e;--color-complement-4:#1c1a16}*,::after,::before{margin:0;padding:0;box-sizing:inherit}body,html{font-family:'Indie Flower',cursive,Roboto,sans-serif;box-sizing:border-box}.content{height:100%;position:relative;max-width:100vw;max-height:100vh;overflow-x:hidden;display:grid;place-items:center;grid-template:auto 1fr auto/repeat(auto-fit,minmax(min-content,max-content))}.header{margin:.7rem;position:fixed;top:0;left:0;width:3.6rem;height:auto;display:grid;grid-template-columns:1fr min-content;place-items:center/center;overflow:hidden;background:#000;border-radius:100%;z-index:9;box-shadow:0 19px 38px rgba(0,0,0,.3),0 15px 12px rgba(0,0,0,.22)}.header:hover{transform:scale(1.1);overflow:hidden}.nav{position:fixed;top:0;left:0;width:100%;height:100%;display:grid;place-items:start;overflow-x:hidden;transform:translate(-100%,-100%);transition:.5s;z-index:10;clip-path:circle(100% at 0 0);background:#000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header__dim--active{z-index:9;position:fixed;top:0;left:0;overflow:hidden;content:'';width:100%;height:100%;background:#000;opacity:.7}.nav__button{width:min-content;transition:.2s;transform:scale(1.4);overflow:hidden}.nav__button:hover{transition:.2s;transform:scale(1.6);overflow:hidden;padding:1.1rem}.nav__menu__link{transition:.3s;padding:1rem;width:max-content;color:var(--color-primary-orange-0)}.nav__menu__link:hover{transition:.3s;transform:scale(1.2);border-bottom:solid 2px var(--color-primary-orange-1)}.nav__menu__item:nth-of-type(2){padding:0 .5rem .5rem 40vw}.nav__menu__item:nth-of-type(3){padding:.5rem .5rem .5rem 30vw}.nav__menu__item:nth-of-type(4){padding:.5rem .5rem .5rem 20vw}.nav__menu__item:nth-of-type(5){padding:.5rem .5rem .5rem 10vw}.nav__menu__item:nth-of-type(6){padding:.5rem .5rem .5rem 0}.show{transform:translate(0);transition:.5s}.lock{overflow:hidden}.main{margin:auto 0 0;display:grid;place-items:center;overflow-x:hidden}.section{margin:-5rem 0 0;padding:4rem 0;min-height:100vh;width:100vw;display:grid;align-items:start;justify-items:center;overflow:hidden}.section-0{background-image:linear-gradient(to right bottom,#fff,#ffffff73),url(img/back.jpg);background-size:contain;clip-path:polygon(0 0,100% 0,100% 95%,0 100%);margin:0;padding:0 0 2rem}.section-1{background-image:linear-gradient(to right top,#ffd2a2,#ffd2a294),url(img/back-1.jpg);clip-path:polygon(0 5%,100% 0,100% 100%,0 95%)}.section-2{background-image:linear-gradient(to left bottom,#505877,#505877c2),url(img/back-2.jpg);color:var(--color-primary-orange-1);clip-path:polygon(0 0,100% 5%,100% 95%,0 100%)}.section-3{background-image:linear-gradient(to left top,#ffd2a2,#bc6911c5),url(img/back-3.jpg);clip-path:polygon(0 5%,100% 0,100% 100%,0 95%)}.section-4{background-image:linear-gradient(to right top,#454a5f,#454a5fef),url(img/back-4.jpg);color:var(--color-primary-orange-1);clip-path:polygon(0 0,100% 5%,100% 100%,0 100%)}@media (min-width:768px){li:nth-of-type(2){padding:1rem 1rem 1.5rem 55vw}li:nth-of-type(3){padding:1.5rem 1rem 1.5rem 48vw}li:nth-of-type(4){padding:1.5rem 1rem 1.5rem 40vw}li:nth-of-type(5){padding:1.5rem 1rem 1.5rem 33vw}li:nth-of-type(6){padding:1.5rem 1rem 1.5rem 25vw}.section-4{background-image:linear-gradient(to right top,#454a5f,#454a5fef),url(img/back-4.jpg);color:var(--color-primary-orange-1);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:max-content 1fr auto;align-items:center;overflow:visible}.section-4 .heading-h1{grid-column:1/-1}.section-4 .container{grid-column:2/-1}.image-section-4{min-width:15rem;grid-row:2/3;transform:translate(20rem,-4rem)}.image-section-0{max-width:40rem}}.container{display:grid;align-items:center;justify-items:center;overflow:visible}.heading-h1{display:inline-block;font-size:2rem;font-weight:900;padding:2rem;text-align:center;letter-spacing:.3rem;background-image:linear-gradient(to right,var(--color-primary-grey-3),var(--color-primary-grey-1));-webkit-background-clip:text;background-clip:text;color:transparent}.heading-h1--orange{background-image:linear-gradient(to right,var(--color-primary-orange-4),var(--color-primary-orange-0));-webkit-background-clip:text;background-clip:text;color:transparent}.heading-h2{display:inline;padding:1rem}.link{display:inline-block;text-decoration:none}.text{display:inline-block;padding:1rem;line-height:1.5rem}.text-center{text-align:center;width:100%}.text-contact{padding:0 0 0 1rem}.svg-hello{margin:2rem}.image-text{max-width:40rem}.image{display:block;box-shadow:0 19px 38px rgba(0,0,0,.3),0 15px 12px rgba(0,0,0,.22);margin:2rem;width:90%;max-width:40rem;height:auto;border-radius:5%}.image:hover{transition:.5s;box-shadow:0 0 30px rgba(0,0,0,.6)}.image-section-0{transition:.5s;border-radius:50%;margin:2rem 2rem 3rem}.image-section-0:hover{transition:.1s}.image-section-1{border-radius:5%;width:80%;max-width:30rem}.image-section-4{border-radius:50%;max-width:10rem;margin:2rem 2rem 3rem}.table{display:block}.button{background:0 0;border:none;padding:1rem}.horizontal-line{height:.01rem;width:80%;background:var(--color-primary-grey-1);border-radius:1rem;margin:2rem 0 3rem}svg{filter:invert(63%) sepia(75%) saturate(405%) hue-rotate(341deg) brightness(104%) contrast(98%)}.img-icon-social{width:40px;height:40px}.contact-text{text-decoration:none;width:100%;padding:1.5rem;display:flex;flex-flow:row;justify-content:flex-start;align-items:center;align-content:center;color:#fdac53}.contact-text:hover{opacity:.8;border-bottom:solid 2px var(--color-primary-orange-1)}.contact-text .heading-h2:hover{opacity:.8}@media (min-width:768px){.contact-text:nth-of-type(1){padding:2rem 1rem 2rem 30vw}.contact-text:nth-of-type(2){padding:2rem 1rem 2rem 20vw}.contact-text:nth-of-type(3){padding:2rem 1rem 2rem 10vw}.contact-text:nth-of-type(4){padding:2rem 1rem 2rem 0}}.footer{visibility:hidden}.js-scroll{opacity:0;transition:1s}.js-scroll.scrolled{opacity:1}.scrolled.fade-in{animation:1s ease-in-out both fade-in}.scrolled.fade-in-bottom{animation:1s ease-in-out both fade-in-bottom}.scrolled.slide-left{animation:1s ease-in-out both slide-in-left}.scrolled.slide-right{animation:1s ease-in-out both slide-in-right}@keyframes slide-in-left{0%{transform:translateX(-100px);opacity:0}100%{transform:translateX(0);opacity:1}}@keyframes slide-in-right{0%{transform:translateX(100px);opacity:0}100%{transform:translateX(0);opacity:1}}@keyframes fade-in-bottom{0%{transform:translateY(50px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}