:root{--white:#ffffff;--black:#222222;--blue:#3111e2;--pink:#f334d6;--base-margin:1rem;--base-padding:1rem;--border-radius:0.5rem;--base-font-size:1rem;--font-size-sm:calc(var(--base-font-size)*0.618);--font-size-lg:calc(var(--base-font-size)*1.618);--font-size-xl:calc(var(--base-font-size)*2.618);--screen-sm:360px;--screen-md:768px;--screen-lg:1024px;--screen-xl:1200px;--link-hover-time:0.2s}*{box-sizing:border-box}html{scroll-behavior:smooth}@media(min-width:768px){:root{body { max-width: var(--screen-md) } nav ul { grid-template-columns: 1fr 1fr 1fr; } section#articles { grid-template-columns: 1fr 1fr; } section#categories-tags { grid-template-columns: 1fr 1fr; }}}@media(min-width:1024px){:root{body { max-width: var(--screen-lg) } nav ul { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } section#articles { grid-template-columns: 1fr 1fr 1fr; } section#categories-tags { grid-template-columns: 1fr 1fr 1fr; }}}@media(min-width:1200px){:root{body { max-width: var(--screen-xl) }}}body{color:var(--back);font-family:system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen,Ubuntu,Cantarell,open sans,helvetica neue,sans-serif;line-height:1.5;margin:var(--base-margin);max-width:100%;width:100%;display:flex;flex-direction:column;align-items:center;margin:0 auto}header{display:flex;flex-direction:column;align-items:center;width:100%;border-bottom:1px solid var(--black);margin-bottom:var(--base-margin);padding:var(--base-padding);& p { font-size: var(--font-size-xl); background-color: var(--black); color: var(--white); padding: var(--base-padding); border-radius: var(--border-radius); }}main,section{display:flex;flex-direction:column;align-items:center;padding:var(--base-padding);width:100%}footer{border-top:1px solid var(--black);margin-top:var(--base-margin)}h1,h2,h3{display:flex;flex-direction:column;align-items:flex-start;border-radius:var(--border-radius);width:fit-content}h1{background-color:var(--black);color:var(--white);padding:var(--base-padding)}a{color:var(--blue);text-decoration:none;&:hover { color:var(--pink); }}ol li::marker,ul li::marker{font-weight:700}li{color:var(--black)}pre{background-color:var(--black);color:var(--white);border-radius:var(--border-radius);text-align:left;font-style:italic;width:fit-content;margin:0;white-space:pre-wrap;overflow-wrap:break-word}code{display:inline-block;max-width:100%;padding:var(--base-padding);white-space:pre-wrap;overflow-wrap:break-word}figure{background-color:var(--black);color:var(--white);padding:calc(var(--base-padding)*2);border-radius:var(--border-radius);text-align:center;font-style:italic;width:fit-content;margin:0}blockquote::before{content:open-quote}blockquote::after{content:close-quote}blockquote{quotes:"“" "”" "‘" "’";text-align:center;font-style:italic}figcaption{text-align:center;font-style:italic;padding-bottom:var(--base-padding)}.btn{display:flex;flex-direction:column;justify-self:flex-start;padding:calc(var(--base-padding)/4);background-color:var(--black);color:var(--white);border:none;border-radius:var(--border-radius);cursor:pointer;width:fit-content;margin-left:auto;&:hover { background-color:var(--pink); color:var(--white); -webkit-animation:hoverBGLink var(--link-hover-time) ease; -moz-animation:hoverBGLink var(--link-hover-time) ease; animation:hoverBGLink var(--link-hover-time) ease; }}nav{width:100%}nav ul{display:grid;grid-template-columns:1fr;gap:var(--base-padding);align-self:center;padding:var(--base-padding);border:inset 2px var(--black);font-weight:700;& li { flex: 1; list-style-type: none; text-align: center; & a:hover { -webkit-animation: hoverTextLink var(--link-hover-time) ease; -moz-animation: hoverTextLink var(--link-hover-time) ease; animation: hoverTextLink var(--link-hover-time) ease; } }}section#articles{display:grid;grid-template-columns:1fr;gap:var(--base-padding);& article { padding: var(--base-padding); border: 2px solid var(--black); height: 100%; & h2 a { background-color: var(--black); color: var(--white); align-self: flex-start; padding: var(--base-padding); color: var(--white); border-radius: var(--border-radius); &:hover { background-color: var(--pink); color: var(--white); -webkit-animation: hoverBGLink var(--link-hover-time) ease; -moz-animation: hoverBGLink var(--link-hover-time) ease; animation: hoverBGLink var(--link-hover-time) ease; } } } & img { border-radius: var(--border-radius); width: 100%; max-width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: center; } & a { justify-self: flex-end; }}section#pagination{display:flex;justify-self:center;font-size:var(--base-font-size)}ul.pagination{display:flex;justify-self:center;padding:calc(var(--base-padding)/4);& li.page-item { list-style-type: none; padding: var(--base-padding); &.active a { background-color: var(--white); color: var(--pink); cursor: not-allowed; } &:hover a { background-color: var(--white); color: var(--pink); } &:hover { background-color: var(--white); color: var(--black); } &.disabled a { background-color: var(--white); color: var(--black); } &.disabled a { cursor: not-allowed; } }}#categories-tags{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-evenly;padding:0}article{align-items:flex-start}time{font-style:italic;font-weight:700}.reading-time{font-style:italic}.reading-time-time{font-weight:700}img{border-radius:var(--border-radius);width:100%;max-width:100%;border:2px solid var(--black)}.categories-tags-label{display:flex;justify-content:center;align-items:flex-start}.categories-tags{display:flex;flex-wrap:wrap;flex-direction:row;align-items:flex-start;padding:0;& li { display: flex; justify-content: center; list-style-type: none; background-color: var(--black); padding: calc(var(--base-padding)/2); margin: calc(var(--base-margin)/2); margin-left: 0; border-radius: var(--border-radius); width: auto; & a { color: var(--white); display: block; text-align: center; } &:hover { background-color: var(--pink); color: var(--white); -webkit-animation: hoverBGLink var(--link-hover-time) ease; -moz-animation: hoverBGLink var(--link-hover-time) ease; animation: hoverBGLink var(--link-hover-time) ease; } }}.fader{animation-duration:300ms;animation-timing-function:ease-in-out}@keyframes fade-out{from{opacity:1}to{opacity:0}}@keyframes fade-in{from{opacity:0}to{opacity:1}}.fader.fade-out{opacity:0;animation-name:fade-out}.fader.fade-in{opacity:1;animation-name:fade-in}@-webkit-keyframes hoverTextLink{0%{color:var(--black)}100%{color:var(--pink)}}@-moz-keyframes hoverTextLink{0%{color:var(--black)}100%{color:var(--pink)}}@keyframes hoverTextLink{0%{color:var(--black)}100%{color:var(--pink)}}@-webkit-keyframes hoverBGLink{0%{background-color:var(--black);color:var(--white)}100%{background-color:var(--pink);color:var(--white)}}@-moz-keyframes hoverBGLink{0%{background-color:var(--black);color:var(--white)}100%{background-color:var(--pink);color:var(--white)}}@keyframes hoverBGLink{0%{background-color:var(--black);color:var(--white)}100%{background-color:var(--pink);color:var(--white)}}footer{padding:var(--base-padding);& a:hover { -webkit-animation: hoverTextLink var(--link-hover-time) ease; -moz-animation: hoverTextLink var(--link-hover-time) ease; animation: hoverTextLink var(--link-hover-time) ease; }}