:root{--green:#1dc56f;--magenta:#c51d73;--white-light:#f5f5f5;--gray-light:#303234;--white-dark:#ffffff;--gray-dark:#333}:root[theme='light']{--primary:var(--magenta);--bg:var(--white-light);--text:var(--gray-light);--bg-alt:var(--white-dark)}:root[theme='dark']{--primary:var(--green);--bg:var(--gray-light);--text:var(--white-light);--bg-alt:var(--gray-dark)}*{transition-duration:300ms;transition-timing-function:ease-out}html,body{font-family:'Roboto',sans-serif;height:100%;padding:0;margin:0;box-sizing:border-box;background:var(--bg);color:var(--text)}h1,h2,h3,h4,h5,h6{color:var(--text)}nav{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:1rem;.header-brand{font-family:'Sixtyfour',cursive;font-size:2rem}.header-buttons{display:flex;flex-direction:row;gap:0.5rem}}main{display:flex;padding:1rem 3rem 3rem 3rem;min-height:80%;& >div{width:100%}}a{text-decoration:none;color:var(--text);cursor:pointer;& >svg{fill:var(--text);&:hover{fill:var(--primary)}}&:hover{color:var(--primary)}}footer{display:flex;flex-direction:row;justify-content:center;align-items:center;text-align:center;bottom:0}button{background:none;border:none;padding:0;margin:0;color:var(--text);&:hover{color:var(--primary)}svg{fill:var(--text);&:hover{fill:var(--primary)}}}blockquote{background:var(--bg-alt);border-left:solid 2px var(--primary);font-style:italic;margin:0;& >p{margin:0 0 0 0.5rem}}svg{height:24px;width:24px}.article-list{width:100%;.article{padding:0.5rem;border-bottom:2px solid var(--primary);display:flex;flex-direction:row;align-items:center;gap:2rem;cursor:pointer;&:hover{background-color:var(--bg-alt)}.article-date{border:solid 1px var(--primary);border-radius:5px;width:50px;& >div{padding:0 0.25rem;background-color:var(--primary);color:var(--white-dark);text-align:center}& >div:nth-child(even){font-size:1.5rem;background-color:var(--white-dark);color:var(--gray-light)}}.article-content{width:80%;.article-title{color:var(--text);font-size:1.5rem}.article-description{color:var(--primary);font-style:italic}}}}@media only screen and (max-width:900px){nav{& >.header-brand{font-size:1rem}}svg{height:16px;width:16px}main{padding:1rem}}