:root{--soft-orange: hsl(35, 77%, 62%);--soft-red: hsl(5, 85%, 63%);--off-white: hsl(36, 100%, 99%);--grayish-blue: hsl(233, 8%, 79%);--dark-grayish-blue: hsl(236, 13%, 42%);--very-dark-blue: hsl(240, 100%, 5%)}html{font-size:16px;height:100%}*,*:before,*:after{box-sizing:border-box;padding:0;margin:0}body{width:100vw;height:100vh}#root{display:flex;justify-content:center;align-items:center;padding:2rem}a{display:block;text-decoration:none}@font-face{font-family:Inter;src:url(/assets/Inter-VariableFont_slnt_wght-ZO3WBJgw.ttf);font-weight:400 800}@media(prefers-reduced-motion:no-preference){a,button{transition:all .3s ease-out}}.container{font-family:Inter;font-weight:400;color:var(--dark-grayish-blue);max-width:650px}.header-container{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:1rem}.menu-btn{background-color:transparent;border:0;cursor:pointer}.menu-btn:hover{transform:scale(1.1)}.content-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2rem}.main-content{display:flex;flex-direction:column;gap:1rem}.main-content h1{color:var(--very-dark-blue);font-weight:800;font-size:3rem}.read-more-btn{background-color:var(--soft-red);color:var(--very-dark-blue);font-family:Inter;font-weight:700;cursor:pointer;letter-spacing:.2rem;width:10rem;height:3rem}.read-more-btn:hover{background-color:var(--very-dark-blue);color:var(--off-white)}picture{width:100%}.image{max-inline-size:100%;block-size:auto;margin:0}.new-content{padding:2rem;background-color:var(--very-dark-blue)}.new-content h2{color:var(--soft-orange)}.new-content p{color:var(--grayish-blue)}.anchor.title-new{color:var(--off-white);font-weight:700;font-size:1.2rem;margin:2rem 0 .5rem}.anchor.title-new:hover{color:var(--soft-orange)}.new-content p{border-bottom:.1rem solid var(--dark-grayish-blue);padding-bottom:2rem}.new-content p:last-child{border:0;padding-bottom:0}.trending-content{display:flex;flex-direction:column;gap:1rem}.trending-article{display:flex;flex-direction:row;gap:1rem;align-items:center}.trending-article div{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;height:6rem}.trending-article div h3{color:var(--soft-red);font-size:1.5rem;font-weight:800}.anchor.trending{color:var(--very-dark-blue);font-size:1rem;font-weight:800}.anchor.trending:hover{color:var(--soft-red)}.trending-img{height:6rem}@media screen and (min-width:860px){.container{max-width:86rem}.content-container{display:grid;grid-template-areas:"main-content main-content new-content" "main-content main-content new-content" "trending-content trending-content trending-content";grid-template-columns:1fr,1fr,10rem;grid-auto-rows:auto}.main-content{grid-area:main-content;display:grid;grid-template-areas:"main-img main-img" "main-header main-description" "main-header main-button";grid-template-columns:1fr,1fr,20rem;grid-auto-rows:auto}.main-content picture{grid-area:main-img}.main-content h1{grid-area:main-header}.main-content p{grid-area:main-description}.main-content button{grid-area:main-button}.new-content{grid-area:new-content;width:20rem;height:100%;place-content:center}.trending-content{margin-top:2rem;grid-area:trending-content;flex-direction:row;gap:2rem}body{padding:clamp(3rem,2.8rem + 5vw,10rem);padding-top:2rem}}.navbar{display:flex;flex-direction:column;justify-content:space-between;margin-left:2rem}.navbar a{text-decoration:none;padding:0;font-weight:700;font-size:2rem;color:var(--very-dark-blue);margin-bottom:3rem}.navbar a:hover,.navbar a:focus{color:var(--soft-red);outline:0}@media screen and (min-width:860px){.navbar{flex-direction:row;gap:2rem}.navbar a{font-weight:400;font-size:1rem;margin-bottom:0}}.menu-container{position:fixed;background-color:#00000080;top:0;left:0;width:100%;height:100%}.btn-close{margin:2rem 0 2rem 80%;background-color:transparent;border:0;cursor:pointer}.btn-close:hover{transform:scale(1.1)}.menu-container-content{width:60%;background-color:var(--off-white);height:100%;position:absolute;top:0;right:0}@media screen and (min-width:860px){.btn-close{display:none}}