style.css

a{color:black;text-decoration:none}ol,ul{list-style:none}html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,em,img,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,footer,header,nav,section,main{margin:0;padding:0;border:0;vertical-align:baseline}h1,h2,h3,h4,h5,h6,p,a,ul{font-size:1em;font-weight:normal}body,h1,h2,p,ul,li,a{margin:0px;padding:0px;list-style:none}a:hover{text-decoration:none}a{text-decoration:none}img{display:block;max-width:100%}*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}body,h1,h2,p,ul,li,a{margin:0px;padding:0px;list-style:none}html{font-size:62.5%}@media only screen and (max-width: 60rem){html{font-size:50%}}:root{--color-1: #3d8af7;--color-2: #2effa1;--color-3: #00214d;--color-grey-light-1: #faf9f9;--color-grey-light-2: #f4f2f2;--color-grey-light-3: #f0eeee;--color-grey-light-4: rgba(204, 204, 204, 0.548);--color-grey-dark-1: #333;--color-grey-dark-2: #777;--color-grey-dark-3: #999;--shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3);--shadow-light: 0 2rem 5rem rgba(0, 0, 0, 0.06);--line: 1px solid var(--color-grey-light-4)}.container{display:grid;grid-template-columns:[sidebar-start] 20rem [sidebar-end content-start] 1fr repeat(8, [col-start] minmax(-webkit-min-content, 14rem) [col-end]) 1fr [content-end];grid-template-columns:[sidebar-start] 20rem [sidebar-end content-start] 1fr repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) 1fr [content-end];grid-template-rows:12rem -webkit-min-content;grid-template-rows:12rem min-content;background:var(--color-grey-light-1);background-repeat:no-repeat;background-size:cover}.titulo-sessao{font-family:'Noto Sans', sans-serif;font-size:3.6rem;font-weight:bold;margin-top:-1.5rem;margin-bottom:1rem;color:var(--color-1)}.texto-sessao{font-family:'Blinker', sans-serif;font-size:1.8rem;line-height:2.7rem;color:var(--color-grey-dark-1)}.call-to-action{font-family:'Noto Sans', sans-serif;font-size:2rem;color:var(--color-grey-light-1)}.nome-propriedade{margin-bottom:1rem;font-family:'Noto Sans', sans-serif;color:var(--color-grey-dark-1);font-size:1.8rem}.valor-propriedade{font-family:'Noto Sans', sans-serif;color:var(--color-1);font-size:1.8rem}.comentario{display:block;font-family:'Noto Sans', sans-serif;color:var(--color-grey-dark-3);font-size:1.4rem;margin-top:.5rem}.video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%}.header{grid-row:1 / 2;grid-column:1 / -1;background-color:var(--color-3);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:2rem 0;-webkit-box-shadow:var(--shadow-light);box-shadow:var(--shadow-light)}.header__logo{height:7rem;margin-left:2rem}.header__titulo{justify-self:start;font-family:'Blinker', sans-serif;font-size:7rem;color:var(--color-grey-light-1)}.sidebar{grid-column:sidebar-start / sidebar-end;grid-row:2 / 41;background-color:var(--color-2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;justify-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-top:3rem}.sidebar__separador{font-family:'Blinker', sans-serif;font-size:2.2rem;line-height:2.7rem;margin:1rem 0;color:var(--color-grey-dark-1)}.sidebar__lista-items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.sidebar__item{padding:.5rem;font-family:'Blinker', sans-serif;font-size:1.8rem;line-height:1.8rem;color:var(--color-grey-dark-2)}.sidebar__item:not(:last-child){margin-bottom:.5rem}.sidebar__item:hover{cursor:pointer}.topico{padding-bottom:3rem;margin:4rem;grid-column:content-start / content-end;display:grid;grid-column-gap:1rem;grid-template-columns:repeat(10, [col-start] 1fr [col-end]);grid-template-rows:repeat(3, -webkit-min-content);grid-template-rows:repeat(3, min-content);border-bottom:var(--line)}.topico__explicacao{grid-column:col-start 1 / col-end 3}.topico__texto{grid-column:col-start 1 / col-end 3;grid-row:2 / 3;padding-bottom:2rem;margin-bottom:2rem;border-bottom:var(--line)}.topico__texto--sem-linha{border:none}.topico__lista-propriedades{display:grid;grid-row-gap:1.5rem}.topico__exemplo{grid-column:col-start 4 / col-end 10;align-self:start;display:grid;grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr));grid-row-gap:3rem;grid-column-gap:1.5rem;margin-bottom:4rem}.topico__img-exemplo{grid-column:span 2;-ms-flex-item-align:start;align-self:start;justify-self:center}.topico__codepen{grid-column:col-start 4 / col-end 6;justify-self:center;display:-webkit-box;display:-ms-flexbox;display:flex;color:var(--color-3)}.topico__codepen p{margin-right:0.5rem}.topico__codepen span{-webkit-transition:all 0.3s;transition:all 0.3s}.topico__codepen:hover span{-webkit-transform:translateX(1rem);transform:translateX(1rem)}.topico__abre-video{grid-column:col-start 7 / col-end 9;justify-self:center;display:-webkit-box;display:-ms-flexbox;display:flex;color:var(--color-3);cursor:pointer}.topico__abre-video p{margin-right:0.5rem}.topico__abre-video span{margin-right:0.5rem;-webkit-transition:all 0.3s;transition:all 0.3s}.topico__abre-video:hover span{-webkit-transform:translateY(1rem);transform:translateY(1rem)}.topico__video{display:none;height:0;grid-column:col-start 3 / col-end 8;margin-top:3rem;height:400px;-webkit-transition:all 0.3s;transition:all 0.3s}.topico__video--ativo{display:block;height:auto}