@import url("https://fonts.googleapis.com/css2?family=Alata&display=swap");@import url("https://fonts.googleapis.com/css2?family=Alata&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap");*{margin:0;padding:0;box-sizing:border-box}h1,h2,h3{font-family:Josefin Sans,sans-serif;font-weight:300}p{font-family:Alata,sans-serif;font-weight:400}h2{font-size:30px}section{display:flex;justify-content:center;align-items:center}.container{width:320px;overflow:hidden}.navbar{position:fixed;justify-content:center;z-index:10;transition:background-color .3s ease-in-out}.nav-items,.navbar{width:100%;display:flex;align-items:center}.nav-items{height:90px;flex-direction:row;justify-content:space-between}.nav-items svg{cursor:pointer}.main-logo{transform:translateY(2.15px)}.nav-tabs{display:flex;align-items:center;color:#fff}.nav-link{margin-left:38px;cursor:pointer;position:relative}.nav-link:after{content:"";position:absolute;left:50%;bottom:-10px;height:2px;width:0;background-color:#fff;transform:translateX(-50%);transition:width .3s ease}.nav-link:hover:after{width:100%}.nav-link.active:after{width:100%;background-color:#fff}.drawer{width:100%;min-height:100vh;background-color:#000;color:#fff;display:flex;flex-direction:column;align-items:center}.drawer .container{overflow:visible}.close-line{width:100%;height:90px;display:flex;justify-content:space-between;align-items:center;margin-bottom:90px}.drawer-tabs{width:100%;display:flex;flex-direction:column;justify-content:center;margin-bottom:40px}.drawer-tabs h2{margin-bottom:34px}.home{width:100%;min-height:100vh;background-size:cover;background-position:50%}.home .container{margin:150px 0}.banner{width:320px;font-size:28px;color:#fff;padding:20px}.banner,.main-title{position:relative}.banner:before{content:"";position:absolute;top:-.5px;left:0;width:0;height:0;border:3px solid transparent;background:transparent;animation:animate 1s linear 1s forwards}@keyframes animate{0%{width:0;height:0;border-color:transparent}50%{width:98%;height:0;border-color:#fff #fff transparent transparent}to{width:98%;height:98%;border-color:#fff #fff transparent transparent}}.banner:after{content:"";position:absolute;top:-.5px;left:0;width:0;height:0;border:3px solid transparent;background:transparent;animation:animate2 1s linear 1s forwards}@keyframes animate2{0%{width:0;height:0;border-color:transparent transparent transparent #fff}50%{width:0;height:98%;border-color:transparent transparent #fff #fff}to{width:98%;height:98%;border-color:transparent transparent #fff #fff}}.overlay{position:absolute;top:0;left:0;width:100%;background:hsla(0,0%,100%,.2);box-shadow:0 4px 30px rgba(0,0,0,.1);backdrop-filter:blur(8.2px);-webkit-backdrop-filter:blur(8.2px);border:1px solid hsla(0,0%,100%,.3);z-index:2}.ad-section{padding:100px 0 50px}.pic,.pic img{width:100%}.info{text-align:center;padding:24px 14px 0;display:flex;flex-direction:column;align-items:center}.info h2{margin-bottom:12px;color:#696969}.info p{line-height:24px;color:#8c8c8c}.creations{padding:50px 0 100px}.creations-layout{flex-direction:column;color:#696969}.creations-header,.creations-layout{width:100%;display:flex;align-items:center}.creations-header{justify-content:center;margin-bottom:50px}.creations-grid{width:100%;display:grid;grid-template-columns:repeat(1,1fr);grid-gap:24px;gap:24px;margin-bottom:34px}.creation{position:relative;height:120px;background-size:cover;background-position:50%;color:#fff;cursor:pointer}.creation h3{width:100%;height:100%;padding-top:60px;padding-left:20px;position:absolute;background-image:linear-gradient(90deg,rgba(0,0,0,.6),transparent);transition:all .5s ease-in-out}.see{border:2px solid #000;color:#000;padding:12px 46px;letter-spacing:4px;cursor:pointer}.footer,.see:hover{background-color:#000;color:#fff}.footer{padding:80px 0}.footer .container,.footer-top{display:flex;flex-direction:column;align-items:center}.footer-top{justify-content:center}.footer-top svg{margin-bottom:44px;cursor:pointer}.footer-tabs{display:flex;flex-direction:column;align-items:center}.footer-link{margin-bottom:20px}.footer-link:last-of-type{margin-bottom:0}.footer-end{flex-direction:column;justify-content:center}.footer-end,.socials{display:flex;align-items:center}.socials{width:193px;flex-direction:row;justify-content:space-between;margin:54px 0 18px}.socials svg{cursor:pointer}@media screen and (min-width:400px){.banner,.container{width:350px}}@media screen and (min-width:475px){.container{min-width:475px}.pic{height:240px}.pic img{height:100%}.info h2{width:85%}.creation{height:160px}.creation h3{padding-top:95px}}@media screen and (min-width:640px){.container{width:640px}.banner{width:500px;font-size:34px;padding:30px}.creation{height:220px}.creation h3{padding-top:140px;font-size:24px}.footer{padding:40px 0}.footer-tabs{width:360px;flex-direction:row;justify-content:space-between;align-items:center}.footer-link{margin-bottom:0}.footer-top svg{margin-bottom:18px}.socials{margin:40px 0 18px}}@media screen and (min-width:768px){.container{width:768px}.banner{width:600px;font-size:38px}.pic{height:280px}.creations-header{justify-content:space-between}.creations-grid{grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:34px}}@media screen and (min-width:1024px){h2{font-size:34px}.container{width:1024px}.home .container{margin:150px 0 90px}.ad-section .container{display:flex;position:relative}.pic{width:65%;height:400px}.info{width:50%;justify-content:end;background-color:#fff;position:absolute;right:0;bottom:-2px;height:250px;padding-left:74px;padding-right:0;text-align:left;align-items:normal}.info h2{width:70%;margin-bottom:10px}.creation:hover .creation-title{animation:swap .5s forwards}@keyframes swap{0%{color:#fff;background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.7))}to{color:#000;background-image:linear-gradient(180deg,hsla(0,0%,100%,.5),hsla(0,0%,100%,.5))}}.footer .container{flex-direction:row;justify-content:space-between;align-items:end}.footer-top{align-items:flex-start}.footer-top svg{transform:translateY(7px)}.footer-end{align-items:flex-end}.socials{margin:0 0 18px}}@media screen and (min-width:1280px){h2{font-size:42px}.container{width:1250px}.banner{width:650px;font-size:44px}.pic{height:530px;width:68%}.info{width:46%;height:330px;padding-left:120px}.info h2{width:100%;margin-bottom:20px}.info p{line-height:32px}.creations-grid{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:34px}.creation{height:500px}.creation h3{padding-top:400px;padding-left:36px;font-size:28px;background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.7))}}@media screen and (min-width:1440px){.banner{width:700px;font-size:46px}}@media screen and (min-width:1536px){h2{font-size:50px}.container{width:1536px}.banner{width:800px;font-size:54px}.pic{height:600px}.info{height:360px;padding-left:150px}.creation{height:600px}.creation h3{padding-top:480px;padding-left:45px;font-size:32px}}