a,body{color:var(--white-color)}h1,h2{font-weight:700;font-family:Montserrat,sans-serif}img,p{max-width:400px}a.project,footer,header{display:flex;background-color:var(--2-color)}a.main-project,footer a,h1,h2,header a{font-family:Montserrat,sans-serif}:root{--white-color:#ffffff;--1-color:#2E3C4E;--2-color:#38495E;--3-color:#4C5B6E;--4-color:#626E7E}*{margin:0;padding:0;transition:.5s ease-in-out;box-sizing:border-box}body{display:flex;flex-direction:column;justify-content:space-between;min-height:calc(100vh - 30px);background-color:var(--1-color)}section{margin:0 auto 50px;max-width:1865px}h1{margin:40px;text-align:center;text-transform:uppercase}a{text-decoration:none}h2{width:400px}p{margin:20px 0;font-family:Inter,sans-serif;font-weight:400}img{border-radius:5px}.wrapper-projects{display:flex;gap:35px;flex-direction:row;flex-wrap:wrap}a.main-project{font-size:50px;height:100vh;display:flex;justify-content:center;align-items:center}a.main-project:hover{font-size:60px}a.project{flex-direction:column;justify-content:space-between;padding:20px;max-width:440px;height:auto;transition:.3s ease-in-out;border-radius:15px}a.project:hover,footer a:hover,header a:hover{background-color:var(--3-color)}a.project:active,footer a:active,header a:active{background-color:var(--4-color)}a.project img{transition:333ms ease-in-out}a.project:hover img{transform:scale(1.1) translateY(12px);border-radius:0 0 15px 15px}footer,header{gap:10px;margin:50px auto;padding:0 30px;border-radius:20px}footer a,header a{height:40px;padding:10px 20px;border-radius:50vh;transition:background-color .25s ease-in-out}header{display:none}@media (max-height:700px){header{display:flex}}@media (max-width:2340px){section{max-width:1865px}}@media (max-width:1865px){section{max-width:1390px}}@media (max-width:1390px){section{max-width:915px}}@media (max-width:915px){footer,section{max-width:440px}a{margin:0 auto}.wrapper-projects{width:440px}footer{flex-wrap:wrap}}@media (max-width:460px){h1{margin:40px auto}a.project img,h1,h2,p{width:calc(100vw - 95px)}footer{width:calc(100vw - 55px);border-radius:15px}a.project:hover img{transform:none;border-radius:5px}}