@import url("https://fonts.googleapis.com/css?family=Fjalla+One&display=swap&subset=latin-ext");:root{--primary: #eee;--dark: #666;--light: #fff;--shadow: 0 1px 5px rgba(104, 104, 104, 0.8)}html{box-sizing:border-box;font-family:'Fjalla One', sans-serif;color:var(--dark)}body{background:#fff;margin:0;line-height:1.4}.btn{background:var(--dark);color:var(--light);padding:0.6rem 1.3rem;text-decoration:none;border:0}img{max-width:100%}.wrapper{display:grid;grid-gap:20px;grid-template-areas:"navbar"}.content{display:grid;grid-gap:20px;margin:0 1em}.main-nav{position:sticky;top:0;background-color:#24252A;align-items:center;padding:1em 5%;grid-area:navbar;display:grid;grid-template-columns:1fr 2fr .5fr;grid-template-rows:auto;grid-template-areas:"logo content buttons"}.main-nav li,.main-nav a,.main-nav button{font-family:'Fjalla One', sans-serif;font-weight:500;font-size:16px;color:#edf0f1;text-decoration:none}.main-nav .logo{grid-area:logo;cursor:pointer;font-size:2em;margin:0;color:#fff}.main-nav .nav__links{grid-area:content;list-style:none;margin-left:auto}.main-nav .nav__links li{display:inline-block;padding:0px 20px}.main-nav .nav__links li a{transition:all 0.3s ease 0s}.main-nav .nav__links li a:hover{color:#0088a9}.main-nav button{padding:9px 25px;background-color:#0088a9;border:none;border-radius:50px;cursor:pointer;transition:all 0.3s ease 0s;float:right}.main-nav button:hover{background-color:rgba(0,136,169,0.8)}.top-container{display:grid;grid-gap:20px;grid-template-areas:'showcase showcase top-box-a' 'showcase showcase top-box-a'}.showcase{grid-area:showcase;min-height:400px;background:url(../img/showcase.png);background-size:cover;background-position:center;padding:3rem;display:flex;flex-direction:column;align-items:start;justify-content:center;box-shadow:var(--shadow)}.showcase h1{font-size:4rem;margin-bottom:0;color:var(--light)}.showcase p{font-size:1.3rem;margin-top:0;color:var(--light)}.top-box{background:var(--primary);display:grid;align-items:center;justify-items:center;box-shadow:var(--shadow);padding:1.5rem}.top-box .price{font-size:2.5rem}.top-box-a{grid-area:top-box-a}.top-box-b{grid-area:top-box-b}.boxes{display:grid;grid-gap:20px;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))}.box{background:var(--primary);text-align:center;padding:1.5rem 2rem;box-shadow:var(--shadow)}.box a{color:var(--dark)}.info{background:var(--primary);box-shadow:var(--shadow);display:grid;grid-gap:30px;grid-template-columns:repeat(2, 1fr);padding:3rem}.portfolio{display:grid;grid-gap:20px;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))}.portfolio img{width:100%;box-shadow:var(--shadow)}footer{margin-top:2rem;background:var(--dark);color:var(--light);text-align:center;padding:1rem}@media (max-width: 700px){.top-container{grid-template-areas:'showcase showcase' 'top-box-a top-box-b'}.showcase h1{font-size:2.5rem}.main-nav ul{grid-template-columns:1fr}.info{grid-template-columns:1fr}.info .btn{display:block;text-align:center;margin:auto}}@media (max-width: 500px){.top-container{grid-template-areas:'showcase' 'top-box-a' 'top-box-b'}}
